表の出力

JSF2.0

今回は表の出力についてです。

【前提条件】

[環境]

【概要】

JSF2.0ではタグを使用します。

今回のサンプルはBeanのリストをテーブルに出力させてみます。

【サンプルコード】

Bean

まずは今回使うBeanです。
（ManagedBeanではないです）

public class DataBean {

    private final String code;

    private final String name;

    private final Integer price;

    public DataBean(final String code, final String name, final Integer price) {

        this.code = code;
        this.name = name;
        this.price = price;
    }

    // アクセサメソッドは省略
}

特別なことはありません。
普通のBeanです。

ManagedBean

次にManagedBeanです。

@ManagedBean(name = "dataTableSample")
@RequestScoped
public class DataTableSample {

    private List<DataBean> dataList = null;

    public DataTableSample() {

        dataList = new ArrayList<>();

        dataList.add(new DataBean("CODE-001", "えんぴつ", 100));
        dataList.add(new DataBean("CODE-002", "けしごむ", 50));
        dataList.add(new DataBean("CODE-003", "ノート", 200));
    }

    // アクセサメソッドは省略
}

作成した通常のBeanのリストを持つManagedBeanです。
コンストラクタでデータの作成をしています。

ページ

次はページ側です。

<?xml version="1.0" encoding="Windows-31J" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 
    <f:view>
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
            <title>データテーブル</title>
            <style>
                .table-class {}
                .header-code-class {}
                .header-name-class {}
                .header-price-class {}
                .column-class1 {}
                .column-class2 {}
                .row-class1 {}
                .row-class2 {}
            </style>
        </h:head>
        <h:body>
            <h:form id="sampleForm">
                <h:dataTable var="recordData" value="#{dataTableSample.dataList}"
                    columnClasses="column-class1  column-class2"
                    rowClasses="row-class1 row-class2"
                    styleClass="table-class"
                    border="1"
                    cellspacing="0">
                    <h:column headerClass="header-code-class">
                        <f:facet name="header">
                            コード
                        </f:facet>
                        <h:outputText value="#{recordData.code}" />
                    </h:column>
                    <h:column headerClass="header-name-class">
                        <f:facet name="header">
                            商品名
                        </f:facet>
                        <h:outputText value="#{recordData.name}" />
                    </h:column>
                    <h:column headerClass="header-price-class">
                        <f:facet name="header">
                            価格
                        </f:facet>
                        <h:outputText value="#{recordData.price}" />
                        <f:facet name="footer">
                            価格フッター
                        </f:facet>
                    </h:column>
                </h:dataTable>
            </h:form>
        </h:body>
    </f:view>
</html>

タグの主な属性としてはvar属性とvalue属性があります。
ドキュメントでRequiredがfalseなので必須ではないですが、
この二つの属性はほぼ必須かなと思います。

value属性には対応する値を指定します。
今回はBeanのListを指定しています。

var属性にはvalue属性から取得したオブジェクトの変数名を指定します。
イテレートする箇所ではvar属性で指定した変数名を使用します。

タグは列単位で項目を指定してきます。
列の定義はタグを使用します。

タグ内でタグを使用することにより、
テーブルのヘッダーとフッターの出力ができます。

タグのname属性に「header」と指定すればヘッダーが、
「footer」と指定すればフッターが出力されます。

【実行】

ページにアクセスしてみます。

テーブルが出力されました。

つづいて生成されたソースを見てみます。

<?xml version="1.0" encoding="Windows-31J" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
        <title>&#12487;&#12540;&#12479;&#12486;&#12540;&#12502;&#12523;</title>
        <style>
                .table-class {}
                .header-code-class {}
                .header-name-class {}
                .header-price-class {}
                .column-class1 {}
                .column-class2 {}
                .row-class1 {}
                .row-class2 {}
        </style>
    </head>
    <body>
        <form id="sampleForm" name="sampleForm" method="post"
            action="/JavaEE6Practice/dataTableSample.xhtml"
            enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="sampleForm" value="sampleForm" />
            <table class="table-class" border="1" cellspacing="0">
                <thead>
                    <tr>
                        <th class="header-code-class" scope="col">
                            &#12467;&#12540;&#12489;
                        </th>
                        <th class="header-name-class" scope="col">
                            &#21830;&#21697;&#21517;
                        </th>
                        <th class="header-price-class" scope="col">
                            &#20385;&#26684;
                        </th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            &#20385;&#26684;&#12501;&#12483;&#12479;&#12540;
                        </td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr class="row-class1 row-class2">
                        <td class="column-class1  column-class2">
                            CODE-001
                        </td>
                        <td>
                            &#12360;&#12435;&#12404;&#12388;
                        </td>
                        <td>
                            100
                        </td>
                    </tr>
                    <tr class="row-class1 row-class2">
                        <td class="column-class1  column-class2">
                            CODE-002
                        </td>
                        <td>
                            &#12369;&#12375;&#12372;&#12416;
                        </td>
                        <td>
                            50
                        </td>
                    </tr>
                    <tr class="row-class1 row-class2">
                        <td class="column-class1  column-class2">
                            CODE-003
                        </td>
                        <td>
                            &#12494;&#12540;&#12488;
                        </td>
                        <td>
                            200
                        </td>
                    </tr>
                </tbody>
            </table>
            <input type="hidden" name="javax.faces.ViewState"
                id="javax.faces.ViewState"
                value="-7821071207896068624:-5082090163599949912"
                autocomplete="off" />
        </form>
    </body>
</html>

実際に出力されたソースを整形したものです。
tableタグやtrタグ、tdタグにclass属性は
タグとタグで指定したCSSのクラスが設定されています。

【最後に】

タグによる表の出力自体は簡単にできますが、
CSSのクラスがやや面倒くさい気がします。

選手の指定についてはCSSの指定をするより
タグの属性で指定するほうが楽に思えます。