cellFormat、rowLayoutおよびtableLayoutについて

このトピックでは、ADF FacesのHTMLコンポーネントtableLayoutrowLayoutおよびcellFormatについて説明します。これらのコンポーネントを使用すると、行とセルで構成された表レイアウトにコンテンツを配置して書式を設定できます(次の図を参照)。

2行、5個のセル、最初のセルが2行にまたがっている表

前述の表レイアウトを作成するコードは、このトピックの最後にあります。

tableLayout

tableLayoutコンポーネントは、HTMLの<table>要素を使用した表レイアウトにおける一連のrowLayoutコンポーネントのラッパーです。表レイアウトは、halign属性の"center"、"left"、"right"、"start"または"end"オプションを使用して水平方向に位置合せできます。水平方向の位置合せは、表レイアウトに通常使用されるwidth合計が100%未満の場合にのみ機能します。セル間の間隔、セル内のパディング、各セルの周囲の境界線幅も設定できます。

詳細は、「afh:tableLayout」タグ・リファレンスを参照してください。

rowLayout

rowLayoutコンポーネントは単独で使用して行にコンテンツを配置したり、tableLayout(HTMLの<tr>および<td>要素)の行を定義するために使用できます。rowLayoutには任意の数の子コンポーネントを挿入できます。それぞれの子はセルに配置されます。セルは行内に連続的に配置されます。

halignおよびvalign属性を使用すると、行内の各セルについて水平および垂直方向の位置合せをそれぞれ設定できます。水平方向の位置合せオプションはcenter、left、right、startおよびend、垂直方向の位置合せオプションはmiddle、topおよびbottomです。tableLayoutrowLayoutが使用されていない場合、rowLayoutwidth属性は、通常使用される行の幅を定義します。

セルのコンテンツに追加の書式を設定するには、各子コンポーネントの周囲にcellFormatコンポーネントを使用します。

詳細は、「afh:rowLayout」タグ・リファレンスを参照してください。

cellFormat

cellFormatコンポーネントは、rowLayoutのセルに追加の書式を指定するために使用します。たとえば、垂直または水平方向にまたがるセルの数や、格納されているセル・コンテンツに優先して使用する幅と高さを指定できます。表のヘッダー・セルまたはデータ・セルとなるセルも指定できます。

セル内での自動テキスト折返しはデフォルトで有効になっています。自動テキスト折返しを無効にするにはwrappingDisabled属性をtrueに設定します。

セル・コンテンツの省略形を指定するには、shortText属性を使用します。必要に応じて、セル・コンテンツのかわりに省略名がユーザー・エージェントによりレンダリングされます。

詳細は、「afh:cellFormat」タグ・リファレンスを参照してください。

コード・サンプル

<afh:tableLayout borderWidth="1" width="50%" >

  <!-- row 1 -->
  <afh:rowLayout>
    <afh:cellFormat rowSpan="2" halign="center" >
      <h:outputText value="One"/>
    </afh:cellFormat>
    <afh:cellFormat halign="center" >
      <h:outputText value="Two"/>
    </afh:cellFormat>
    <afh:cellFormat halign="center" >
      <h:outputText value="Three"/>
    </afh:cellFormat>
  </afh:rowLayout>

  <!-- row 2 -->
  <afh:rowLayout>
    <afh:cellFormat halign="center" >
      <h:outputText value="Four"/>
    </afh:cellFormat>
    <afh:cellFormat halign="center" columnSpan="2" >
      <h:outputText value="Five"/>
    </afh:cellFormat>
  </afh:rowLayout>

</afh:tableLayout>    

ADF Faces HTMLコンポーネントの概要