jsf - JSF - tomahawk t:panelGrid スタイル

Question

JSF:

...
    xmlns:t="http://myfaces.apache.org/tomahawk">
     <t:panelGrid columns="4">
       ...
     </t:panelGrid>

trとtdの要素を含む単純な古い HTML テーブルを動的に生成します。

trこれらおよび/またはtd要素に特定の css スタイルを設定するにはどうすればよいですか?

Answer 1

columnClasses および rowClasses 属性を使用して、各セルに一意のクラスを指定します

例えば：

 <t:panelGrid columns="4" columnClasses="a,b,c,d" rowClasses="x,y,z">

 </t:panelGrid>

columnClasses

columnClasses 属性は、テーブルの列に適用される CSS スタイル クラスのカンマ区切りのリストを受け入れます。個々の列のスタイル クラスは、スペースで区切られたリストで定義することもできます。スタイル クラスは、レンダリングされた td または th 要素の class 属性の値としてテーブル列に適用されます。

CSS スタイル クラスをテーブル列に適用するために使用されるアルゴリズムは単純です。テーブル レンダリング プロセスでは、(a) 表示する列がなくなるか、(b) 適用するスタイル クラスがなくなるまで、スタイル クラスが列に 1 つずつ適用されます。

* If (a) happens at the same time as (b), the next row in the table is rendered.
* If (a) happens before (b), the remaining style classes are ignored.
* If (b) happens before (a), the remaining columns will not have style classes.

行クラス

rowClasses 属性は、テーブルの行に適用される CSS スタイル クラスのコンマ区切りのリストを受け入れます。個々の行のスタイル クラスは、スペースで区切られたリストで定義することもできます。スタイル クラスは、レンダリングされた tr 要素の class 属性の値としてテーブル行に適用されます。

スタイル クラスは、定義された順序で行に適用されます。たとえば、2 つのスタイル クラスがある場合、最初のクラスは最初の行に適用され、2 番目は 2 番目の行に適用され、1 番目は 3 番目の行に適用され、2 番目は 4 番目の行に適用されます。スタイルのリストは、表示する行がなくなるまで最初からループされます。

私の標準のJSFプロジェクト（Mojarra 2.0.3）では

このタグは以下を生成します。

   <h:panelGrid border="1"
                columns="4" 
                columnClasses="a,b,c,d" 
                rowClasses="x,y,z">

                    <h:outputText value="ax"/>
                    <h:outputText value="bx"/>
                    <h:outputText value="cx"/>
                    <h:outputText value="dx"/>

                    <h:outputText value="ay"/>
                    <h:outputText value="by"/>
                    <h:outputText value="cy"/>
                    <h:outputText value="dy"/>

                    <h:outputText value="az"/>
                    <h:outputText value="bz"/>
                    <h:outputText value="cz"/>
                    <h:outputText value="dz"/>

   </h:panelGrid>

この HTML:

    <table border="1">
        <tbody>
            <tr class="x">
                <td class="a">ax</td>
                <td class="b">bx</td>
                <td class="c">cx</td>
                <td class="d">dx</td>
            </tr>
            <tr class="y">
                <td class="a">ay</td>
                <td class="b">by</td>
                <td class="c">cy</td>
                <td class="d">dy</td>
            </tr>
            <tr class="z">
                <td class="a">az</td>
                <td class="b">bz</td>
                <td class="c">cz</td>
                <td class="d">dz</td>
            </tr>
        </tbody>
    </table>