JSFファセットについて

一部の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>    

ファセットの使用