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