panelPageおよびpageコンポーネントについて

ADF FacesのpageおよびpanelPageコンポーネントでは、ページ全体を、関連するページに移動するための階層メニューを使用してレイアウトできます。この2つのコンポーネントの主な違いは、ファセットと、階層メニューをレイアウトする際のコンポーネントの使用方法にあります。

panelPageコンポーネントには、階層メニュー・コンポーネントのレイアウトに使用できるmenu1menu2およびmenu3の各ファセットがあります。次のいずれかを実行できます。

pageコンポーネントはMenuModelオブジェクトを使用し、nodeStampファセットを介して階層メニュー項目情報をスタンプ・アウトします。個々のメニュー・コンポーネントをメニュー・モデルにバインドしたり、複数のメニュー項目を挿入する必要はありません。基本的に、ページの階層では同じメニュー・モデル・バインド・コードを使用できます。詳細は、「メニュー・モデルでのページ・コンポーネントの使用」を参照してください。

また、panelPageコンポーネントには、グローバル・メニュー・ボタンを追加するためのmenuGlobalファセットがあります。このボタンは、アプリケーションのアクティブ・ページからいつでも使用できるボタンです(ヘルプ・ボタンなど)。メニュー・コンポーネントに子メニュー項目があるpanelPageを使用する場合、JSFページのコードは次のようになります。

<af:panelPage title="Title">
  <f:facet name="menuGlobal">
    <af:menuButtons>
      <af:commandMenuItem text="Help"
                          icon="/components/images/globalhelp1.gif"
                          action="go.help"/>
      <af:commandMenuItem text="Preferences"
                          icon="/components/images/globalhelp2.gif"
                          action="go.prefs"/>
    </af:menuButtons>
  </f:facet>
  ...
</af:panelPage>    

pageコンポーネントでは、menuGlobalファセットのかわりに、メニュー・モデルのみでグローバル・メニュー・ボタンをサポートしています。グローバル・ボタンとしてレンダリングされる項目は、メニュー・タブ項目と同じレベルの項目としてメニュー・モデルに追加され、JSFページでは、関連するメニュー項目コンポーネントのtype属性がglobalを戻します。次の図のようなメニュー階層があると仮定します。ここでは、a1とa2は様々な子サブノードを備えた最上位レベル・ノードであり、a3とa4は子サブノードのないスタンドアロン・ノードです。

a1、a2、a3、a4のノードは同レベルで、a1とa2にはサブノードがあるメニュー階層

ページ・レイアウト表現では、a1およびa2ノードはメニュー・タブ項目を表し、a3およびa4ノードはグローバル・ボタンを表します。faces-config.xmlファイルでは、メニュー・グローバル項目a3およびa4に対するマネージドBean宣言は、次の事項を除いて、メニュー・タブ項目a1またはa2に対するマネージドBean宣言と同じです。

たとえば、faces-config.xmlでは次のようになります。

<!-- menu tab item a1 -->

<managed-bean>
  <managed-bean-name>menuItem_a1</managed-bean-name>
  <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
  <managed-bean-scope>none</managed-bean-scope>
  <managed-property>
    <property-name>children</property-name>
    <list-entries>
      <value-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</value-class>
      <value>#{menuItem_a1b1}</value>
      <value>#{menuItem_a1b2}</value>
    </list-entries>
  </managed-property>
  <managed-property>
    <property-name>label</property-name>
    <value>a1</value>
  </managed-property>
  <managed-property>
    <property-name>viewId</property-name>
    <value>/components/page_a1.jspx</value>
  </managed-property>
  <managed-property>
    <property-name>outcome</property-name>
    <value>guide.page_a1</value>
  </managed-property>
</managed-bean>  

<!-- menu global item a3 -->

<managed-bean>
  <managed-bean-name>menuItem_a3</managed-bean-name>
  <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
  <managed-bean-scope>none</managed-bean-scope>
  <managed-property>
    <property-name>label</property-name>
    <value>a3</value>
  </managed-property>
  <managed-property>
    <property-name>viewId</property-name>
    <value>/components/page_a3.jspx</value>
  </managed-property>
  <managed-property>
    <property-name>outcome</property-name>
    <value>guide.page_a3</value>
  </managed-property>
  <managed-property>
    <property-name>ico</property-name>
    <value>/images/globalhelp.gif</value>
  </managed-property>
  <managed-property>
    <property-name>type</property-name>
    <value>global</value>
  </managed-property>
</managed-bean>     

メニュー・モデルにバインドされるpageコンポーネントを使用するJSFページでは、次のようになります。

<af:page var="foo"
         value="#{menuModel.model}"
         title="Title attribute"
         quickLinksShown="true">
  <f:facet name="nodeStamp">
    <af:commandMenuItem text="#{foo.label}"
                        action="#{foo.getOutcome}"
                        type="#{foo.type}"
                        icon="#{foo.ico}"/>
  </f:facet>
  ...
</af:page>    

pageまたはpanelPageコンポーネントの詳細な例は、「ADF Facesのデモ・ファイルについて」を参照してください。

pageおよびpanelPageコンポーネントは、階層メニューのレイアウトに加え、ページ・レベルとアプリケーション・レベルのテキスト、イメージ、アクションおよびボタンをページ内の特定の領域にレイアウトするためのファセットをサポートします。詳細は、「ADF Facesでのページ・レイアウト・コンテンツ領域について」を参照してください。

レイアウトに影響を与えるpageおよびpanelPageコンポーネントの属性は、次のとおりです。

テキストの説明を参照


ADF Facesでの部分ページ・レンダリングのサポートについて
メニュー階層の作成