ナビゲーション・ペイン・コンポーネントの追加およびバインド

詳細アイコン 詳細

  1. まだ開いていない場合は、アプリケーション・ナビゲータのフェース・ページ・アイコン myTemplate.jspxをダブルクリックして、ビジュアル・エディタでこのファイルを開きます。必要に応じて、「設計」エディタ・タブをクリックします。
  2. コンポーネント・パレットのADF Facesページの「Layout」パネルで、ナビゲーション・アイコン ナビゲーション・ペイン」をビジュアル・エディタのパネル・ヘッダーの「menuBar」ファセットにドラッグ・アンド・ドロップします。(ページには「Facet menuBar」という名前のターゲットの四角形が表示されます。これは、ドラッグされたコンポーネントがそのターゲット内に挿入されることを意味します。)
  3. プロパティ・インスペクタの「共通」セクションで、「ヒント」ドロップダウン・リストから「buttons」を選択します。「レベル」フィールドに0を入力します。
    詳細アイコン 詳細
  4. 「データ」セクションを開きます。「Var」フィールドにmenuInfoと入力します。「値」フィールドの横の プロパティ・メニュー・アイコン ドロップダウン・メニューから「式ビルダー」を選択します。フォルダ・アイコン ADFマネージドBean」を開き、Beanアイコン root_menu」を選択します。次に「OK」をクリックします。
    詳細アイコン 詳細
  5. 「構造」ウィンドウで、ナビゲーション・アイコン af:navigationPane」を開いて「nodeStamp」ファセットを表示します。
  6. コンポーネント・パレットの「共通コンポーネント」パネルで、ナビゲーション・アイコン ナビゲーション・アイテム」「nodeStamp」ファセットにドラッグ・アンド・ドロップします。
  7. プロパティ・インスペクタの「共通」セクションで、「テキスト」フィールドのデフォルト値を削除して#{menuInfo.label}と入力します。「アイコン」フィールドに#{menuInfo.icon}と入力します。「宛先」フィールドに#{menuInfo.destination}と入力します。「アクション」フィールドに#{menuInfo.doAction}と入力して[Enter]を押します。
  8. コンポーネント・パレットの「Layout」パネルで、装飾ボックスをビジュアル・エディタの(パネル・ストレッチ・レイアウトの)「center」ファセットにドラッグ・アンド・ドロップします。
  9. 今追加した装飾ボックスの「top」ファセットにナビゲーション・バー・アイコン ナビゲーション・ペイン」をドラッグ・アンド・ドロップします。
  10. プロパティ・インスペクタの「共通」セクションで、「ヒント」ドロップダウン・リストから「tabs」を選択します。「レベル」フィールドに1を入力します。「データ」セクションで、「値」フィールドに#{root_menu}と入力します。「Var」フィールドにmenuInfoと入力し、[Enter]を押します。
  11. ステップ5から7を繰り返し、「ナビゲーション・アイテム」コンポーネントをナビゲーション・ペイン「nodeStamp」ファセットに挿入し、コンポーネントをメニュー・モデルにバインドします。
    詳細アイコン 詳細
  12. コンポーネント・パレットの「Layout」パネルで、「装飾ボックス」をビジュアル・エディタのページの(最初の装飾ボックスの)「center」ファセットにドラッグ・アンド・ドロップします。
  13. 今追加した装飾ボックスの「top」ファセットにナビゲーション・バー・アイコン ナビゲーション・ペイン」をドラッグ・アンド・ドロップします。
  14. プロパティ・インスペクタの「共通」セクションで、「ヒント」ドロップダウン・リストから「tabs」を選択します。「レベル」フィールドに2を入力します。「データ」セクションで、「値」フィールドに#{root_menu}と入力します。「Var」フィールドにmenuInfoと入力し、[Enter]を押します。
  15. ステップ5から7を繰り返し、「ナビゲーション・アイテム」コンポーネントをナビゲーション・ペイン「nodeStamp」ファセットに挿入し、コンポーネントをメニュー・モデルにバインドします。
  16. すべて保存」アイコン すべて保存」をクリックして作業内容を保存します。
    詳細アイコン IDE表示の詳細説明

キュー・カード・アイコン 次のステップ