Sử dụng ValueChangeEvent tren Java Server Face

Một ví dụ sử dụng sự kiện ValueChangeEvent trên Face cho các bạn học viên mới tìm hiểu JSF

Chọn loại sản phẩm -> danh sách sản phẩm sẽ được lọc lại:


1. Tạo website sử dụng framework Face 2x (1x cũng được)
2. Định nghĩa 2 ManageBean (Products và Categories) và 2 JavaBean (Product và Category)
3. Thiết kế giao diện trang index.xhtml

Trong ví dụng này tôi sử dụng Netbean để demo
Tạo ManageBean (Products và Categories)
- File -> New File -> Other -> Java Server Face -> JSF ManageBean
Products
[sourcecode language="java"]
package codes;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.Collection;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.ValueChangeEvent;
/**
*
* @author ntdan
*/
@ManagedBean
@RequestScoped
public class Products {

/**
* Creates a new instance of Products
*/
public Products() {
}

private Collection list;
private int id;
private int cid;

public int getCid() {
return cid;
}

public void setCid(int cid) {
this.cid = cid;
}
private String name;
private String price;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getPrice() {
return price;
}

public void setPrice(String price) {
this.price = price;
}

public Collection getList() {
return list;
}

public void select_cid_change(ValueChangeEvent event)
{
try {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
Connection conn = DriverManager.getConnection("jdbc:sqlserver://172.16.160.81\\sql2008;"
+ "database=northwind;","sa","sa");

PreparedStatement comm = conn.prepareStatement("Select categoryid, productid, productname, unitprice"
+ " from products where categoryID=?");
comm.setInt(1, Integer.parseInt(event.getNewValue().toString()));
ResultSet rs = comm.executeQuery();

list = new ArrayList<Product>();
Product pro;

while(rs.next())
{
pro = new Product();
pro.setId(rs.getInt("productid"));
pro.setcId(rs.getInt("categoryid"));
pro.setName(rs.getString("productname"));
pro.setPrice(rs.getString("unitprice"));

list.add(pro);
}
} catch (Exception e) {
list = null;
}
}
}
[/sourcecode]

Categories
[sourcecode language="java"]
package codes;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.Collection;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
/**
*
* @author ntdan
*/
@ManagedBean
@RequestScoped
public class Categories {
public Categories() {
}

private int id;
private String name;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}
private Collection list;

public Collection getList() {
try {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
Connection conn = DriverManager.getConnection("jdbc:sqlserver://172.16.160.81\\sql2008;"
+ "database=northwind;", "sa", "sa");

PreparedStatement comm = conn.prepareStatement("Select categoryid, categoryname"
+ " from categories");

ResultSet rs = comm.executeQuery();

list = new ArrayList<Category>();
Category ca;

while (rs.next()) {
ca = new Category();
ca.setId(rs.getInt("categoryid"));
ca.setName(rs.getString("categoryname"));
list.add(ca);
}
} catch (Exception e) {
list = null;
}
return list;
}
}
[/sourcecode]

Tạo 2 javabean như sau
- File -> New File -> Java Class
Product
[sourcecode language="java"]
package codes;
public class Product {
public Product() {
}

private int id;
private int cId;
private String name;
private String price;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public int getcId() {
return cId;
}

public void setcId(int cId) {
this.cId = cId;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getPrice() {
return price;
}

public void setPrice(String price) {
this.price = price;
}
}
[/sourcecode]

Category
[sourcecode language="java"]
package codes;
public class Category {
public Category() {
}

private int id;
private String name;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}
}
[/sourcecode]

Thiết kế giao diện xhtml
[sourcecode language="html"]
<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Value Change Event</title>
<link type="text/css" rel="stylesheet" href="//codeproject.cachefly.net/App_Themes/CodeProject/Css/Main.min.css?dt=2.8.150901.1"></link>
</h:head>
<h:body>

<f:view>
<h:form>
Categories:<br/>
<h:selectOneMenu onchange="submit();"
value="#{products.cid}"
valueChangeListener="#{products.select_cid_change}">
<f:selectItems value="#{categories.list}" var="sate"
itemLabel="#{sate.name}"
itemValue="#{sate.id}"/>
</h:selectOneMenu>

<h:dataTable border="1" id="t" width="100%"
value="#{products.list}" var="product">
<h:column>
<f:facet name="header">
ID
</f:facet>
<h:outputText value="#{product.id}"/>
</h:column>

<h:column>
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{product.name}"/>
</h:column>

<h:column>
<f:facet name="header">
Price
</f:facet>
<h:outputText value="#{product.price}"/>
</h:column>
<h:column>
<f:facet name="header">
Operation
</f:facet>
<h:commandLink value="Delete" action="index"/>
</h:column>
</h:dataTable>
</h:form>
</f:view>

</h:body>
</html>
[/sourcecode]
f:selectItems: sẽ render các phần tử (thẻ option của HTML) cho hộp chọn (thẻ select của HTML) với nội dung giữa thẻ option là tên nhóm sản phẩm (itemLabel="#{sate.name}") và thuộc tính value của option sẽ được điền mã nhóm (itemValue="#{sate.id}").

Mỗi khi chọn một phần tử trong hộp chọn sự kiện onchange sẽ phát sinh (HTML), chúng ta có thể đón nhận sự kiện này dưới ManageBean qua thuộc tính valueChangeListener="#{products.select_cid_change}" của selectOneMenu để xử lý sự kiên và cập nhật lại danh sách sản phẩm.

Mã nguồn tham khảo --> ở đây