JSF 2 dataTableの例

投稿日: 2019-11-05 2019-11-05
タグ: datatable, jsf2

JSFでは、「

h:dataTable

」タグは、HTML表形式でデータを表示するために使用されます。次のJSF 2.0の例では、「

h:dataTable

」タグを使用して「注文」オブジェクトの配列をループし、HTML表形式で表示する方法を示します。

1.プロジェクトフォルダ

この例のプロジェクトフォルダ構造。

jsf2-dataTable-folders、title = "jsf2-dataTable-folders"、width = 273、height = 382

2.マネージドBean

“order”という名前のマネージドBeanは、後で使用するために配列オブジェクトを初期化しました。

package com.mkyong;

import java.io.Serializable;
import java.math.BigDecimal;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{

    private static final long serialVersionUID = 1L;

    private static final Order[]orderList = new Order[]{

        new Order("A0001", "Intel CPU",
                new BigDecimal("700.00"), 1),
        new Order("A0002", "Harddisk 10TB",
                new BigDecimal("500.00"), 2),
        new Order("A0003", "Dell Laptop",
                new BigDecimal("11600.00"), 8),
        new Order("A0004", "Samsung LCD",
                new BigDecimal("5200.00"), 3),
        new Order("A0005", "A4Tech Mouse",
                new BigDecimal("100.00"), 10)
    };

    public Order[]getOrderList() {

        return orderList;

    }

    public static class Order{

        String orderNo;
        String productName;
        BigDecimal price;
        int qty;

        public Order(String orderNo, String productName,
                                BigDecimal price, int qty) {

            this.orderNo = orderNo;
            this.productName = productName;
            this.price = price;
            this.qty = qty;
        }

       //getter and setter methods
    }
}

3. CSS

テーブルレイアウトのスタイルを設定するCSSファイルを作成します。

table-style.css **

.order-table{
    border-collapse:collapse;
}

.order-table-header{
    text-align:center;
    background:none repeat scroll 0 0 #E5E5E5;
    border-bottom:1px solid #BBBBBB;
    padding:16px;
}

.order-table-odd-row{
    text-align:center;
    background:none repeat scroll 0 0 #FFFFFFF;
    border-top:1px solid #BBBBBB;
}

.order-table-even-row{
    text-align:center;
    background:none repeat scroll 0 0 #F9F9F9;
    border-top:1px solid #BBBBBB;
}

4. h:dataTable

”

h:dataTable

“タグを使用して “order”オブジェクトの配列をループするJSF 2.0 xhtmlページ。この例は自明でなければなりません。

default.xhtml **

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css" />
    </h:head>
    <h:body>

        <h1>JSF 2 dataTable example</h1>

            <h:dataTable value="#{order.orderList}" var="o"
                styleClass="order-table"
                headerClass="order-table-header"
                rowClasses="order-table-odd-row,order-table-even-row"
            >

                <h:column>
                    <!-- column header -->
                    <f:facet name="header">Order No</f:facet>
                    <!-- row record -->
                    #{o.orderNo}
                </h:column>

                <h:column>
                    <f:facet name="header">Product Name</f:facet>
                    #{o.productName}
                </h:column>

                <h:column>
                    <f:facet name="header">Price</f:facet>
                    #{o.price}
                </h:column>

                <h:column>
                    <f:facet name="header">Quantity</f:facet>
                    #{o.qty}
                </h:column>

            </h:dataTable>

    </h:body>
</html>

このHTML出力を生成する

<!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>
       <link type="text/css" rel="stylesheet"
          href="/JavaServerFaces/faces/javax.faces.resource/table-style.css?ln=css"/>
    </head>
    <body>

    <h1>JSF 2 dataTable example</h1>

    <table class="order-table">

      <thead>
        <tr>
        <th class="order-table-header" scope="col">Order No</th>
        <th class="order-table-header" scope="col">Product Name</th>
        <th class="order-table-header" scope="col">Price</th>
        <th class="order-table-header" scope="col">Quantity</th>
        </tr>
      </thead>

      <tbody>
        <tr class="order-table-odd-row">
            <td>A0001</td>
            <td>Intel CPU</td>
            <td>700.00</td>
            <td>1</td>
        </tr>
        <tr class="order-table-even-row">
            <td>A0002</td>
            <td>Harddisk 10TB</td>
            <td>500.00</td>
            <td>2</td>
        </tr>
        <tr class="order-table-odd-row">
            <td>A0003</td>
            <td>Dell Laptop</td>
            <td>11600.00</td>
            <td>8</td>
        </tr>
        <tr class="order-table-even-row">
            <td>A0004</td>
            <td>Samsung LCD</td>
            <td>5200.00</td>
            <td>3</td>
        </tr>
        <tr class="order-table-odd-row">
            <td>A0005</td>
            <td>A4Tech Mouse</td>
            <td>100.00</td>
            <td>10</td>
        </tr>
      </tbody>
     </table>
      </body>
</html>