ページの最上部領域と最下部領域の作成

詳細アイコン 詳細

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

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