Xử lý sự kiện trên rich:dataTable
Ở bài này tôi sẽ hướng dẫn các bạn xử lý sự kiện với các dòng trên 1 dataTable cũng như update dữ liệu trên dòng đó.
Kết quả sau khi thực hiện bài này các bạn sẽ có cửa sổ sau:
Trong Eclipse ta tạo 1 project tên DataTableEvent, chọn configuration là JavaServer Faces 1.2.
Tạo 1 package có tên vovanhai.wordpress.com
Đầu tiên chúng ta tạo đối tượng của chúng ta, lớp ItemData.java
private Long id; private String name; private String value; // Getters ———————————————————————————– public Long getId() { return id; } public String getName() { return name; } public String getValue() { return value; } // Setters ———————————————————————————– public void setId(Long id) { this.id = id; } public void setName(String name) { this.name = name; } public void setValue(String value) { this.value = value; } //constructors public ItemData(Long id, String name, String value) { this.id = id; this.name = name; this.value = value; } public ItemData() { this(0L,“”,“”); } @Override public String toString() { return name+“; ”+value; }
} |
Tạo managed bean, lớp RichBean.java
import java.util.ArrayList; import java.util.List; import javax.faces.component.html.HtmlInputHidden; import org.richfaces.component.html.HtmlDataTable; public class RichBean { // Declare ————————————————————————————– private HtmlDataTable dataTable;//rich:datatable sẽ binding private ItemData dataItem = new ItemData();//phần tử được chọn private HtmlInputHidden dataItemId = new HtmlInputHidden();//dùng lưu trữ giá trị ID được chọn //danh sách chứa dữ liệu private List<ItemData> dataList;
//tạo danh sách các đối tượng private void loadDataList() { dataList=new ArrayList<ItemData>(); //Tạo danh sách các đối tượng. Ở đây tôi tạo 1 danh sách các đối tượng tạm để thử for(int i=0;i<35;i++){ ItemData data=new ItemData(new Long(i+10),“name ”+i,“ value ”+(i*1000)); dataList.add(data); } //trong thực tế bạn lấy về 1 danh sách các đối tượng từ EJB } // Getters ———————————————————————————– public List<ItemData> getDataList() { if (dataList == null) { loadDataList(); // Preload by lazy loading. } return dataList; } public HtmlDataTable getDataTable() { return dataTable; } public ItemData getDataItem() { return dataItem; } public HtmlInputHidden getDataItemId() { return dataItemId; } // Setters ————————————————————– public void setDataTable(HtmlDataTable dataTable) { this.dataTable = dataTable; } public void setDataItem(ItemData dataItem) { this.dataItem = dataItem; } public void setDataItemId(HtmlInputHidden dataItemId) { this.dataItemId = dataItemId; } // Actions: hiệu chỉnh dữ liệu——————————————— public String editDataItem() { //Lấy đối tượng MyData đang được chọn để hiệu chỉnh dataItem = (ItemData)dataTable.getRowData(); // Lưu ID của đối tượng này vào hidden input để dùng về sau dataItemId.setValue(dataItem.getId()); return “edit”; // Navigation case. }
// Actions: cập nhật dữ liệu———————————————- public String saveDataItem() { //Lấy ID của đối tượng đang chọn từ hidden input dataItem.setId(Long.valueOf(dataItemId.getValue().toString())); /* có thể trực tiếp udate bằng câu “UPDATE mydata SET values WHERE id”. try { dataDAO.save(dataItem); } catch (DAOException e) { setErrorMessage(e.getMessage() + ” Cause: ” + e.getCause()); e.printStackTrace(); }*/ return “list”; // Navigation case. } } |
Tạo trang RichFacesDatatableEvents.jsp, code như sau
| <%@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%> <%@ taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%> <%@ taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%> <%@ taglib prefix=”rich” uri=”http://richfaces.org/rich”%> <%@ taglib prefix=”a4j” uri=”http://richfaces.org/a4j”%> <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> <title>RichFaces with Events</title> </head> <body> <f:view> <h:form> <rich:dataTable binding=”#{richBean.dataTable}” value=”#{richBean.dataList}” var=”dataItem” id=”myList” border=”1″ rows=”15″ width=”80%”> <rich:column> <f:facet name=”header”> <h:outputText value=”ID” /> </f:facet> <h:outputText value=”#{dataItem.id}”></h:outputText> </rich:column> <rich:column> <f:facet name=”header”> <h:outputText value=”Name” /> </f:facet> <h:outputText value=”#{dataItem.name}” /> </rich:column> <rich:column> <rich:column> <h:outputText value=”Name” /> <h:outputText value=”Value” /> <h:inputHidden binding=”#{richBean.dataItemId}” /> |
Nội dung faces-config.xml như sau
| <?xml version=”1.0″ encoding=”UTF-8″?>
<faces-config </faces-config> |
Ở đây chúng ta có 1 bean tên richBean thể hiện của lớp vovanhai.wordpress.com.RichBean. Không có navigation rule nào cả bởi chỉ có 1 trang.
Nội dung web.xml như sau
| <?xml version=”1.0″ encoding=”UTF-8″?> <web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns=”http://java.sun.com/xml/ns/javaee” xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” id=”WebApp_ID” version=”2.5″> <display-name>DataTableEvent</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> </web-app> |
Thực thi ứng dụng bằng cách nhấn phải chuột lên project trong eclipse, chọn Run as ->Run on Server, chọn JBoss 4.2.
Thực thi url http://localhost:8080/DataTableEvent/faces/RichFacesDatatableEvents.jsp trong browser
Kết quả như hình đã đưa ra!
tai nguyen said
sao e add thư viện vào có htmlDataTable nhưng htmlDataTable lại không có method getRowData()? thư viện của e là jsf-api.jar và richfaces-3.0.1.jar
Hoàng said
em cảm ơn thầy em đang vướng đúng chỗ này, chúc thầy năm mới hạnh phúc
thanh Luan said
Em đang làm việc trên dataTable. Giờ em không biết cách nào để phân trang. Thầy có thể huớng dẫn em phần này không
Đây là code em viết . Nhưng em không láy đuợc chỉ số Index cho mỗi link trong table.
public void prev(){
try{
modTable.setFirst(modTable.getFirst()-modTable.getRows());
}
catch(Exception ex){
}
}
public void next(){
modTable.setFirst(modTable.getFirst()+modTable.getRows());
}
public int getCurrentPage() {
int rows = modTable.getRows();
int first = modTable.getFirst();
int count = modTable.getRowCount();
return (count / rows) – ((count – first) / rows) + 1;
}
public int getTotalPages() {
int rows = modTable.getRows();
int count = modTable.getRowCount();
return (count / rows) + ((count % rows != 0) ? 1 : 0);
}
Nó chỉ hiện lên Frev and Next .
Giờ em muốn nó sẻ hiển thị lên như thế này đựoc không thầy
[prev 1 2 3 4 next]
thanh Luan said
Em Quên . Em đang làm việc trong JSF
Nếu thầy có cách nào hay hơn thì replay lại em với
Thanhks thầy!!
Chúc thầy một năm mới hạnh phúc !!
Võ Văn Hải said
Trong richfaces đã có mọi thứ rồi. Em dùng rich:datascroller hoặc rich:dataGrid.
Viet said
Cho e lỗi xảy ra với DataTable.
Khi em click vào button navigation thì xuất hiện lỗi (kể cả click vào page number trong list data):
org.hibernate.LazyInitializationException: could not initialize proxy – the owning Session was closed
Nhờ thầy giúp đỡ!
Võ Văn Hải said
Có thể là do phương cách lấy dữ liệu của EJB bị lỗi. Em đổi lại FetchType.EAGER thử xem sao.
Pham Duy Hai said
Chào anh,
Em đang dùng netbeans và 1 bản richfaces ver 4.0 final. Em add lib và đầy đủ nhưng khi tạo một trang jsf thì không thể nào add taglib vào được.
//báo lỗi không tìm thấy
//báo lỗi không tìm thấy
Nhưng khi em thay bằng 1 trang faces (.xhtml) add tag thì được.
// good
Em không biết là .jsp có cấn config thêm ở đâu không anh, hay do ver richfaces of em bắt buộc phải dùng ở faces .xhtml.
À còn nữa anh, em thử làm rich:dataScroller, view lên thì đã có số trang, nhưng khi click vào thì nó không thay đổi gì.
Mong anh giúp đỡ, nếu khó khăn quá, em sẽ up cả project lên anh fix hộ em. Thank anh !
Võ Văn Hải said
Trên NetBean thì lời khuyên là bạn nên dùng PrimeFaces.