SmartUX Studioでコンポーネントを設計するには

2037 views

このビデオでは、コンポーネントを設計するプロセスを学びます。フォームを作成し、カラム、コンテナ、行を追加し、ラベルと入力フィールドを追加する方法を学びます。また、データマッピング、作業の保存、SmartUXライブプレビューでの設計したコンポーネントの表示についても説明します。

デモでは、Formという名前のコンポーネントを設計します。このコンポーネントには、Magic xpa Studioで作成した2つのLabelコントロールと2つのEditコントロールがあります：

SmartUX Studioでフォームコンポーネントを開いたら、UXウィジェットオプションに進みます。

必要なウィジェットをキャンバスにドラッグ＆ドロップします。

まず、カード(Card)、コンテナ(Container)、いくつかの行(Row)、いくつかのカラム(Column)を使用して、コンポーネントの構造を作成します。

これで構造ができたので、EditウィジェットとLabelウィジェットを追加する。ウィジェットをドラッグ＆ドロップしている間、キャンバスを拡張モードに切り替えることができます。

トップバーの「Expand View」ボタンをクリックすると、キャンバスが拡大され、コンポーネントの内容が見やすくなります。

キャンバスのビューを通常のビューに戻します。これで、ウィジェットをMagic xpaコントロールにマッピングすることができます。コントロールをマッピングするために、一度に個々のウィジェットを選択します。

ラベルという名前の最初のウィジェットを選択する。

選択されたウィジェットのプロパティシートは、以下のように右ペインに表示されます。

プロパティシートから、データマッピングダイアログを開くを選択する。

必要なコントロールを選択します。

また、Textにmg関数をマッピングすることもできる。.

プロパティシートから同じダイアログを開く。.

mg関数のデータマッピングを選択します。また、Set Static HTML オプションから静的な値をマッピングすることもできます。.

次に、マッピングしたいコントロールの mg 関数を選択します。ここでは、FirstNameLabelコントロールにmg.getTextをマッピングすることを考えます。.

すべてのウィジェットがマッピングされたら、ライブプレビューに移動します。

このコンポーネントの動作をご覧いただけます。