Exemple de table de données JSF 2
Dans JSF, la balise «h:dataTable» est utilisée pour afficher les données dans un format de tableau HTML. L'exemple JSF 2.0 suivant vous montre comment utiliser la balise «h:dataTable» pour boucler sur un tableau d'objets «order» et l'afficher dans un format de tableau HTML.
1. Dossier de projet
Structure du dossier de projet de cet exemple.
2. Haricot géré
Un bean géré nommé «order» a initialisé l'objet tableau pour une utilisation ultérieure.
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
Créez un fichier CSS pour styliser la disposition du tableau.
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
Une page xhtml JSF 2.0 pour montrer l'utilisation de la balise «h:dataTable» pour boucler sur le tableau de l'objet «order». Cet exemple devrait être explicite.
default.xhtml
JSF 2 dataTable example
Order No
#{o.orderNo}
Product Name
#{o.productName}
Price
#{o.price}
Quantity
#{o.qty}
Générez cette sortie 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 |
