メニュー・モデルでのPanelPageおよびメニュー・コンポーネントの使用

各メニュー・コンポーネントをPanelPageコンポーネントのファセットに手動で挿入するかわりに、メニュー・コンポーネントをメニュー・モデルにバインドできます。メニュー・モデルの詳細は、「メニュー・モデルについて」を参照してください。

たとえば、次のメニューのmenu3ファセット(左側のナビゲーション・リスト)のコードを考えてみます。

左側のリストに「Health」と「Dental」があるWebページ

この内容を手動で入力すると、次のようになります。

<f:facet name="menu3">
 <af:menuList>
   <af:commandMenuItem text="Health" action="go.health"/>
   <af:commandMenuItem text="Dental" action="go.dental"/>
 </af:menuList>
</f:facet>    

このかわりに、次のコード・サンプルに示すように、nodeを変数として使用し、メニュー・モデルを更新するマネージドBeanにmenuListコンポーネントをバインドすると、1つのcommandMenuItemコンポーネント・タグのみでその階層レベルの全メニュー項目を表示できます。この場合、#{node.label}は値として、#{node.getOutcome}はアクション・メソッドとして使用します。

<f:facet name="menu3">
  <af:menuList startDepth="2" var="node" value="#{menuModel.model}">
    <f:facet name="nodeStamp">
      <af:commandMenuItem text="#{node.label}"
                          action="#{node.getOutcome}"/>
    </f:facet>
  </af:menuList>
</f:facet>    

メニュー・モデルを使用してコンポーネントをバインドするメニュー階層を作成する手順は、次のとおりです。

  1. 各ノードに対して複数のナビゲーション・ケースがあるグローバル・ナビゲーション・ルールを1つ作成します。次に例を示します。
    <navigation-rule>
      ...
      <navigation-case>
        <from-outcome>go.insurance</from-outcome>
        <to-view-id>pages/insurance.jsp</to-view-id>
      </navigation-case>
      ...
    </navigation-rule>        
  2. メニュー・モデルの作成手順に従います。
  3. 前述のコードを参照して、メニュー階層のノードごとにJSFページを作成します。
  4. グローバル・コンポーネントの場合は、rendered属性を変数のtypeプロパティにバインドしてglobalに設定します。次に例を示します。
    rendered="{node.type=='global'}"        
  5. グローバル以外のコンポーネントの場合は、rendered属性を変数のtypeプロパティにバインドしてdefaultに設定します。次に例を示します。
    rendered="{node.type=='default'}"        
  6. メニュー・コンポーネントに対してstartDepth属性を設定し、表示対象の階層のレベルを決定します。次に例を示します。
    <af:menuBar startDepth="1" var = "node" value = "#{menuModel.model}"> :

メニュー・モデルでは、階層(つまり、各メニュー・コンポーネントに表示されるリンク)が動的に決定され、フォーカス・パスにある現在のノードが"selected"として設定されるため、実際には、各ページのメニューに同じコードを使用できます。必要なのは、PanelPageタグのtitleプロパティの変更のみです。


メニュー階層について
メニュー・モデルについて
Facesメニューのファセットおよびコンポーネントについて
ADF Facesコンポーネントの使用