panelPageHeaderおよびpanelHeaderコンポーネントについて

このトピックでは、ページをレイアウトする際にpanelPageHeaderおよびpanelHeaderコンポーネントで可能な処理について説明します。この2つのコンポーネントは名前が似ているため、双方の違いを示すためにも両方のコンポーネントについて説明します。

panelPageHeader

panelPageHeaderコンポーネントは、pageおよびpanelPageによってサポートされるレイアウトと同様に、ページの上部のみをレイアウトするために使用されます(次の図を参照)。ただし、panelPageHeaderコンポーネントは、次の点でpageおよびpanelPageとは異なります。

テキストの説明を参照

次の表に、ページ上部(前述の図を参照)を作成する際に使用可能なpanelPageHeaderファセットと通常使用される子コンポーネントを示します。

番号
ファセット 説明および通常使用される子コンポーネント
brandingファセットのアイコン
branding objectImageを使用して企業ロゴまたは組織商標を示すためのファセットです。子コンポーネントはページ左上部に配置されます。
brandingAPPファセットのアイコン
brandingApp objectImageを使用してアプリケーション・ロゴまたは製品商標を示すためのファセットです。子コンポーネントは商標イメージの後(使用されている場合)に配置されます。chromeTypeがexpandedの場合は、brandingイメージの下にbrandingAppイメージが配置されます。「panelPageおよびpageコンポーネントについて」の図を参照してください。
brandingAppContextualアイコン
brandingAppContextual 通常はoutputFormattedと併用し、アプリケーションの現在の商標コンテキストを表示します。styleUsage属性をinContextBrandingに設定してください。
menuSwitchアイコン
menuSwitch

アクティブなページから別のアプリケーションに切替え可能なmenuChoiceコンポーネント用のファセットです。子コンポーネントはページ右上部に配置されます。

子コンポーネントはメニュー・モデルにバインドできます。

menuGlobalアイコン
menuGlobal

一連のメニュー項目をグローバル・ボタンとしてレイアウトするmenuButtonsコンポーネント用のファセットです。子コンポーネントは、ページ右上部のmenuSwitch子コンポーネントの前(使用されている場合)に配置されます。グローバル・ボタンのテキスト・リンク・バージョンがページ下部で自動的に繰り返されます。

子コンポーネントはメニュー・モデルにバインドできます。

menu1アイコン
menu1

一連のメニュー項目をタブとしてレイアウトするmenuTabsコンポーネント用のファセットです。子コンポーネントはページ上部の商標イメージ、メニュー・ボタンまたはメニュー・スイッチの下に配置(右寄せ)されます。タブのテキスト・リンク・バージョンがページ下部で自動的に繰り返されます。テキスト・リンクは、グローバル・ボタンのテキスト・リンク・バージョンの前に配置されます。

子コンポーネントはメニュー・モデルにバインドできます。

menu2アイコン
menu2

一連のメニュー項目をメニュー・タブの下の水平バーにレイアウトするmenuBarコンポーネント用のファセットです。子コンポーネントはバーに左寄せで配置され、縦線で区切られます。

子コンポーネントはメニュー・モデルにバインドできます。

searchアイコン
search

inputTextコンポーネントを使用して検索機能領域を示すためのファセットです。子コンポーネントは、水平メニュー・バーの下の色付き領域に配置されます。

ページの他の部分をレイアウトするには、panelPageHeaderの後にコンポーネントを追加します。たとえば、メニュー・ナビゲーションの第3レベルを提供するpanelSideBarや、セクション・ヘッダーを付加するpanelHeaderを追加できます。

panelHeader

panelHeaderコンポーネントは、メッセージ情報を表示するページ上部に使用できます。「ADF Facesのメッセージ・ページについて」を参照してください。

panelHeaderコンポーネントは、ページ内のセクション・ヘッダーのレイアウトにも使用できます。たとえば、pageまたはpanelPageの内部、あるいはpanelPageHeaderの後で、1つ以上のpanelHeaderコンポーネントを使用できます。panelHeaderコンポーネントは、別のpanelHeader内にネストして、サブセクション・ヘッダーを作成できます。各panelHeaderセクションまたはサブセクションのヘッダーには、タイトル(text属性で設定)があり、次の図に示すようなオプションのアイコンを指定できます。

pageまたはpanelPagequickLinksShowntrueに設定されている場合は、ADF Facesによって、ページ・コンテンツ内(ページの最初のヘッダーは除く)の各panelHeaderに、単一のテキスト・リンクが挿入されます。サブセクションpanelHeaderのコンポーネントは挿入されません。ページ・タイトルの上に水平に配置されたpanelHeaderクイック・リンクを使用すると、panelHeaderセクションに簡単にアクセスできます。ページの先頭に簡単に移動するための最初に戻るリンクも、panelHeaderタイトル(最初のヘッダーを除く)と同じ行に右寄せで自動的に挿入されます。

テキストの説明を参照

デフォルトでは、クイック・リンク・テキストはpanelHeadertext属性と同じです。クイック・リンクの長さを短くするには、各panelHeadershortText属性を設定して、短くてもわかりやすいtext値を提供できます。

ヒント: コンテンツを開閉(展開/折りたたみ)できる対話型のセクション・ヘッダーをヘッダーの下に用意するには、showDetailHeaderコンポーネントを使用します。ページにshowDetailHeaderコンポーネントで作成されたセクション・ヘッダーがある場合は、そのセクション・ヘッダーもクイック・リンクに挿入されます。


メニュー・モデルの作成