メニューボタンウィジェット (テーマ指定)
メニューボタンウィジェットは、インフォテーブルデータを使用して定義できるアイテムのリストから成るメニューを開くボタンを表示します。メニューのコンフィギュレーションに応じて、各メニューアイテムの選択されたアイテムデータまたはクリックされたイベントをバインドできます。このウィジェットは、レイアウト内の使用可能なスペースが限られており、頻繁に使用しないオプションを非表示にする場合に使用します。複数レベルのナビゲーションを作成して、共通のラベルの下にメニューアイテムをグループ化できます。
標準メニューボタン
ラベル付きのメニューボタン
次のイメージは、メニューボタンの使用可能なバリエーションを左から右に示しています。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
|