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:

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

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

Đả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

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:
.
Nhấn nút Start, Các bước sau đó làm như hình sau

Tạo managed beans

Chọn mục manage bean như hình

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

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ó

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ả:

Chúc thành công!