メニューバーのレイアウトの作成
開始する前に、アプリケーションのレイアウトを設計します。ソリューションに含める必要があるマッシュアップビジュアリゼーションまたは Web ページを作成します。
メニューバーは、動的にまたは切り替えボタンを使用して拡大/縮小するように設定可能なレスポンシブウィジェットです。ウィジェットをレイアウトに正しく表示するには、レイアウト内のコンテナを適切に設定する必要があります。次の 2 つの方法のいずれかによって、メニューバーウィジェットを持つマッシュアップレイアウトを作成できます。
• 手動でレイアウトにコンテナを追加して設定する。
• 定義済みのマッシュアップテンプレートを使用する。
デフォルトでは、用意されているテンプレートによってマッシュアップが 2 つのコンテナに分割されて、メニューバーを格納するサイドバーが作成されます。テンプレートをカスタマイズして、2 つのコンテナの上に横長の 3 つ目のコンテナを追加することで、独自のレイアウトを作成することもできます。以下の図では、左側にデフォルトのレイアウト、右側にカスタムレイアウトの例が示されています。
レイアウトを構築した後、次の 2 つの方法のいずれかを使用して、コンテナにコンテンツを表示できます。
• マッシュアップにメニューバーを追加し、組み込みマッシュアップに各ページを埋め込む。これにより、よりスケーラブルなソリューションを構築し、ソリューションの各部分を複数のマッシュアップに分割できます。親マッシュアップのデータを組み込みマッシュアップのマッシュアップパラメータにバインドできます。詳細については、組み込みマッシュアップ内のコンテンツの表示を参照してください。
• メニューバーウィジェットを含む、マッシュアップページ全体を置き換える。このためには、アプリケーションの各マッシュアップにメニューバーウィジェットを追加する必要があります。
どちらの方法でも、MashupControl プロパティを使用してメニューバーウィジェットを設定できます。詳細については、メニューバーウィジェットの設定を参照してください。
マッシュアップのレイアウトの手動設定
1. Composer で、「新規」をクリックし、「マッシュアップ」または「マスター」を選択します。「新規マッシュアップ」ウィンドウが開きます。
2. 「レスポンシブ」を選択し、「OK」をクリックします。
3. マッシュアップの名前を入力し、「保存」をクリックします。
4. 「設計」タブをクリックして Mashup Builder インタフェースを開きます。1 つのコンテナがある空のマッシュアップがキャンバスに表示されます。
5. 「レイアウト」パネルの「コンテナを追加」で、「左に追加」をクリックします。メインコンテナが 2 つのコンテナに分割され、レイアウトが縦方向に分割されます。
6. 「エクスプローラ」パネルを使用してメインコンテナを選択し、「レイアウト」パネルを使用して設定します。
◦ 「コンテナスクロール」で、「現在のコンテナをスクロール」を選択します。
7. キャンバス上の左側のコンテナを選択し、「レイアウト」パネルを使用して設定します。
◦ 「整列および均等配置」で、「伸縮」を選択します。
◦ 「アドバンス」で、「拡大比」および「縮小比」プロパティを 0 に設定します。
必要に応じて、「コンテナのサイズ」で、「サイズ範囲」を選択し、max-width を、このウィジェットを表示する最大幅に設定します。デフォルトでは、メニューバーは最大幅の 296 ピクセルに設定されています。
8. 「ウィジェット」パネルから左側のコンテナにメニューバーウィジェットをドラッグします。
9. マッシュアップを保存します。
定義済みのマッシュアップテンプレートの使用
1. Composer で、「新規」をクリックし、「マッシュアップ」または「マスター」を選択します。「新規マッシュアップ」ウィンドウが開きます。
2. 「Left Panel with Menu」レスポンシブテンプレートを選択し、「OK」をクリックします。新規マッシュアップエンティティが作成されます。
3. 新規エンティティの名前を入力してプロジェクトを選択し、「保存」をクリックします。
以上で、「設計」タブでウィジェットを追加してマッシュアップを構築できるようになりました。このテンプレートにはメニューバーウィジェットを持つマッシュアップが含まれており、レイアウト内のコンテナに追加のコンフィギュレーションを実行することなく使用できます。
マッシュアップにメニューバーを追加した後で、メニューバーウィジェットを設定してから、データをバインドして、表示するアイテムを定義できます。詳細については、インフォテーブルを使用したメニューバーアイテムの定義およびメニューエンティティを使用したメニューバーアイテムの定義を参照してください。