JSFファセットについて

ADF UIXの使用経験があるユーザーは、名前付き子コンポーネントをすでに理解していると想定されます。ファセットは、名前付き子コンポーネントに類似しています。ファセットは親コンポーネントの内部で使用し、いくつかの子コンポーネントをページに表示する方法を制御します。

ADF UIXと同様に、一部のJSFコンポーネントでは、ファセット(f:facet)という特別な要素を使用して、事前に定義した特定の位置に子コンポーネントをレンダリングできます。ファセットは、特定の子コンポーネントの事前定義の位置を管理する、ロール定義の名前付き要素です。

1つのファセットは1つの子コンポーネント用の空のプレースホルダと考えてください。各ファセットには名前があり、その名前によって、ファセットの目的と、親コンポーネントとページに相対する子コンポーネントのレンダリング位置が定義されます。通常、ファセットは、ページのコンポーネント・ツリーの親子関係から独立しているコンポーネント、または親子関係に対して直交のコンポーネントを表すために使用されます。

たとえば、h:panelGridタグにheaderfooterの2つのファセット要素があるとします。これらのファセット要素をpanelGridコンポーネント内で使用して、特定の子コンポーネントの配置方法を制御します。JSPコード内でのheaderfooterファセット要素の配置場所とは関係なしに、レンダラでは、常に、headerファセットの子コンポーネントが表の上部に、footerファセットの子コンポーネントが表の下部に配置されます。

ヘッダーとフッターのファセットがある2つの列と3つの行の表

たとえば、前述のイメージを生成するJSPコードは次のようになります。

<h:panelGrid columns="2">
  <h:outputText value="Row1Col1"/>
  <h:outputText value="Row1Col2"/>
  <f:facet name="header">
    <h:outputText value="A header child component renders here"/>
  </f:facet>
  <h:outputText value="Row2Col1"/>
  <h:outputText value="Row2Col2"/>
  <h:outputText value="Row3Col1"/>
  <f:facet name="footer">
    <h:outputText value="A footer child component renders here"/>
  </f:facet>
  <h:outputText value="Row3Col2"/>
</h:panelGrid>    

または

<h:panelGrid columns="2">
  <f:facet name="footer">    <h:outputText value="A footer child component renders here"/>  </f:facet>
  <h:outputText value="Row1Col1"/>
  <h:outputText value="Row1Col2"/>
  <h:outputText value="Row2Col1"/>
  <h:outputText value="Row2Col2"/>
  <f:facet name="header">    <h:outputText value="A header child component renders here"/>  </f:facet>
  <h:outputText value="Row3Col1"/>
  <h:outputText value="Row3Col2"/>
</h:panelGrid>    

ただし、生成されるHTMLコードは常に次のようになります。

<table>
  <thead>
    <tr>
      <th colspan="2" scope="colgroup">A header child component renders here</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">A footer child component renders here</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Row1Col1</td>
      <td>Row1Col2</td>
    </tr>
    <tr>
      <td>Row2Col1</td>
      <td>Row2Col2</td>
    </tr>
    <tr>
      <td>Row3Col1</td>
      <td>Row3Col2</td>
    </tr>
    <tr>
      <td>Row4Col1</td>
      <td>Row4Col2</td>
    </tr>
    <tr>
      <td>Row5Col1</td>
      <td>Row5Col2</td>
    </tr>
    <tr>
      <td>Row6Col1</td>
      <td>Row6Col2</td>
    </tr>
    <tr>
      <td>Row7Col1</td>
      <td>Row7Col2</td>
    </tr>
  </tbody>
</table>    

注意: 1つの親コンポーネントに複数のファセット要素を設定できますが、各ファセットに設定できるのは1つの子コンポーネントのみです。1つのファセットで複数の子コンポーネントを使用する必要がある場合は、子コンポーネントの周囲でh:panelGroupコンポーネントを使用します。次に例を示します。

<f:facet name="footer">
  <h:panelGroup>
    <h:outputText value="A footer child component renders here"/>
    <f:verbatim>
      <br/>
    </f:verbatim>
    <h:outputText value="A second footer child component renders here"/>
  </h:panelGroup>
</f:facet>    

ファセットを使用するADF Facesコンポーネントの例に、panelPageコンポーネントがあります。たとえば、次のコード・スニペットで示すように、名前付きファセットのcorporateBrandingcopyrightには、企業ロゴと著作権についての記述をページに配置する場所が事前に定義されています。

<af:panelPage title="Title 1"
  <f:facet name="branding">
    <af:objectImage source="images/someimg.jpg"/>
  </f:facet>
  <f:facet name="appCopyright">
    <af:panelGroup>
		   <af:goLink text="goLink 1"/>
	     <af:goLink text="goLink 2"/>
		   <f:facet name="separator">
		     <af:objectSeparator />
		   </f:facet>
		 </af:panelGroup>
  </f:facet>
</af:panelPage>     

ファセットの使用