メニューボタンウィジェット (テーマ指定)
メニューボタンウィジェットは、インフォテーブルデータを使用して定義できるアイテムのリストから成るメニューを開くボタンを表示します。メニューのコンフィギュレーションに応じて、各メニューアイテムの選択されたアイテムデータまたはクリックされたイベントをバインドできます。このウィジェットは、レイアウト内の使用可能なスペースが限られており、頻繁に使用しないオプションを非表示にする場合に使用します。複数レベルのナビゲーションを作成して、共通のラベルの下にメニューアイテムをグループ化できます。
標準メニューボタン
ラベル付きのメニューボタン
次のイメージは、メニューボタンの使用可能なバリエーションを左から右に示しています。ButtonType プロパティを使用して、ボタンのバリエーションを「プライマリ」、「セカンダリ」、「ターシャリ」、「危険」、または「透明」に設定できます。デフォルトでは、ボタンは「ターシャリ」スタイルを使用して表示されます。
構造
1. メニューボタン
2. メニュー
3. 第 2 レベルのメニュー
レイアウト方向の選択
MenuDirection プロパティを使用して、水平方向または垂直方向を使用してメニューを開くことができます。
「垂直」(デフォルト) - ボタンの下にメニューが開きます。このモードを使用すると、ボタンを表示するために必要な水平方向のスペースを削減できます。たとえば、ボタンがツールバーに表示されている場合などです。
「水平」 - ボタンの横にメニューが開きます。このモードは、ボタンがサイドパネルに表示されているときに使用します。
データ形式
MenuEntry データシェイプを使用して、ウィジェットのインフォテーブルデータを作成できます。詳細については、MenuEntry データシェイプの使用を参照してください。
次のイメージは、MenuEntry データシェイプを使用してシンプルなメニューを表示するインフォテーブルの結果を示しています。
 | インフォテーブルの 1 行目はルートとして使用されるので、メニューアイテムとして表示されません。最上位レベルのメニューアイテムは、ルートの menuId に一致する parentMenuId を使用して定義する必要があります。 |
メニューアイテムへのカスタムツールヒントの追加
インフォテーブルデータに tooltip 列と tooltipIcon 列を追加することで、各メニューアイテムのツールヒントを表示できます。次のイメージは、メニューアイテムのカスタムツールヒントを示しています。
インフォテーブルを使用したメニューデータの設定
2. Mashup Builder で、「データ」パネルを使用してメニューサービスを追加します。
3. サービスのインフォテーブルの All Data プロパティをメニューボタンウィジェットの Data プロパティにバインドします。
4. 「保存」をクリックして、マッシュアップに対する変更を保存します。
または、Mashup Builder のインフォテーブルコンフィギュレーションダイアログを使用して、サービスを使用せずにインフォテーブルデータを手動で定義できます。
1. Mashup Builder で、メニューボタンウィジェットを選択します。
2. 「プロパティ」パネルで、Data プロパティの横の「追加」をクリックします。開いたダイアログで行を追加して、ウィジェットのインフォテーブルデータを定義できます。
3. 「追加」をクリックして、メニューアイテムの行データを定義します。
4. インフォテーブルに行を追加するには、「追加」をクリックします。
5. インフォテーブルデータを保存するには、「保存」をクリックします。
インフォテーブルで定義されたメニューアイテムはランタイムで表示されます。
ウィジェットプロパティを使用したメニューアイテムの設定
デフォルトでは、インフォテーブルデータを使用してメニューアイテムを定義するようにウィジェットが設定されます。サービスの SelectedDataChanged イベントと SelectedData プロパティを使用して、選択されたアイテムを別のサービスに渡すことができます。代わりにウィジェットプロパティを使用してメニューアイテムを設定するには、ItemConfigurationMode プロパティを使用します。このプロパティを「ウィジェットプロパティ」に設定すると、Clicked イベントと、各メニューアイテムの表示と無効状態を設定できるようになるプロパティが「プロパティ」パネルに追加されます。これらのプロパティをバインドすることで、マッシュアップ内の特定のイベントに基づいて個々のメニューアイテムの状態を動的に制御できます。これにより、メニューの対話操作をカスタマイズできるため、各メニューアイテムの表示と機能の管理が簡単になります。
1. Mashup Builder で、インフォテーブルデータソースをデータにバインドして、メニュー ID とラベルを定義します。
2. メニューボタンウィジェットを選択して、「プロパティ」パネルで ItemConfigurationMode を「ウィジェットプロパティ」に設定します。
3. 各メニューアイテムで、以下のプロパティを設定またはバインドします。
◦ <Item_Name>_Clicked - メニューアイテムがクリックされたときにトリガーされるイベント。
◦ <Item_Name>_Disabled - メニューアイテムを無効にします。
◦ <Item_Name>_Visible - メニューアイテムを非表示にします。
4. 「保存」をクリックします。
メニューボタンのスタイル設定
次の方法でメニューボタンウィジェットのスタイルを設定できます。
• 「スタイルプロパティ」パネルで使用可能なスタイルプロパティを使用して、ウィジェットレベルで設定します。
ボタンとメニューのスタイルは、どのような状態 (「無効」や「マウスポインタを合わせる」など) でも修正できます。
• > の下のスタイルテーマレベルで設定します。
スタイルテーマのカスタマイズの詳細については、「スタイル」タブを使用したスタイルテーマのカスタマイズを参照してください。
ウィジェットのプロパティ
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か (<-、->) | ローカライズ可能か (Y/N) |
|---|---|---|---|---|---|
Data | インフォテーブルをバインドしてメニューアイテムを定義します。MenuEntry データシェイプを使用してインフォテーブルをフォーマットする必要があります。 | INFOTABLE | Y | N | |
SelectedData | 最後に選択したメニューアイテムのデータを含むインフォテーブル。 | INFOTABLE | Y | N | |
SelectedDataChanged | メニューアイテムが選択されたときにトリガーされるイベント。 | イベント | Y | N | |
MenuOffset | メニューが開いているときのボタンとメニューの間のスペース。 | NUMBER | 8 | N | N |
ButtonType | メニューボタンのボタンタイプを設定します。タイプごとにスタイルが異なります。オプション: 「プライマリ」、「セカンダリ」、「ターシャリ」、「危険」、「透明」 | STRING | ターシャリ | Y | N |
TooltipField | メニューボタンウィジェットにマウスポインタを合わせたときに、ツールヒントのテキストを表示します。 | STRING | Y | Y | |
TooltipIcon | メニューボタンウィジェットのツールヒントのアイコンイメージを設定します。 | MEDIA | N | N | |
Disabled | メニューボタンを無効にします。 | BOOLEAN | False | Y | N |
SVGIcon | メニューボタンウィジェット内で表示するには、SVG アイコンを選択します。メディアエンティティを表示するには、アイコンのプロパティを使用します。 | MEDIALINK | N | N | |
ButtonIcon | メニューボタンウィジェット内に表示するアイコンイメージを選択します。このプロパティは SVGIcon プロパティをオーバーライドします。 | MEDIA | N | N | |
ButtonIconPosition | アイコンの位置をボタンラベルの左側または右側に設定します。オプション: 「左」、「右」 | STRING | 右 | N | N |
ButtonClicked | ボタンがクリックされ、ウィジェットにメニューアイテムが定義されていない場合にトリガーされるイベント。 | イベント | Y | N | |
ButtonMaxWidth | ボタンの最大幅を設定します。 | NUMBER | N | N | |
ButtonLabelAlignment | ボタンのラベルを左、右、または中央に整列します。オプション: 「左」、「右」、「中央」 | STRING | 中央 | N | N |
ButtonLabel | ボタンラベルのテキストを指定します。 | STRING | Y | Y | |
ButtonSize | ボタンのサイズを設定します。オプション: 「標準」、「中」、「大」、「特大」、「幅に合わせて調整」 | STRING | 標準 | N | N |
DisplayMenuIcons | 偽に設定した場合、メニューアイテムのアイコンが非表示になります。 | BOOLEAN | False | N | N |
AllowMissingIcons | この設定が偽で DisplayMenuIcons が真の場合、インフォテーブルデータ内の指定されたアイコンがないメニューアイテムの横にデフォルトのアイコンが表示されます。 | BOOLEAN | False | N | N |
MenuMinWidth | メニューおよびサブメニューを縮小できる最小幅をピクセル単位で設定します。空の場合、メニューの幅は最も幅の広いアイテムに合わせて設定されます。 | 数値 | N | N | |
MenuMaxWidth | メニューとサブメニューを拡張できる最大幅をピクセル単位で設定します。空の場合、メニューの幅は最も幅の広いアイテムに合わせて設定されます。 | 数値 | N | N | |
MenuMaxItems | メニューとそのサブメニューで表示可能なアイテムの最大数を設定します。データに最大数よりも多くのアイテムが含まれている場合、アイテムは「その他」ラベルの付いたサブメニューの下で非表示になります。 | 数値 | 5 | Y | N |
MenuDirection | メニューが開く方向をボタンに対して相対的に設定します。オプション: 「垂直」、「水平」 | STRING | 垂直 | Y | N |
ItemConfigurationMode | 「インフォテーブルデータ」モード - インフォテーブルデータを使用して、各メニューアイテムの表示と状態を設定します。サービスの SelectedDataChanged イベントと SelectedData プロパティを使用して、選択されたアイテムを別のサービスに渡すことができます。 「ウィジェットプロパティ」モード - ウィジェットプロパティを使用して各メニューアイテムの表示と状態を手動で設定するか、バインドを使用して動的に設定します。メニューアイテムの Clicked イベントをバインドして、SelectedData プロパティを別のサービスに渡す必要があります。オプション: 「インフォテーブルデータ」、「ウィジェットプロパティ」 | STRING | インフォテーブルデータ | Y | N |
<Item_Name>_Clicked | メニューアイテムがクリックされたときにトリガーされるイベント。 | イベント | Y | N | |
<Item_Name>_Disabled | メニューアイテムを無効にします。 | BOOLEAN | True | Y | N |
<Item_Name>_Visible | メニューアイテムの表示を制御します。 | BOOLEAN | True | Y | N |