Võ Văn Hải's blog

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

Cấu hình và phát triển RichFaces với Eclipse Ganymede

Trong bài viết này tôi sẽ hướng dẫn bạn cách tích hợp Richfaces vào Eclipse Ganymede.

Tất nhiên bạn đã có Eclipse Ganymede J2EE, nếu chưa có, bạn có thể download từ link http://www.eclipse.org/downloads/.

Bạn cũng phải download RichFaces từ JBoss, Ở bài viết này, tôi sử dụng richfaces-ui-3.2.2.SR1. Sau khi download về máy, bạn giải nén ra 1 thư mục nào đó. Kết quả chúng ta có rất nhiều thứ, ở đây chúng ta chú ý đến thư mục lib trong đó chứa 3 tập tin: richfaces-api-3.2.2.SR1.jar, richfaces-impl-3.2.2.SR1.jarrichfaces-ui-3.2.2.SR1.jar.

1. Cấu hình cho Eclipse

Trong môi trường Eclipse, vào menu Window->References, chọn mục Web->JavaServer Faces Tools->Libraries. Nhấn nút New để tạo 1 thư viện mới. Đặt tên cho thư việc của chúng ta là cái tên nào đó, ở đây tôi đặt cho nó là jboss-richface-a4j. Trong Library Jars, nhấn nút Add để thêm 3 file jars mà chúng ta đã giải nén ở trên vào. Kết quả như hình sau:
<img src=
Nhấn Finish để hoàn tất công việc.

Ngoài ra bạn cũng thêm 1 thư viện khác với tên jstl như hình
https://vovanhai.files.wordpress.com/2008/11/rf_intro02.png
2. Tạo RichFaces Project

Trong Eclipse, vào menu File->New->Dynamic Web Project. Đặt tên cho project, ví dụ là RichFacesGanymede.

Trong mục Target Runtime chọn JBoss 4.2 (Nếu chưa có thì nhấn nút New bên cạnh rồi theo wizard tạo 1 cái).

Trong mục Configuration, chọn kiểu “JavaServer Faces v 1.2 Project(hoặc nhấn nút Modify rồi check vào mục JavaServer Faces, chọn Version 1.2)

Nhấn Next 2 lần. bạn chọn theo như hình sau
https://vovanhai.files.wordpress.com/2008/11/rf_intro03.png

Nhấn Finish để hoàn tất việc tạo 1 project.

3. Viết 1 trang demo

Trong Project Explorer ta có kết quả như sau:
https://vovanhai.files.wordpress.com/2008/11/rf_intro04.png
Nhấn phải chuột lên mục WebContent, chọn New->JSP. Đặt tên cho trang là index.jsp. Nhấn Next, chọn “New JavaServer Faces (JSF) Pages (html)“, nhấn Finish.

Đóng file index.jsp lại sau đó nhấn chuột phải lên file này, chọn Open With->Web Page Editor. Eclipse sẽ mở chế độ design cho bạn có thể vừa design bằng code hoặc design bằng kéo thả.

Bây giờ chúng ta thiết kế 1 backing bean như sau:

Mở file faces-config.xml trong thư mục WEB-INF lên, chọn mục ManagedBean như hình
https://vovanhai.files.wordpress.com/2008/11/rf_intro05.png

chọn mục session, nhấn nút Add. Chọn “Create new Java class“, nhấn Next. Ở cửa sổ kế tiếp, gõ package name là vovanhai.wordpress.richfaces, gõ class name là DataTableScrollerBean. Nhấn Next 2 lần, nhấn Finish.

Code cho lớp DataTableScrollerBean.java như sau:


package vovanhai.wordpress.richfaces;
import java.util.ArrayList;

import java.util.Collection;

public class DataTableScrollerBean {

public Collection<Car>getAllCars(){

Collection<Car>col=new ArrayList<Car>();

for (int i = 10000; i < 12000; i++) {

Car c=new Car(“Car “+i,“Model “+i,i*Math.random(),i*Math.random(),“vin “+i,“stock “+i);

col.add(c);

}

return col;

}

}

Ta phải thêm 1 lớp đặc tả cho đối tượng Car, lớp Car.java với code như sau:


package vovanhai.wordpress.richfaces;
import java.io.Serializable;public class Car implements Serializable{

private static final long serialVersionUID = 2886175399820793853L;

private String make;

private String model;

private double price;

private double mileage;

private String vin;

private String stock;

public String getMake() {

return make;

}

public void setMake(String make) {

this.make = make;

}

public String getModel() {

return model;

}

public void setModel(String model) {

this.model = model;

}

public double getPrice() {

return price;

}

public void setPrice(double price) {

this.price = price;

}

public double getMileage() {

return mileage;

}

public void setMileage(double mileage) {

this.mileage = mileage;

}

public String getVin() {

return vin;

}

public void setVin(String vin) {

this.vin = vin;

}

public String getStock() {

return stock;

}

public void setStock(String stock) {

this.stock = stock;

}

@Override

public String toString() {

return make+” “+model;

}

public Car(String make, String model, double price, double mileage,

String vin, String stock) {

this.make = make;

this.model = model;

this.price = price;

this.mileage = mileage;

this.vin = vin;

this.stock = stock;

}

public Car() {

this(“”,“”,0,0,“”,“”);

}

}

Design cho trang index.jsp của chúng ta, mã html của nó 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”%>&lt;!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>Data Table Testing</title>
</head>
<body>
<f:view>
<h:form id=”form1″>
<rich:panel>
<f:facet name=”header”>
<h:outputText value=”Car Store”></h:outputText>
</f:facet>
<h:form>
<rich:dataGrid value=”#{dataTableScrollerBean.allCars}” var=”car”
columns=”4″ elements=”12″>
<rich:panel>
<f:facet name=”header”>
<h:outputText value=”#{car.make} #{car.model}”></h:outputText>
</f:facet>
<h:panelGrid columns=”2″>
<h:outputText value=”Price:” styleClass=”label”></h:outputText>
<h:outputText value=”#{car.price}” />
<h:outputText value=”Mileage:” styleClass=”label”></h:outputText>
<h:outputText value=”#{car.mileage}” />
<h:outputText value=”VIN:” styleClass=”label”></h:outputText>
<h:outputText value=”#{car.vin}” />
<h:outputText value=”Stock:” styleClass=”label”></h:outputText>
<h:outputText value=”#{car.stock}” />
</h:panelGrid>
</rich:panel>
<f:facet name=”footer”>
<rich:datascroller></rich:datascroller>
</f:facet>
</rich:dataGrid>
</h:form>
</rich:panel>
</h:form>
</f:view>
</body>
</html>

Cấu hình cho web.xml như sau:

Thêm phân đoạn xml sau vào trong file web.xml

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

Nhấn phải chuột lên file index.jsp, chọn RunAs->Run on Server, chọn server là JBoss, nhấn Finish. Kết quả như hình sau:
https://vovanhai.files.wordpress.com/2008/11/rf_intro06.png

Bây giờ các bạn đã có thể viết các ứng dụng web 2.0 của mình dựa trên RichFaces được rồi.

Lưu ý: Để triển khai chạy ngon lành trên JBoss bạn cần phải cấu hình thêm 1 chút cho JBoss như  sau:

Thêm thư viện commons-beanutils.jar và common-digester.jar vào thư mục %JBOSS_HOME%\server\default\lib\. Download các gói này tại:
http://commons.apache.org/downloads/download_beanutils.cgi.
http://commons.apache.org/digester/

Các tùy biến môi trường:
ANT_HOME
JAVA_HOME
JBOSS_HOME
MAVEN_HOME
các tùy biến CLASSPATH và PATH phải có thêm:  .;

Chúc các bạn thành công!

14 Responses to “Cấu hình và phát triển RichFaces với Eclipse Ganymede”

  1. Kien.dt said

    Thưa thầy em thử làm theo demo trên trên Jboss visual studio 2.0, đã làm đầy đủ và theo thứ tự các bước
    Sau khi chọn Run on Server thì nhận được thông báo:

    Exception starting filter richfaces
    java.lang.ClassNotFoundException: org.ajax4jsf.Filter
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1358)
    at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1204)
    at org.apache.catalina.core.ApplicationFilterConfig.getFilter(ApplicationFilterConfig.java:249)
    at org.apache.catalina.core.ApplicationFilterConfig.setFilterDef(ApplicationFilterConfig.java:397)
    at org.apache.catalina.core.ApplicationFilterConfig.(ApplicationFilterConfig.java:108)
    at org.apache.catalina.core.StandardContext.filterStart(StandardContext.java:3720)
    at org.apache.catalina.core.StandardContext.start(StandardContext.java:4358)
    at org.apache.catalina.core.ContainerBase.addChildInternal(ContainerBase.java:752)
    at org.apache.catalina.core.ContainerBase.addChild(ContainerBase.java:732)
    at org.apache.catalina.core.StandardHost.addChild(StandardHost.java:553)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)

    Mặc ko thiếu thư viện ajax4jsf vì em đã thử tạo 1 class trong project import gói org.ajax4jsf.Filter rất bình thường. Xin hỏi thầy em phải xử lý như thế nào?

  2. vovanhai said

    Tôi chưa thử JBoss Visual Studio nên không biết sao nữa mặc dù thực tế nó là eclipse mà thôi.
    Để tôi xem đã.

  3. Kien.dt said

    JBoss Visual Studio đúng là eclipse, nó tích hợp sẵn các thư viện để phát triển nhiều ứng dụng khác nhau và tích hợp 1 số framework như seam.
    Em đã tìm ra nguyên nhân là do khi start server jboss không tìm thấy 2 gói thư viện:
    jboss-richface-a4j và jslt, cái này em cũng không hiểu vì sao nó lại như vậy, nên em phải copy tất các các file *.jar của 2 gói trên vào %JBOSS_HOME%\server\default\lib thì nó mới không báo lỗi đó.
    Nhưng sau khi làm như vậy em lại thấy phát sinh thêm 1 lỗi như vầy:

    CONFIGURATION FAILED! org.apache.commons.digester.Digester
    at com.sun.faces.config.ConfigManager.initialize(ConfigManager.java:212)

    Sau khi thử 1 số cái em thấy chỉ cần thêm 2 file jar sau vào build path thì demo của thầy chạy rất tốt:
    commons-digester-1.6
    commons-beanutils-1.7.0.jar

    2 file này em hình như em copy trong seam/lib vì em thử nhúng richface vào seam framework thì thấy no chạy rất tốt.

  4. Em làm đúng như thầy nhưng khi chạy nó thông báo lỗi như sau thầy.

    HTTP Status 404 – /RichFacesGanymede/faces/index.jsp

    ——————————————————————————–

    type Status report

    message /RichFacesGanymede/faces/index.jsp

    description The requested resource (/RichFacesGanymede/faces/index.jsp) is not available.

    ——————————————————————————–

    JBossWeb/2.0.1.GA
    Em không biết lỗi này là sao nữa thầy

  5. vovanhai said

    Lưu ý: Nhớ chép common-bean-utils.jar vào thư mục server/default/deploy/lib của jboss.

  6. Hoc tro said

    Thay post dum file cau hinh day du cho jboss va cac duong link download co lien quan o tren di thay.Cam on thay!

  7. Thao Nguyen said

    em cấu hình RichFaces
    và chạy thử
    phát sinh lỗi

    Could not publish to the server.
    java.lang.NullPointerException

    em da chep 2 thu vien commons-beanutils.jar và common-digester.jar vào server/default/lib cua jboss

  8. Tram Minh Tri said

    Chào các bạn và thầy Hải..mình cũng là newbie..thấy cái richfaces đẹp nên cũng thích..nên mình tìm tài liệu về nó thì thấy khi cấu hình cho bất kì server nào chạy thì nó cũng cần 4 file jar (commons-loggings.jar,commons-digester.jar,commons-collections.jar,commons-beanutils.jar),các bạn copy bỏ vào thư mục lib của server thì nó sẽ chạy bài của thầy Hải ok ngay..nếu các bạn nào tìm hông có thì liên lạc mình wa yahoo : tramminhtri_122 mình sẽ share…

  9. phonglanden said

    thua thay em da add het toan bo thu vien nhu tren rui nhung khi chay no bao loi:

    type Status report
    message /RichFacesGanymede/faces/index.jsp
    description The requested resource (/RichFacesGanymede/faces/index.jsp) is not available.
    JBossWeb/2.0.1.GA

    mong thay giup do!

  10. Tamarind said

    Cám ơn thầy.Bài này em làm trên netbean 6.8+jboss4.2.3.GA chạy được rồi.

  11. minh said

    thầy ơi, thầy có thể hướng cấu hình richfaces trên netbean được hok thầy !

  12. Võ Văn Hải said

    Với Netbean thì bạn download plugin của richfaces cho Netbean thế là xong. Bạn xem thêm ở đây:
    http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=8934

  13. XuanDung said

    Thưa thầy, thầy có thể giúp em cấu hình tomcat để chạy Richfaces được không ạ?
    Em dùng Netbean 6.9.1 và tomcat 6.0.26. Khi chạy thì bình thường, nhưng rich:spacer, hay rich:inputNumberSlider thì báo lỗi :

    javax.servlet.ServletException: Resources framework is not initialised, check web.xml for Filter configuration
    javax.faces.webapp.FacesServlet.service(FacesServlet.java:249)
    org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:393)

    Mong thầy giúp em với!

  14. Võ Văn Hải said

    nó báo rõ rồi mà: bạn coi file web.xml coi có khai báo cái servlet JSF và 1 số cấu hình như trong các bài hướng dẫn không. Chúc thành công!

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: