ページの最上部領域と最下部領域の作成
詳細
- コンポーネント・パレットのADF Facesページの「Layout」パネルで、「
パネル・ストレッチ・レイアウト」をルート・パネル・ストレッチ・レイアウト(psl1
)の「top」ファセットにドラッグ・アンド・ドロップします。
- プロパティ・インスペクタの「共通」セクションで、直前に追加したパネル・ストレッチ・レイアウトのファセットの幅と高さを、次の値を使用して変更します。
StartWidth: 200px
EndWidth: 200px
TopHeight: 5px
BottomHeight: 5px
(最後の値を変更した後、プロパティ・インスペクタで[Enter]を押します。)
- 上部領域のコンテンツを作成するために、コンポーネント・パレットの「Layout」パネルで、「
パネル・グループ・レイアウト」を直前に変更したパネル・ストレッチ・レイアウトの「start」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「Layout」の値を「scroll」に変更します。コンポーネント・パレットで、別の「
パネル・グループ・レイアウト」をドラッグし、直前に追加したパネル・グループ・レイアウト・コンポーネントにドロップします。プロパティ・インスペクタで、「Layout」の値を「horizontal」に変更します。
詳細
- コンポーネント・パレットの「共通コンポーネント」パネルで、「
イメージ」を直前に追加したパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。「イメージの挿入」ダイアログで、「ソース」フィールドの横にある
ドロップダウン・メニューをクリックし、「編集」を選択します。ダイアログを使用してイメージ・ファイルを検索し、選択します。「はい」をクリックしてアイコン・イメージをドキュメント・ルートの下に追加し、「保存」をクリックします。「OK」をクリックして「イメージの挿入」ダイアログを閉じます。
詳細
- ビジュアル・エディタ下部のブレッドクラム・リンクで、「af:image」の直前にあるコンポーネント名「af:panelgrouplayout」をクリックします。ビジュアル・エディタで、選択されているパネル・グループ・レイアウトの右上隅にある
にカーソルを移動します(ページに「パネル・グループ・レイアウト・アクション」が表示されます)。
をクリックし、ドロップダウン・メニューから「内部に挿入」
「
スペーサ」の順に選択します。
詳細
- ビジュアル・エディタのブレッドクラムで、「af:spacer」の前にある「af:panelgrouplayout」をクリックします。ページの
をクリックし、「内部に挿入」
「
出力フォーマット済」の順に選択します。プロパティ・インスペクタの「共通」セクションで、「値」プロパティをLayout Example
に変更します。「Style」セクションを開きます。「InlineStyle」フィールドにfont-size:small; color:Red; font-weight:bold;
と入力して[Enter]を押します。
- コンポーネント・パレットの「Layout」パネルで、「
パネル・グループ・レイアウト」を、このカードのステップ1で追加したネストされたパネル・ストレッチ・レイアウト(psl2
)の「end」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「Halign」の値を「end」に、「Layout」の値を「scroll」に変更します。
- コンポーネント・パレットの「Layout」パネルで、「
ナビゲーション・ペイン」を、直前に変更したパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「ヒント」の値を「buttons」に変更します。「Style」セクションで、「InlineStyle」フィールドにpadding-top:5px
と入力して[Enter]を押します。
詳細
- 「構造」ウィンドウで、「
af:navigationPane」を右クリックし、ポップアップ・メニューから「af:navigationPaneの中に挿入」
「
ナビゲーション・アイテム」の順に選択します。プロパティ・インスペクタの「共通」セクションで、「Text」プロパティをHome
に変更し、[Enter]を押します。
- ビジュアル・エディタで、ナビゲーション・アイテム・コンポーネントが選択されている状態で、
をクリックして「
兄弟として挿入 -> ナビゲーション・アイテム」を選択します。プロパティ・インスペクタで、「Text」の値をPreferences
に変更して[Enter]を押します。手順を繰り返し、ナビゲーション・アイテム・コンポーネントをもう1つ追加します。「Text」の値をHelp
に変更して[Enter]を押します。
- 作業内容を保存するには、「
すべて保存」をクリックします。
- 下部領域のコンテンツを作成するために、コンポーネント・パレットの「Layout」パネルで、「
パネル・グループ・レイアウト」をルート・パネル・ストレッチ・レイアウト・コンポーネント(psl1
)の「bottom」ファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「Halign」の値を「end」に、「Layout」の値を「scroll」に変更します。コンポーネント・パレットで、別の「
パネル・グループ・レイアウト」をドラッグして、直前に追加したパネル・グループ・レイアウト・コンポーネントにドロップします。プロパティ・インスペクタで、「Layout」の値を「horizontal」に変更します。「スタイルおよびテーマ」セクションを開きます。「InlineStyle」フィールドにpadding-top:5px
と入力し、[Enter]を押します。
- ビジュアル・エディタで、パネル・グループ・レイアウト・コンポーネントが選択されている状態で、
をクリックしてドロップダウン・メニューから「このコンテナの設計」を選択します。
詳細
- コンポーネント・パレットの「共通コンポーネント」パネルで、「
出力フォーマット済」をパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「値」をCopyright © 2009
に変更して[Enter]を押します。「Style」セクションで、「InlineStyle」フィールドにmargin:0 6px 0 6px; display:block
と入力して[Enter]を押します。
詳細
- ビジュアル・エディタのブレッドクラムで、「af:outputformatted」の前にある名前「af:panelgrouplayout」をクリックします。次に、選択したコンポーネントの
をクリックし、「内部に挿入」
「
実行リンク」の順に選択します。プロパティ・インスペクタの「共通」セクションで、「Text」をAbout XYZ
に変更して[Enter]を押します。
- 選択されている実行リンク・コンポーネントの
をクリックし、「メイン・ページの設計」を選択します。
- アプリケーション・ナビゲータで、「
LayoutPage.jspx」を右クリックしてポップアップ・メニューから「実行」を選択します。
詳細
IDE表示の詳細説明
次のステップ
Copyright © 1997, 2009, Oracle. All rights reserved.