Mashup Builder > ウィジェット > 標準ウィジェット > メニューバーウィジェット (テーマ指定可能)
メニューバーウィジェット (テーマ指定可能)
* 
このウィジェットはプレビューとして使用可能な Web コンポーネントです。現在のメニューウィジェットの機能のサブセットが含まれています。今後のリリースではさらなる機能とマイグレーションサポートが追加される予定です。
メニューバーウィジェットを使用して、複数のマッシュアップやページが含まれているソリューションのナビゲーションレイアウトを作成します。このウィジェットには、ユーザーが選択可能なアイテムのリストとしてナビゲーションリンクが表示されます。ウィジェットの各アイテムを設定してユーザーをマッシュアップ、Web ページ、またはサブメニューにナビゲートできます。このウィジェットはレイアウト内の最上位レベルのコンテナの左側に常時表示されます。このウィジェットを使用して、単一レベルまたは複数レベルのナビゲーションから成るメニューを作成できます。Composer でメニューエンティティを作成するか、データ駆動型メニューを生成するデータサービスを記述することによって、メニューアイテムを定義できます。これにより、ページによってビューが異なる複雑なマッシュアップを構築できます。
メニューアイテムを定義し、ウィジェットを使用して組み込みマッシュアップを置き換える方法については、次のビデオを参照してください。新しいタブでビデオを開くには、プレーヤーのタイトルをクリックします。
メニューバーには、Mashup Builder ウィジェットのほかに、次のコンポーネントが含まれています。
MenuEntry データシェイプ。これはデータサービスでメニューバーコンフィギュレーション用のインフォテーブルを定義するときに使用します。
事前に設定されたレイアウトコンテナとメニューバーウィジェットが含まれているマッシュアップおよびマスターレイアウトテンプレート。単純なレイアウトを速やかに作成するにはこのテンプレートを使用します。
メニュー設計の選択: アコーディオンとカスケードメニュー
プロパティ SubMenuType を使用してウィジェットを設定することで、メニューバーに複数レベルのナビゲーションを表示する方法を制御できます。サブメニューは次の 2 つの方法のいずれかで表示されます。
カスケードメニュー (デフォルト) - 右に開いて、各ナビゲーションレベルが別個のサブメニューとして表示されます。
ネストされたアコーディオンセクション - 各ナビゲーションレベルが右にインデントした状態で縦方向に開きます。
以下のイメージでは、左側にデフォルトのカスケードメニュー、右側にネストされたアコーディオンメニューが示されています。
この 2 つのメニューバーウィジェットではコンパクトビューが無効になっており、プライマリナビゲーションデータプロパティとセカンダリナビゲーションデータプロパティに同じメニューエンティティが選択されています。カスケードメニューは 3 つのセクションに分かれています。上部のセクションにプライマリナビゲーションアイテムが表示されています。下部の 2 つのセクションにセカンダリナビゲーションアイテムとフッターが表示されています。アコーディオンメニューでは、フッターの上に表示されているセカンダリナビゲーションアイテムは、プライマリアイテムとまとめて 1 つのセクションに配置されています。
* 
フッターセクションはメニューバータイプの影響を受けません。
メニューバーの構造
メニューバーウィジェットを設定するには複数の方法があります。以下の図には、デフォルトのコンフィギュレーションであるカスケードメニューとしてメニューが示されています。
1. 展開/折りたたみ切り替えボタン (オプション)
2. プライマリナビゲーションアイテム
3. メニューバーの幅の増減に使用するドラッグハンドル (オプション)。
4. セカンダリナビゲーションアイテム (オプション)
5. フッターセクション (オプション)
ウィジェットの最上位レベルのアイテムは縦方向にリストされます。このウィジェットには、現在のコンフィギュレーションに基づいてメニューアイテムを表示できる複数のセクションがあります。
キーボードナビゲーションとフォーカス
次のキーを使用した一般的なキーボードショートカットを使用して、メニューバーのアイテム間を移動できます。
キー
説明
Tab
Shift + Tab
展開/折りたたみボタン、セカンダリナビゲーションアイテムとプライマリナビゲーションアイテム、フッターなど、ウィジェット内の次のセクションにフォーカスボックスを移動します。前のセクションにフォーカスするには、Shift + Tab キーを押します。
Enter
スペース
サブメニューがある親アイテムを展開するか折りたたみます。
セクションを開いたり閉じたりします。
上/下矢印
現在のセクションの次のメニューアイテムまたは前のメニューアイテムにフォーカスします。
右/左矢印
現在のセクションの次のサブメニューレベルまたは前のサブメニューレベルにフォーカスします。
Home
現在のセクションの 1 つ目のアイテムにフォーカスします。
End
現在のセクションの最後のアイテムにフォーカスします。
ウィジェットのプロパティ
以下のテーブルに、メニューバーウィジェットのプロパティをリストします。
プロパティ
説明
ベースタイプ
デフォルト値
バインド
ローカライズ可能
AlwaysOpen
展開ビューモードとコンパクトビューモードの間でメニューを切り替える展開/折りたたみボタンを非表示にします。コンパクトビューモードを無効にするには、このプロパティを True に設定します。
BOOLEAN
False
None
N
DataSource
メニューバーアイテムの定義にインフォテーブルとメニューエンティティのどちらを使用するかを指定します。次のいずれかのオプションを選択できます。
「メニューエンティティ」 - 表示するメニューアイテムから成るメニューエンティティを選択します。メニューエンティティを選択するには、プロパティ PrimaryNavMenu および SecondaryNavMenu を使用します。
「インフォテーブル」 - メニューアイテム定義が含まれている、データサービスからのインフォテーブルをバインドします。MenuEntry データシェイプを使用してインフォテーブルをフォーマットする必要があります。メニューデータをバインドするには、プロパティ PrimaryNavData および SecondaryNavData を使用します。
STRING
インフォテーブル
入力
N
DisableResizing
ユーザーがランタイムでメニューバーの幅を変更するときに使用するドラッグハンドルを除去します。
BOOLEAN
False
None
N
Disabled
マッシュアップ上のウィジェットを無効にします。無効にしたウィジェットは表示されますが、操作できません。
BOOLEAN
False
入力
N
FooterIcon
フッターセクションに表示するアイコン。カスケードメニューとアコーディオンを含む、すべてのメニュータイプでフッターアイコンが表示されます。
IMAGE
該当なし
None
N
FooterLinkTargetWindow
フッターリンクを同じウィンドウで開くか新しいウィンドウで開くかを制御します。これを「同じウィンドウ」または「新しいウィンドウ」に設定できます。
STRING
同じウィンドウ
None
N
FooterText
フッターセクションに表示するテキストを指定します。
STRING
該当なし
入力
はい
FooterURL
フッターリンクがクリックされたときに移動する URL を設定します。
STRING
該当なし
入力
N
FooterLogo
ウィジェットが展開されている場合にフッターセクションに表示するロゴ。
IMAGE
該当なし
None
N
HideAlteranteIcons
メニューアイテムのカスタムアイコンがない場合に自動的に表示される代替アイコンを非表示にします。
BOOLEAN
False
None
N
HideFooter
メニューバーのフッターセクションを非表示にします。
BOOLEAN
False
入力
N
MashupControl
ランタイムでのメニューバーを使用したマッシュアップ間の移動方法を制御します。次のいずれかのオプションを選択できます。
「現在のマッシュアップを制御」 - マッシュアップ全体を置き換えます。
「マッシュアップパラメータにバインド」 - 組み込みマッシュアップのみが置き換えられます。組み込みマッシュアップウィジェットにバインドする必要がある Mashup という名前のウィジェットプロパティを追加します。
STRING
現在のマッシュアップを制御
None
N
Mashup
メニューバーで現在選択されているマッシュアップの名前が格納されるテキストプロパティ。このプロパティを使用して、組み込みマッシュアップウィジェットに表示するマッシュアップを指定します。
STRING
該当なし
出力
N
MaxWidth
メニューバーの最大幅。このプロパティはメニューバーが展開されたときに適用されます。
NUMBER
該当なし
入力
N
MinWidth
メニューバーの最小幅。
NUMBER
該当なし
入力
N
PrimaryNavData
インフォテーブルをバインドして、プライマリナビゲーションセクションのアイテムを定義します。MenuEntry データシェイプを使用してインフォテーブルをフォーマットする必要があります。
INFOTABLE
該当なし
入力
N
PrimaryNavIcons
プライマリナビゲーションアイテムのアイコンをメニューバーに表示します。アイコンは、選択したメニューエンティティまたはバインドされているインフォテーブルで定義されています。
IMAGE
False
None
N
PrimaryNavMaxItems
プライマリナビゲーションセクションに表示されるアイテムの最大数を設定します。メニューエンティティ内のその他のアイテムはオーバーフローメニューに表示されます。
NUMBER
5
入力
N
SecondaryNavIcons
セカンダリナビゲーションアイテムのアイコンをメニューバーに表示します。アイコンは、選択したメニューエンティティまたはバインドされているインフォテーブルで定義されています。
IMAGE
False
None
N
SecondaryNavData
セカンダリナビゲーションアイテムのアイテムが格納されているインフォテーブルをバインドします。このインフォテーブルは MenuEntry データシェイプを使用してフォーマットされていなければなりません。
INFOTABLE
該当なし
入力
N
ShowDataLoading
インフォテーブルをバインドして、セカンダリナビゲーションセクションのアイテムを定義します。MenuEntry データシェイプを使用してインフォテーブルをフォーマットする必要があります。
BOOLEAN
True
None
N
StayOpenOnSelection
メニューバーのアイテムが選択されている場合、アコーディオンセクションを開いたままにします。
BOOLEAN
False
None
N
SubMenuMaxWidth
カスケードサブメニューの最大幅。
NUMBER
該当なし
None
N
SubMenuMinWidth
カスケードサブメニューの最小幅。
NUMBER
該当なし
None
N
SubMenuType
ウィジェットに複数レベルのナビゲーションが含まれている場合に、メニューアイテムをどのように表示するかを制御します。
カスケードメニュー
ネストされたアコーディオン
STRING
カスケードメニュー
入力
N
TabSequence
Tab キーを押したときのウィジェットのシーケンス番号。
NUMBER
該当なし
None
N
Visible
メニューバーウィジェットの表示を制御します。
BOOLEAN
True
入力
N
これは役に立ちましたか?