JavaEE 7をやってみよう。 Hello, world その4

その３の続き

hello.xhtmlでデータを表形式で出力する際、JSFのカスタムタグを使ってみた。

dataTable*1
column*2
outputText*3

dataTableはリストからTableタグを使った表の出力を行うためのタグ。
カラムの一つ一つの定義にはcolumnタグを、
実際の値の出力には、outputTextタグといった具合。

    <h:dataTable var="item" value="#{dataList}" border="1">
        <h:column id="type">
            <h:outputText value="#{item.type}" />
        </h:column>
        <h:column id="name">
            <h:outputText value="#{item.name}" />
        </h:column>
    </h:dataTable>

varがListに格納した1レコードを参照するための変数。
valueには対象のリストを指定する。
指定するオブジェクトはiteratableを実装している必要があるのだろう。
#{dataList}はrequestに格納した属性名を表している。
HelloServletでrequest.setAttributeをしていたことを思い出してほしい。
また、Mapから値を取得する際のキーを#{item.type}, #{item.name}と指定して値を取得している。

単純に値を羅列するならこんなでも良いのだが、
実際のシステムでは、表にヘッダをつけたり、行番号を振ったり、奇数行、偶数行で色を変えたりする必要がある。
その際、上の書き方では、ヘッダは付けられない、現在の行数が取れないと、あまりイケてない。
そこで、スタイルシートやListDataModelの出番である。

    <h:dataTable var="item" value="#{dataModel}" styleClass="table" headerClass="headerrow" rowClasses="oddrow,evenrow">
        <h:column id="no">
            <f:facet name="header">No.</f:facet>
            <h:outputText value="#{dataModel.rowIndex}" />
        </h:column>
        <h:column id="type">
            <f:facet name="header">Type</f:facet>
            <h:outputText value="#{item.type}" />
        </h:column>
        <h:column id="name">
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{item.name}" />
        </h:column>
    </h:dataTable>

ヘッダをつけるために、facet*4というカスタムタグを使った。
facetの効用については調査が必要だが、ヘッダやフッタを用いる時には使用できると認識した。

表に対するCSSの指定については、dataTableタグの属性で適用範囲ごとに細かく指定できる。
むしろ、できないと困る。
styleClassは表全体(tableタグやね)、
headerClassはヘッダ全体(THeaderタグやね)、
rowClassesは行全体(trタグやね)
に適用したいCSSクラス名を指定する。
rowClassesはカンマ区切りで複数していでき、奇数行、偶数行みたいに適用してくれる。

行番号の表示については、
ListDataModel独自のメソッド(dataModel.getRowIndex())を使用して実現している。
行番号の列で#{dataModel.rowIndex}を指定しているのがそれである。
リストのインデックスのため、0ベースである。

しかし、カスタムタグは覚えると便利だなぁ。

*1:JSF2.2 タグライブラリ h:dataTable https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-facelets/h/dataTable.html

*2:JSF2.2 タグライブラリ h:column https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-facelets/h/column.html

*3:JSF2.2 タグライブラリ h:outputtext https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-facelets/h/outputText.html

*4:JSF2.2 タグライブラリ f:facet https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-facelets/f/facet.html