Võ Văn Hải's blog

Chỉ có một điều tuyệt đối đó là mọi thứ đều tương đối…

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:
https://vovanhai.files.wordpress.com/2008/11/dataevent_01.png

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


package vovanhai.wordpress.com;
public class ItemData {

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


package vovanhai.wordpress.com;

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
//hoặc dùng JDBC để lấy dữ liệu.
//…

}

// 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”.
* hoặc triệu gọi EJB để update

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”%&gt;
<%@ taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%&gt;
<%@ taglib prefix=”rich” uri=”http://richfaces.org/rich”%&gt;
<%@ taglib prefix=”a4j” uri=”http://richfaces.org/a4j”%&gt;
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;
<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>
<f:facet name=”header”>
<h:outputText value=”Value” />
</f:facet>
<h:outputText value=”#{dataItem.value}” />
</rich:column>

<rich:column>
<f:facet name=”header”>
<h:outputText value=”Command” />
</f:facet>
<h:commandLink value=”Edit” action=”#{richBean.editDataItem}” />
</rich:column>
</rich:dataTable>
<rich:datascroller id=”myScroller” align=”left” for=”myList”
maxPages=”20″ />
<rich:spacer height=”30″ />
</h:form>
<h3>DETAILS INFORMATION</h3>
<h:form>
<h:panelGrid columns=”2″ border=”1″>
<h:outputText value=”ID” />
<h:outputText value=”#{richBean.dataItem.id}” />

<h:outputText value=”Name” />
<h:inputText value=”#{richBean.dataItem.name}” />

<h:outputText value=”Value” />
<h:inputText value=”#{richBean.dataItem.value}” />
</h:panelGrid>

<h:inputHidden binding=”#{richBean.dataItemId}” />
<h:commandButton value=”Save” action=”#{richBean.saveDataItem}” />
</h:form>
</f:view>
</body>
</html>

Nội dung faces-config.xml như sau

<?xml version=”1.0″ encoding=”UTF-8″?>

<faces-config
xmlns=”http://java.sun.com/xml/ns/javaee&#8221;
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd&#8221;
version=”1.2″>
<managed-bean>
<managed-bean-name>richBean</managed-bean-name>
<managed-bean-class>vovanhai.wordpress.com.RichBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

</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&#8221;
xmlns=”http://java.sun.com/xml/ns/javaee&#8221; xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&#8221;
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&#8221;
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!

9 Responses to “Xử lý sự kiện trên rich:dataTable”

  1. 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

  2. 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

  3. 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]

  4. 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 !!

  5. Võ Văn Hải said

    Trong richfaces đã có mọi thứ rồi. Em dùng rich:datascroller hoặc rich:dataGrid.

  6. 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 đỡ!

  7. 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.

  8. 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 !

  9. Võ Văn Hải said

    Trên NetBean thì lời khuyên là bạn nên dùng PrimeFaces.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: