JSF 2 dataTableの例
JSFでは、「h:dataTable」タグを使用してデータをHTMLテーブル形式で表示します。 次のJSF2.0の例は、「h:dataTable」タグを使用して「order」オブジェクトの配列をループし、それをHTMLテーブル形式で表示する方法を示しています。
1. プロジェクトフォルダ
この例のプロジェクトフォルダ構造。
2. マネージドビーン
「order」という名前のマネージドBeanは、後で使用するために配列オブジェクトを初期化しました。
OrderBean.java
package com.example;
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.0xhtmlページ。 この例は一目瞭然です。
default.xhtml
JSF 2 dataTable example
Order No
#{o.orderNo}
Product Name
#{o.productName}
Price
#{o.price}
Quantity
#{o.qty}
このHTML出力を生成する
JSF 2 dataTable example
| Order No | Product Name | Price | Quantity |
|---|---|---|---|
| A0001 | Intel CPU | 700.00 | 1 |
| A0002 | Harddisk 10TB | 500.00 | 2 |
| A0003 | Dell Laptop | 11600.00 | 8 |
| A0004 | Samsung LCD | 5200.00 | 3 |
| A0005 | A4Tech Mouse | 100.00 | 10 |
