Võ Văn Hải's blog

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

Làm việc với JSF trong Eclipse Ganymede

Trong bài viết này tôi sẽ hướng dẫn cho bạn cách làm việc với JSF trong Eclipse Ganymede.

Chúng ta cần các bước sau để hoàn tất công việc:

  1. Đăng ký thư viện JSF
  2. Tạo Dynamic Web Project
  3. Thêm JSF Facet vào Web project
  4. Tạo trang JSP theo templates
  5. Định nghĩa các qui tắc di chuyển giữa các trang.
  6. Tạo managed beans
  7. Hiệu chỉnh trang JSF trong Web Page Editor
  8. Triển khai và thực thi ứng dụng JSF.

Đăng ký thư viện JSF:

https://vovanhai.files.wordpress.com/2008/10/register-jsf-libraries.gif

Tạo Dynamic Web Project

Vào menu File, chọn New->Dynamic Web Project (nếu không có thì chọn New->Project, mở rộng mục Web, chọn Dynamic Web Project).
Đặt tên là FirstJSFProject.

Thêm JSF Facet vào Web project

Ở mục Configuration, nhấn nút modify, cấu hình các chọn lựa như hình
https://vovanhai.files.wordpress.com/2008/10/jsf1_01.png
Có thể đặt tên khác bằng cách nhấn nút “Save As” rồi gõ vào tên khác.
Nhấn Next 2 lần ta được hình sau
https://vovanhai.files.wordpress.com/2008/10/jsf1_02.png
Đảm bảo check vào 2 chọn lựa jbossJSF và jstl như hình

Nhấn Finish.

Tạo trang JSP theo templates

Nhấn phải chuột lên Project, chọn New->JSP(Nếu không có thì chọn New->Others, mở rộng mục Web, chọn JSP).
Đặt tên là addCustomer.jsp, nhấn Next, chọn mẫu “New JSP File (html)” như hình
https://vovanhai.files.wordpress.com/2008/10/jsf1_03.png
Nhấn Finish.
Thêm tiếp một trang giống như các bước vừa rồi, đặt tên là listCustomers.jsp

Định nghĩa các qui tắc di chuyển giữa các trang

Trong “Project Explorer”, mở rộng mục Web Content\WEB-INF, double lick lên file faces-config.xml để hiệu chỉnh nó. Kết quả như hình sau:
https://vovanhai.files.wordpress.com/2008/10/jsf1_04.png.
Nhấn nút Start, Các bước sau đó làm như hình sau
https://vovanhai.files.wordpress.com/2008/10/define-page-navigations-rules.gif

Tạo managed beans

Chọn mục manage bean như hình
https://vovanhai.files.wordpress.com/2008/10/jsf1_05.png
Chọn kiểu Session, Nhấn nút Add.

Ở cửa sổ tiếp theo, chọn “Create a new Java class“. Nhấn Next, đặt tên cho package là vovanhai.com.web, đặt tên lớp là CustomerBean. Nhấn Next để xem lại các chọn lựa. Nhấn Finish để kết thúc việc tạo bean. Lưu file faces-config.xml và đóng nó lại.

Trong cửa sổ Project Explorer, mở lớp CustomerBean.java vừa tạo lên, nhập đoạn code sau:

package vovanhai.com.web;

public class CustomerBean {
private int id;
private String name;

public CustomerBean() {
this.id = 0;
this.name = “no-name”;
}
public CustomerBean(int id, String name) {
this.id = id;
this.name = 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;
}
public String add(){
return “success”;
}
}

Hiệu chỉnh trang JSF trong Web Page Editor

Nhấn chuột phải lên tập tin addCustomer.jsp, chọn Open With->Web Page Editor. Sau đó hiệu chỉnh nó như hình sau
https://vovanhai.files.wordpress.com/2008/10/edit-jsf-pages-in-the-web-page-editor-1.gif

Nhấn chuột phải lên tập tin listCustomer.jsp, chọn Open With->Web Page Editor. Hiệu chỉnh nó
https://vovanhai.files.wordpress.com/2008/10/edit-jsf-pages-in-the-web-page-editor-2.gif

Triển khai và thực thi ứng dụng JSF

Nhấn phải chuột lên tập tin addCustomer.jsp, chọn Run As->Run on Server, chọn JBoss4.2, kết quả:
https://vovanhai.files.wordpress.com/2008/10/jsf1_06.png

Chúc thành công!

15 Responses to “Làm việc với JSF trong Eclipse Ganymede”

  1. hthth said

    Sao cai Eclipse cua ban ho tro nhieu thu vay (design form, design xml…) toi download ban full for J2EE ma dau co duoc nhu the !!! Hay la ban co dung them plugin ? (neu co thi no la free hay la buy vay !!!)

  2. vovanhai said

    Không có cái gì mua hết. Mọi thứ đều là FREE. Chú ý khi mở 1 trang jsf, thay vì double click, bạn nhấn phải chuột lên trang cần mở, chọn Open With->Web Page Editor. Ngoài ra còn có nhiều thứ cho bạn chọn đấy.

  3. moi thu deu la free nhung khi minh lam ra san pham thi co tien day >Do la tay khong bat giac day.???

  4. Hoang Khoa said

    “customerBean” trong
    /h:inputText>

    thì không được viết hoa chữ đầu, có phải do nó là một instance của lớp “CustomerBean” không anh?

  5. vovanhai said

    tên là do mình đặt mà!

  6. dung said

    neu xay ra bao loi la: customerBean cannot be resolved thi lam the nao?

  7. Chào Thầy, em làm giống như hướng dẫn của thầy nhưng bị báo lỗi

    HTTP Status 500 –

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

    type Exception report

    message

    description The server encountered an internal error () that prevented it from fulfilling this request.

    exception

    javax.servlet.ServletException: /addCustomer.jsp(15,43) ‘#{CustomerBean.id}’ Target Unreachable, identifier ‘CustomerBean’ resolved to null
    javax.faces.webapp.FacesServlet.service(FacesServlet.java:277)

    root cause

    org.apache.jasper.el.JspPropertyNotFoundException: /addCustomer.jsp(15,43) ‘#{CustomerBean.id}’ Target Unreachable, identifier ‘CustomerBean’ resolved to null
    org.apache.jasper.el.JspValueExpression.getType(JspValueExpression.java:61)
    com.sun.faces.renderkit.html_basic.HtmlBasicInputRenderer.getConvertedValue(HtmlBasicInputRenderer.java:92)
    javax.faces.component.UIInput.getConvertedValue(UIInput.java:942)
    javax.faces.component.UIInput.validate(UIInput.java:868)
    javax.faces.component.UIInput.executeValidate(UIInput.java:1072)
    javax.faces.component.UIInput.processValidators(UIInput.java:672)
    javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
    javax.faces.component.UIForm.processValidators(UIForm.java:235)
    javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
    javax.faces.component.UIViewRoot.processValidators(UIViewRoot.java:700)
    com.sun.faces.lifecycle.ProcessValidationsPhase.execute(ProcessValidationsPhase.java:76)
    com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
    com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118)
    javax.faces.webapp.FacesServlet.service(FacesServlet.java:265)

    note The full stack trace of the root cause is available in the Apache Tomcat/6.0.20 logs.

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

    Em mới học JSF nên làm step by step như thầy. Em cảm ơn thầy.

  8. Em fix được rùi, cảm ơn thầy.

  9. dung said

    thầy ơi, em mới học java về JSF,Bean.
    em gặp phải lỗi này mà không biết làm thế nào!

    Trong lớp Bean của em có hàm SearchByID()
    Trong Trang JSF: searchByID của em có viết là:

    Trong faces-config.xml:

    navigation-rule>
    /pages/searchById.jsp

    #{temp.searchById}
    /pages/view.jsp

    Trang view.jsp

    String id = request.getParameter(“id”);
    Object refFacade = Services.getLocalService(“AFacadeImpl/remote”);
    AFacadeRemote aFacadeRemote =(AFacadeRemote) PortableRemoteObject.narrow(refFacade,AFacadeRemote.class);
    A a = AFacadeRemote.findById(id);

    rồi hiển thị ra thông tin cua a;

    Lỗi của em phát sinh như sau:

    sau khi nhập id vao inputText, em click vao button Search thì báo lỗi là:

    javax.servlet.ServletException
    javax.faces.webapp.FacesServlet.service(FacesServlet.java:256)
    java.lang.NullPointerException
    userBean.Bean.searchById(Bean.java:102)
    sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    java.lang.reflect.Method.invoke(Method.java:585)
    org.apache.el.parser.AstValue.invoke(AstValue.java:172)
    org.apache.el.MethodExpressionImpl.invoke(MethodExpressionImpl.java:276)
    org.apache.jasper.el.JspMethodExpression.invoke(JspMethodExpression.java:68)
    javax.faces.component.MethodBindingMethodExpressionAdapter.invoke(MethodBindingMethodExpressionAdapter.java:77)
    com.sun.faces.application.ActionListenerImpl.processAction(ActionListenerImpl.java:91)
    javax.faces.component.UICommand.broadcast(UICommand.java:383)
    javax.faces.component.UIViewRoot.broadcastEvents(UIViewRoot.java:447)
    javax.faces.component.UIViewRoot.processApplication(UIViewRoot.java:752)
    com.sun.faces.lifecycle.InvokeApplicationPhase.execute(InvokeApplicationPhase.java:97)
    com.sun.faces.lifecycle.LifecycleImpl.phase(LifecycleImpl.java:251)
    com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:117)
    javax.faces.webapp.FacesServlet.service(FacesServlet.java:244)
    Em không biết sửa như thế nào! và lỗi ở đâu, em không thể Search được!

    Thưa thầy,đây là lỗi gì và em phải sửa lỗi này thế nào ạ!

  10. vovanhai said

    Lỗi NullPointerException, có lẽ là khi em lookup service AFacadeImpl/remote. Em xem lại việc lookup của em có đúng không!

  11. Xuân Anh said

    Em chào thầy ạ ! Em đang tìm hiểu về JSF !
    Thầy cho em hỏi ! Khi kết nối CSDL với JSF thì ta code trực tiếp bằng ngôn ngữ JSP trên .jsp hay code trên các file JavaBeans ạ !
    E cám ơn thầy

  12. hoi ve JSF said

    em chao thay a!
    Thay oi cho em hoi 2 van de:
    1. Khi em tạo trang JSF thì có báo lỗi : can not find the tag library uri=”http://java.sun.com/jsf/html”
    2. Khi em run file addCustomer, sau kh sau khi chọn Jboss 4.2, chon tiếp NEXT thì có cảnh báo: Missing classpath entry \your_server_root\appservers\jboss\bin\run.jar.
    hiện trên máy, em đã thiết lập các biến môi trường rồi ạ.( hiện em đang chạy trên win 7

  13. Nguyen Tan said

    Ban browse den package jboss4.2.3 se deploy duoc do.

  14. Hieu said

    Thầy cho em hỏi, em bị cái lỗi là lúc run web rồi mà nó ko chịu hiện message mà nó hiện theo kiểu này #{msg.prompt} #{personBean.personName} mà em ko biết phải sửa như thế nào cả. Trong khi cái msg là biến em reference tới resource messages.properties, còn personBean thì là bean của em. ko hiểu sao hiển thị lên mà nó ko chịu hiển thị ra T_T

  15. Võ Văn Hải said

    bạn coi thử cái thuộc thính isELignore của directive page có bị bật lên là true khô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: