1. 私たちについて

Mindrose Team は専門的な技術サービスチームです。現段階では、主に Mendix ローコードプラットフォームをベースに企業のデジタル化、インテリジェント化、モバイル化アプリケーションシステムの構築と開発を提供し、AI 機能をベースに自動化、プロセス化されたビジネスの実現を提供しています。

チームは Mendix 上級/中級認定開発者と AI エクスプローラーで構成されており、全員が豊富な企業情報化コンサルティング、開発、実装の経験と能力を持っています。

2. コンポーネント概要

私たちのチームメンバー Gavin が開発した Mx Antd Button と Popconfirm コンポーネントは、Mendix 中国チームが主導する Mendix-Antd プロジェクトの一部です。このプロジェクトは、antd コンポーネントを Mendix の世界に持ち込み、Mendix 開発者が UI コンポーネントの実装ではなく、ビジネス機能により注力できるようにすることを目指しています。

プロジェクトの Github アドレス: Mendix Antd Widget Show

プロジェクトのデモアドレス: Mendix Antd Widget Demo

以下は2つのコンポーネントの紹介です：

• Mx Antd Button: Ant Design Button コンポーネントをベースにした Mendix Pluggable Widget で、操作コマンドをマーク（またはカプセル化）し、ユーザーのクリック動作に応答し、対応するビジネスロジックをトリガーします。
• Mx Antd PopConfirm: Ant Design PopConfirm コンポーネントをベースにした Mendix Pluggable Widget で、完全な機能を備えたポップアップ式の浮動確認ダイアログを提供します。ポップアップ式のフルスクリーン中央モーダルダイアログと比較して、インタラクションの形式がより軽量です。

3. Mx Antd PopConfirm コンポーネント

簡単な操作例は以下の通りです：

このデモプロジェクトは次のリンクからアクセスできます：Mendix Antd Widget Demo

コンポーネントの Github リポジトリはこちらです。必要に応じてこのコンポーネントをベースにカスタマイズするか、私たちに連絡してください：Github Repo

3.1. コンポーネントの機能

1. Mendix textTemplate のテキスト組み立て機能を使用したダイアログタイトルのレンダリングを提供。
2. 確認/キャンセル（Confirm/Cancel）ボタンのテキストをカスタマイズ可能。
3. ダイアログの相対位置（placement）をカスタマイズ可能、デフォルトで12種類を含む。
4. 設定の Class Name を通じてダイアログの CSS スタイルをカスタマイズ可能。
5. デフォルトの双方ボタンスタイルの他に、確認（Confirm）ボタンのみの簡略化スタイルを定義可能。
6. コンテナには様々な種類の Mendix Widget（OnClick イベントをサポートするもの）を収容可能。

3.2. コンポーネントのインストールと使用

1. Marketplace または Github Release から mpk ファイルをダウンロードしてプロジェクトディレクトリ {YourMendixProjectFolder}/widgets/ に追加するか、Studio Pro で直接 Marketplace からダウンロードします。
2. 任意のページを選択し、ページに Antd PopConfirm を追加します。
3. 上記の PopConfirm に子コンポーネントを追加します。Button、Antd Button、Badge、Text、Label などのコンポーネントが可能です。動的な Title テキストを実装するには、PopConfirm コンポーネントを Data container コンポーネントに配置する必要があります。
4. コンポーネントに必要なプロパティを設定します。Title、Placement、Confirm Text、Confirm Event、Cancel Text、Cancel Event を含みます。
5. 実行して効果を確認します。

3.3. コンポーネント設定の説明

General セクション

• Title：ポップアップダイアログのタイトル。
• Disabled：ポップアップダイアログを無効にするかどうか、デフォルトは No。
• Placement：子コンポーネントに対するポップアップダイアログの位置、全12オプション。
• Class Name：ポップアップダイアログのスタイル。

Confirm Setting セクション

• Confirm Text：確認ボタンのテキスト。
• On Confirm Event：確認ボタンクリックイベント。

Cancel Setting セクション

• Show Cancel：キャンセルボタンを表示するかどうか、デフォルトは Yes。
• Cancel Text：キャンセルボタンのテキスト。
• On Cancel Event：キャンセルボタンクリックイベント。

4. Mx Antd Button コンポーネント

簡単な操作例は以下の通りです：

このデモプロジェクトは次のリンクからアクセスできます：Mendix Antd Widget Demo

コンポーネントの Github リポジトリはこちらです。必要に応じてソースコードをベースにカスタマイズするか、私たちに連絡してください：Github Repo

4.1. コンポーネントの機能

1. Ant Design では5種類のボタンを提供しています。

   • プライマリボタン：主要なアクションポイントに使用され、1つの操作領域に1つのプライマリボタンのみ。
   • デフォルトボタン：主従の区別のない一群のアクションポイントに使用。
   • 破線ボタン：一般的に追加操作に使用。
   • テキストボタン：最も重要度の低いアクションポイントに使用。
   • リンクボタン：一般的にリンク、つまり特定の場所へのナビゲーションに使用。

2. そして上記と組み合わせて使用する3つのステータスプロパティ。

   • 危険（Danger）：削除/移動/権限変更などの危険な操作、一般的に二次確認が必要。
   • ゴースト（Ghost）：背景色が複雑な場所に使用、ホームページ/製品ページなどの表示シーンでよく使用。
   • 無効（Disabled）：アクションポイントが使用できない場合、一般的にテキストでの説明が必要。

3. 大・中・小の3つのサイズレベルを提供。

4. デフォルト（Default）、円形（Circle）、丸角（Round）の3つの形状オプションを提供。

5. 親コンテナの全幅ボタンを実現するための Block 設定を提供。

4.2 コンポーネントのインストールと使用

1. Marketplace または Github Release から mpk ファイルをダウンロードしてプロジェクトディレクトリ {YourMendixProjectFolder}/widgets/ に追加するか、Studio Pro で直接 Marketplace からダウンロードします。
2. 任意のページを選択し、ページに Antd Button を追加します。
3. コンポーネントに必要なプロパティを設定します。Caption、Type、Shape、Size、Block、OnClick Event などを含みます。
4. 実行して効果を確認します。

4.3. コンポーネント設定の説明

Main セクション

• Caption：ボタンテキスト。
• Button Type：ボタンタイプを設定。
• Button Shape：ボタン形状を設定。
• Button Size：ボタンサイズを設定。
• Button Block：全幅ボタンにするかどうかを設定。

Status セクション

• Disabled：ボタンイベントを無効にするかどうか、デフォルトは No。
• Danger：危険ボタンかどうか、デフォルトは No。
• Ghost：ゴーストボタンかどうか、デフォルトは No。

Event セクション

• OnClick Event：ボタンクリックイベント。

5. 設計理念と今後の計画

Button コンポーネントの設計は Ant Design の Button コンポーネントをベースにしており、より豊かな Mendix の使用シーンに適応するため、Ant Design のシンプルで明快な設計スタイルと色彩規範を採用しています。豊富なボタンタイプにより、ページはより豊かな視覚階層と詳細設計を実現でき、これらの異なるタイプとサイズにより、開発者は様々な操作とページの要件を満たす適切なボタンを簡単に選択して使用できます。

PopConfirm コンポーネントの目標は、開発者がユーザーの確認が必要な操作をこのコンポーネントを通じて実装できる、シンプルなポップアップ確認ボックスを提供することです。その設計も Ant Design をベースにしており、Ant Design のシンプルなポップアップデザインとインタラクション方式を採用しています。この基礎の上で、デフォルトで「確認」と「キャンセル」の2つのボタンを提供し、開発者はこのコンポーネントを通じて、ユーザーに特定の操作や決定を確認するポップアップを簡単に表示できます。 このコンポーネントは Mendix 開発者の一般的なインタラクション要件を実装し、ネイティブな確認ポップアップの実装の開発量を簡素化し、インターフェースデザインとインタラクションをより効率的で軽快にしています。同時に、Button コンポーネントとの組み合わせにより、基本的なページデザインの要件のほとんどを満たすことができます。

さらなるアイデアや要件がありましたら、ぜひご教示ください。私たちは今後の作業で継続的に深化させていきます。

Cover Image by Vilius Kukanauskas from Pixabay.