ボタン

482 views

ボタン

［プッシュボタン］コントロールに対応したコントロールです。

Magic Xpa側の［プッシュボタン］コントロールに関して設定は以下の通りになります。

①：フォームにボタン設置する

②：SmartUX側と関連するプロパティを設定する

⁂必要に応じてご活用ください。

可視

コントロールを表示させるかどうか指定します。論理値を返す式で指定することもできます。

有効

コントロールを有効にするかどうかを指定します。有効にするかどうかを表す論理値を返す式を使用できます。

SmartUX側にはボタンウィジェットを使います。

ボタンウィジェットは以下のような感じになっております。

１：Magic Xpaと関連するためData Mapping入力の隣にある歯車ボタンをクリックして設定します。

設定した後は以下の通りなっております。

これでMagic Xpa側とSmartUX側は連携取れた状態になります。

Magic Xpa側で”可視”プロパティを設定した場合は、SmartUX側で以下の通りに設定をします。

歯車ボタンをクリックして設定しま。

設定した後は以下の通りなっております。

コンポーネント（ボタンウィジェット）を配置すると、デフォルトで以下のコードが定義されます。

<button data-comp-id=”button.1″ id=”button.1″>Button</button>

以下のプロパティがあります

プロパティ	内容
Data Mapping	Magic プログラムで定義されたコントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Non Magic Control Magic	Magic xpa のコントロールとはリンクされないようにするかどうかを指定します。
is inside Table	テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。
Button Style	ボタンの表示スタイルを指定します。以下から指定できます。 Default CoreUI Button …… CoreUIのボタンは、バックグラウンドでもフォアグラウンドでも、操作の初期化に使用されます。 Basic Button …… 境界線の無い長方形の平面ボタン Raised Button …… 長方形の立体ボタン Stroked Button …… 境界線のある長方形の平面ボタン Flat Button …… 長方形の平面ボタン Icon Button …… アイコンを含むことを意図した、透明な背景の円形ボタン FAB …… 立体の円形ボタン Mini FAB …… 立体の小型の円形ボタン
Button Color	ボタンの色を指定します。以下から指定できます。 Default Primary Accent Warn
Is Visible	コントロールを表示させるかどうか指定します。文字列を返すMagic Angular関数を指定します。 mg.getVisible(mgc.XXXXXXXXX)を設定することでMagicのコントロールの［可視］プロパティと連携されます。以下の文字列が指定できます。 visible …… 要素のボックスが可視になります。 hidden …… 要素のボックスは不可視になりますがレイアウトには通常通り影響します。 collapse …… テーブルの行、列では、行や列が不可視になり、占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。 “Hidden” の場合、キャンバスからも表示されなくなります。
Display If	コントロールを表示させるかどうか指定します。 Is Visibleと似ていますが論理型の式を設定し、True,Falseで指定します。他　mg.getValue(mgc.XXXXXXXXXX) !=”　と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます。 “False” の場合、キャンバスからも表示されなくなります。
Tooltip	コントロールに関連付けるツールチップを指定します。マウスカーソルをこのコントロールに置くと指定された文字が表示されます。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 mg.getTitle(mgc.XXXXXXXXXX)にてMagicで設定されたツールチップを表示させることが可能です。
Disabled	表示、非表示ではなく有効、無効を設定いたします。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。 mg.isDisabled(mgc.XXXXXXXXXX)とすることでMagicの有効無効と関連付けられます。
Form	［プッシュボタン］コントロールの書式を指定します。
Label	ボタンに表示するテキストを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Label Type	ボタンのラベルタイプを指定します。以下から指定できます。 Label Only …… テキストのみ Label and Icon…… テキストとアイコン Icon Only…… アイコンのみ
Label Color	ボタンのラベルの色を指定します。以下から指定できます。 Default Red Green Blue
icon	表示するアイコンを指定します。 [Label Type]が”Label and Icon” または “Icon Only” の場合に有効です。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するアイコンを選択することができます。
icon position	表示するアイコンの位置を指定します。以下から指定します。 [Label Type]が”Label and Icon” または “Icon Only” の場合に有効です。 Start …… End …… Icon Top …… Icon Bottom ……
icon color	アイコンの色を指定します。以下から指定できます。 [Label Type]が”Label and Icon” または “Icon Only” の場合に有効です。 Default Red Green Blue