ページ中央領域の3つのペインへの分割

詳細アイコン 詳細

  1. コンポーネント・パレットのADF Facesページの「Layout」パネルで、ペイン分割アイコン パネル・スプリッタ」をページ中央の装飾ボックスの「center」ファセットにドラッグ・アンド・ドロップして2つのペインを作成します。
  2. 別のペイン分割アイコン パネル・スプリッタ」をドラッグし、右ペインを2つに分割するために追加したパネル・スプリッタの「second」ファセットにドロップします。第2パネル・スプリッタのプロパティ・インスペクタの「共通」セクションで、「PositionedFromEnd」「true」に変更します。
    詳細アイコン 詳細
  3. 左ペイン・コンテンツを作成するために、コンポーネント・パレットの「Layout」パネルで、パネル・アイコン パネル・アコーディオン」をこのカードのステップ1で追加した第1パネル・スプリッタ(ps1)の「first」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「DiscloseMany」「true」に変更します。
  4. 「構造」ウィンドウで、パネル・アイコン af:panelAccordion」を開きます。子のアイテム・アイコン af:showDetailItem」をクリックします。プロパティ・インスペクタの「共通」セクションで、「Text」の値をPane 1に変更します。「外観」セクションで、フレックス1に変更します。次に、「StretchChildren」の値を「first」に変更します。
    詳細アイコン 詳細
  5. 「構造」ウィンドウで、パネル・アイコン af:panelAccordion」を右クリックし、「af:panelAccordionの中に挿入」 次の選択 アイテム・アイコン 詳細アイテム表示」の順に選択して、2つ目のペインを追加します。プロパティ・インスペクタの「共通」セクションで、「Text」の値をPane 2に変更します。「外観」セクションで、フレックス2に変更します。次に、「StretchChildren」「first」に変更します。
  6. 作業内容を保存するには、「すべて保存」アイコン すべて保存」をクリックします。
  7. 右ペインにコンテンツを追加するために、コンポーネント・パレットの「Layout」パネルで、フロー・レイアウト・アイコン パネル・グループ・レイアウト」をこのカードのステップ2で追加した第2パネル・スプリッタ(ps2)の「second」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「Layout」の値を「scroll」に変更します。
  8. コンポーネント・パレットで、箇条書きリスト・アイコン パネル・リスト」を直前に追加したパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。「構造」ウィンドウで、パネル・アイコン af:panelList」を右クリックし、「af:panelListの中に挿入」 次の選択 リンク・アイコン 実行リンク」の順に選択してリンクを追加します。手順を繰り返し、同じ方法でさらに2つのリンクを挿入します。
  9. 中央ペインを設定するために、コンポーネント・パレットの「Layout」パネルで、装飾ボックスをこのカードのステップ2で追加した第2パネル・スプリッタ(ps2)の「first」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「TopHeight」の値を30pxに変更して[Enter]を押します。
    詳細アイコン 詳細
  10. コンポーネント・パレットで、フロー・レイアウト・アイコン パネル・グループ・レイアウト」を、直前に追加した装飾ボックスの「top」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「Layout」「scroll」に変更します。
  11. コンポーネント・パレットの「共通コンポーネント」パネルで、メニュー・パス・アイコン ブレッドクラム」を、直前に追加したパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。ビジュアル・エディタで、選択したブレッドクラム・コンポーネント上の アクション・ポップアップ・メニュー・アイコン をクリックし、ナビゲーション・アイコン 内部に挿入」 -> 「ナビゲーション・アイテム」の順に選択します。プロパティ・インスペクタの「共通」セクションで、「Text」の値をCrumb 1に変更し、[Enter]を押します。
  12. 「構造」ウィンドウで、メニュー・パス・アイコン af:breadCrumbs」を右クリックし、「af:breadCrumbsの中に挿入」 次の選択 ナビゲーション・アイコン ナビゲーション・アイテム」の順に選択して2つ目のアイテムを追加します。プロパティ・インスペクタの「共通」セクションで、「Text」の値をCrumb 2に変更して[Enter]を押します。次に、この手順を繰り返し、「Text」の値にCrumb 3を使用して、同じ方法で3つ目のナビゲーション・アイテムを挿入します。
    詳細アイコン 詳細
  13. アプリケーション・ナビゲータで、jsfページ・アイコン LayoutPage.jspx」を右クリックし、ポップアップ・メニューから「実行」を選択します。
    詳細アイコン IDE表示の詳細説明

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