背景 (Background)

多くの大企業のMendixローコード開発を支援する中で、MendixのネイティブButtonコンポーネントは、複雑なB2Bビジネスシナリオに直面した場合に不十分であることが多いことがわかりました。

Mendix開発者がUIスタイルの調整に多くの時間を費やすのではなく、ビジネスロジックにより集中できるようにするため、Mindroseチームは、業界で認められている優れたエンタープライズレベルのUIライブラリであるAnt DesignをMendixエコシステムに導入することを決定しました。

---

課題 (The Challenge)

1. エコシステムの分離：Mendixには独自の閉じたWidgetシステムがあります。Reactエコシステムからの複雑なAntdコンポーネントをMendix Pluggable Widgetsにシームレスにブリッジする方法。
2. プロパティマッピング：Antd Buttonの豊富なAPIを、Mendix Studio Proでビジネス開発者が理解しやすく構成しやすいグラフィカルなプロパティに変換する必要があります。
3. イベントバインディング：コンポーネントが外観上の一貫性を保つだけでなく、MendixのActionトリガーメカニズムに完全に応答することを確認する必要があります。

---

私たちのソリューション (Our Solution)

Mendix Pluggable Widget APIとReactに基づいて、Mx Antd Buttonコンポーネントを深くカプセル化しました。

1. 包括的な視覚的およびインタラクティブなマッピング

Ant Design Buttonのコア機能をMendix開発者に完全に公開しました：

• 5つのコアタイプ: Primary, Default, Dashed, Text, Link。
• 3つの状態修飾子: Danger, Ghost, Disabled。

2. 究極の開発者体験 (DX)

Mendix Studio Proでは、このコンポーネント用に非常に直感的な構成パネル（プロパティパネル）を設計しました。

---

オープンソースの影響 (Open Source Impact)

• 🚀 開発効率の向上：フロントエンドのスタイル調整時間が**80%**短縮されました。
• 🎨 エンタープライズレベルのUI品質：Mendixアプリケーションに、モダンなフロントエンドプロジェクトに匹敵するプレミアムな質感を提供します。
• 🤝 コミュニティへの貢献：このプロジェクトはGitHubでオープンソース化されています。

---

お試しください (Try it out)

オンラインデモ: Mendix Antd Widget Demo

ソースコード (GitHub): GavinCnod/mendix-antd-button