Khởi đầu với JavaServer Faces 1.2, Phần 1: Xây dựng các ứng dụng cơ bản
Richard Hightower, Giám đốc công nghệ, ArcMind
Tóm tắt: Công nghệ Java™Server Faces (JSF), một khung công tác phía máy chủ
cung cấp một cách tiếp cận dựa vào thành phần để việc phát triển giao diện người
dùng web, đã có từ lâu. JSF 1.2 (kết hợp chặt chẽ trong Java Enterprise Edition 5)
đã sửa chữa một số điểm phiền hà của JSF và thêm vào một số tính năng tốt đẹp.
Loạt bài hướng dẫn này trình bày cách bắt đầu với JSF 1.2 như thế nào. Nó nặng
về các ví dụ và nhẹ về lý thuyết — đúng những gì bạn cần để bắt đầu nhanh
chóng.
Trước khi bạn bắt đầu
Giới thiệu về loạt bài này
Loạt bài hướng dẫn này nói về bước khởi đầu với công nghệ JavaServer Faces
(JSF), một khung công tác thành phần giao diện người dùng phía máy chủ cho các
ứng dụng web dựa trên Java. Loạt bài này dành cho các nhà phát triển, những
người mới bắt đầu tìm hiểu JSF và muốn tiến nhanh — không chỉ với JSF, mà với
cả việc sử dụng các thành phần JSF để giảm công sức. Loạt bài này trình bày chỉ
những điều cốt yếu, với rất nhiều ví dụ.
JSF là một môi trường phát triển GUI khá truyền thống, giống như AWT, SWT,
và Swing. Một trong những lợi ích chính của nó là nó làm cho việc phát triển Web
dễ dàng hơn bằng cách giao những công việc khó khăn cho các nhà phát triển
khung công tác, chứ không phải cho các nhà phát triển ứng dụng. Cứ cho là bản
thân JSF phức tạp hơn nhiều so với các khung công tác Web khác, nhưng sự phức
tạp này được che giấu không để cho các nhà phát triển ứng dụng biết. Phát triển
các ứng dụng Web trong JSF dễ dàng hơn nhiều so với hầu hết các khung công tác
khác: nó đòi hỏi viết mã ít hơn, ít phức tạp hơn, và ít việc cấu hình hơn.
Nếu bạn đang thực hiện phát triển Java phía máy chủ, JSF là khung công tác dễ
nhất để tìm hiểu. Nó được định hướng để tạo các ứng dụng Web (không chỉ là các
trang web). Nó cho phép bạn tập trung vào việc mã hóa Java của bạn mà không
cần đối phó với các đối tượng yêu cầu, các đối tượng phiên, các thông số yêu cầu,
hoặc đối phó với các tệp tin XML phức tạp. Với JSF, nhiều thứ thực hiện nhanh
hơn so với các khung công tác Web Java khác.

Các điều kiện cần trước
Hướng dẫn này được viết cho các nhà phát triển Java với kinh nghiệm ở mức bắt
đầu tới mức trung cấp. Bạn cần phải có hiểu biết chung về cách sử dụng ngôn ngữ
Java, cùng với một số kinh nghiệm phát triển GUI. Các yêu cầu hệ thống
Để chạy các ví dụ trong hướng dẫn này, bạn cần có một môi trường phát triển Java
(JDK) và Maven Apache. Nó giúp để có một IDE Java. Các tệp tin dự án Maven
và các tệp tin dự án trong Eclipse Java EE và Web Tools Project (WTP) được
cung cấp sẵn. Xem Tải về để nhận được mã ví dụ.
JSF dành cho những người mới bắt đầu
Giống như Swing và AWT, JSF là một khung công tác phát triển cung cấp một bộ
các thành phần GUI tiêu chuẩn, có thể dùng lại được, JSF được dùng để xây dựng
các giao diện ứng dụng Web. JSF cung cấp các lợi thế phát triển sau:
 Tách biệt hoàn toàn giữa hành vi và cách trình bày
 Kiểm soát tính có trạng thái (statefulness) ở mức thành phần
 Các sự kiện dễ dàng được liên kết với mã phía máy chủ
 Sử dụng các khái niệm thành phần UI và tầng Web (Web-tier) quen thuộc
 Cung cấp nhiều dụng cụ của nhà sản xuất phần mềm đã tiêu chuẩn hóa
 Sự hỗ trợ IDE tuyệt vời
Một ứng dụng JSF điển hình bao gồm các phần sau đây:
 JavaBeans để quản lý trạng thái và hành vi của ứng dụng
 Các thành phần GUI có trạng thái
 Phát triển hướng sự kiện (thông qua các trình nghe-listener) giống như
trong phát triển GUI truyền thống
 Các trang biểu diễn các khung nhìn theo phong cách Model-View-
Controller (MVC); các trang web tham khảo các gốc khung nhìn (view
roots) thông qua cây thành phần JSF
Bạn sẽ cần phải có khả năng để vượt qua một số các chướng ngại thuộc về khái

o Biến đổi dữ liệu
o Quản lý dẫn hướng trang
Là một kiến trúc dựa trên thành phần, JSF có khả năng cấu hình và mở rộng rất
cao. Hầu hết các chức năng JSF — như dẫn hướng và tìm kiếm các bean-quản lý
— có thể được thay thế bằng các thành phần cắm được. Tính dễ dàng cắm thêm
này mang lại cho bạn sự linh hoạt đáng kể trong việc xây dựng các GUI ứng dụng
Web của bạn và cho phép bạn kết hợp chặt chẽ các công nghệ dựa trên thành phần
khác một cách dễ dàng với các nỗ lực phát triển JSF của bạn. Ví dụ, bạn có thể
thay thế khung công tác có sẵn đảo ngược điều khiển (IoC) của JSF bằng khung
công tác Spring lập trình hướng khía cạnh (aspect-oriented programming -
AOP)/đảo ngược điều khiển đầy đủ tính năng hơn đối với việc tìm kiếm bean quản
lý. Tôi sẽ trình bày nhiều về các tính năng nâng cao ấy trong phần 2. Công nghệ JSF và JSP
Giao diện người dùng của một ứng dụng JSF bao gồm các trang JavaServer Pages
(JSP). Mỗi trang JSP có chứa các thành phần JSF để thể hiện chức năng GUI. Bạn
sử dụng các thư viện thẻ tùy biến JSF bên trong các trang JSP để biểu hiện các
thành phần UI, để đăng ký trình xử lý sự kiện, để kết hợp các thành phần với các
trình duyệt tính hợp lệ (validator), để kết hợp các thành phần với các trình biến đổi
dữ liệu (converter), và nhiều hơn nữa.
JSF không có kiến thức về JSP
JSF không có gì để làm với bản thân JSP. JSF làm việc với JSP thông qua một cầu
nối thư viện thẻ JSP. Tuy nhiên, vòng đời của JSF là rất khác so với vòng đời của
JSP. Facelets phù hợp với JSF hơn nhiều so với JSP vì Facelets đã được thiết kế
với JSF trong tâm trí, trong khi việc kết hợp JSF và JSP luôn luôn giống như bắt
một miếng gỗ hình vuông vào trong một lỗ tròn. Bạn nên suy nghĩ về Facelets; các
tính năng của Facelets sẽ là một phần của JSF 2.0. Xem Tài nguyên để biết thêm
thông tin về Facelets.
Điều đó nói rằng, sự thật là JSF vốn đã không ràng buộc với công nghệ JSP. Trong

Facelets vẫn phù hợp JSF tốt hơn nhiều, và có rất nhiều ý tưởng từ Facelets sắp
được đưa vào trong JSF 2.0.) JSF và MVC
JSF là kết quả của các bài đã học thu được qua nhiều năm phát triển của các kỹ
thuật phát triển Web trên nền tảng Java. Xu hướng này bắt đầu với công nghệ JSP,
cho dù có nhiều ưu điểm, đã làm cho quá dễ dàng trộn lẫn mã Java với mã HTML
(và mã giống như HTML). Bước tiến tiếp theo là kiến trúc Mô hình 1 trong đó các
nhà phát triển đẩy hầu hết mã mặt sau vào trong các thành phần JavaBeans và sau
đó nhập khẩu các thành phần JavaBeans vào các trang Web với thẻ
<jsp:useBean>. Điều này đã hoạt động tốt với các ứng dụng Web đơn giản, nhưng
nhiều nhà phát triển Java không thích kết hợp công nghệ JSP với các đặc tính C++
ví dụ như là lệnh bao gồm (include) tĩnh. Vì vậy, kiến trúc Mô hình 2 đã được giới
thiệu.
Về cơ bản, kiến trúc Mô hình 2 là phiên bản MVC thấp hơn cho các ứng dụng
Web. Trong kiến trúc Mô hình 2, trình điều khiển được thể hiện bằng các servlet
(hoặc các Action) và việc hiển thị được giao cho các trang JSP. Struts của Apache
là một thực thi Mô hình 2 đơn giản hoá, nơi mà các Action thế chỗ các servlet.
Trong Struts, logic của trình điều khiển ứng dụng được tách ra khỏi các dữ liệu
của nó (được biểu diễn bằng ActionForms). Các lời phàn nàn chủ yếu chống lại
Struts là có thể cảm thấy nó có nhiều tính thủ tục hơn hướng đối tượng ("COBOL
cho Web"). WebWork và Spring MVC là hai kiến trúc Mô hình 2 khác để cải tiến
Struts để ít tính thủ tục hơn, nhưng cả hai đều không được chấp nhận rộng rãi như
là Struts. Và cả hai cũng không cung cấp một mô hình thành phần có trạng thái
như JSF đã làm. (Struts 2 được xây dựng bên trên WebWork, và cơ sở mã lệnh
Struts ban đầu đã bị loại bỏ. Ngay cả Struts cũng không muốn).
Vấn đề thực sự với hầu hết các khung công tác Mô hình 2 là ở chỗ mô hình sự
kiện quá đơn giản (chủ yếu là một MVC thu nhỏ nhiều), và nó không có thành
phần GUI có trạng thái, để lại quá nhiều công việc cho nhà phát triển. Một mô

các lớp của trình điều khiển đơn giản không bị ràng buộc chút nào với JSF, làm
cho chúng dễ dàng thử nghiệm hơn. Không giống như một kiến trúc MVC thực
thụ, tầng mô hình JSF ít có khả năng phát ra nhiều sự kiện phải được giải quyết
trong nhiều hơn một cổng nhìn (mặc dù Crank cố gắng thực hiện điều này, với sự
hỗ trợ từ JBoss ajax4JSF; xem Tài nguyên). Một lần nữa, điều này sẽ là không cần
thiết bởi vì bạn đang làm việc với một giao thức phi trạng thái. Sự kiện hệ thống
để thay đổi hoặc cập nhật một khung nhìn hầu như luôn luôn (tôi dám nói luôn
luôn?) là một yêu cầu từ người sử dụng. Các chi tiết về thực thi MVC của JSF
Trong thực thi MVC của JSF, việc ánh xạ beans quản lý sẽ làm trung gian giữa
khung nhìn và mô hình. Vì thế, điều quan trọng là hạn chế logic nghiệp vụ và
logic lâu bền trong các beans quản lý, được gắn với JSF. Một giải pháp thay thế
chung là giao logic nghiệp vụ cho mô hình ứng dụng. Trong trường hợp này, các
bean quản lý cũng ánh xạ với các đối tượng của mô hình, ở nơi khung nhìn có thể
hiển thị chúng (như các thuộc tính của bean quản lý). Tôi có xu hướng tách biệt
beans quản lý của tôi ra thành hai loại: beans quản lý được gắn với JSF (trình điều
khiển) và beans quản lý không được gắn với JSF (các đối tượng mô hình).
Không giống như công nghệ JSP, thực thi của khung nhìn JSF là một mô hình
thành phần có trạng thái. Khung nhìn JSF gồm hai phần gốc khung nhìn (view
root) và các trang JSP. Gốc khung nhìn là một sưu tập các thành phần UI để duy
trì trạng thái của UI. Giống như Swing và AWT, các thành phần JSF sử dụng một
mẫu thiết kế phức hợp để quản lý một cây các thành phần (nói đơn giản: một bộ
chứa chứa các thành phần; một bộ chứa là một thành phần). Trang JSP liên kết các
thành phần UI với các trang JSP và cho phép bạn liên kết các thành phần trường
với các thuộc tính của beans hậu thuẫn (hay đúng hơn là các thuộc tính của thuộc
tính) và liên kết các nút nhấn với trình xử lý sự kiện và các phương thức hành
động.
Hình 1 minh hoạ cấu trúc của một ví dụ ứng dụng (một ứng dụng mà bạn sắp tìm

Xây dựng bằng Maven 2 và WTP Eclipse
Môi trường xây dựng mặc định cho ví dụ ứng dụng Máy tính bỏ túi là Apache
Maven 2. Trong ví dụ này, tôi đã sử dụng một bố trí mặc định cho một ứng dụng
Web Maven. Xem Tài nguyên với các chỉ dẫn và các JAR để chạy mã nguồn của
hướng dẫn này với Eclipse JEE, Tomcat, và Maven 2.
Mục tiêu của ứng dụng Calculator ban đầu là để trình diễn một trang web cho
phép người dùng nhập vào hai số và sau đó cộng hoặc nhân chúng.
Trang này có:
 Một biểu mẫu
 Hai trường văn bản
 Hai nhãn
 Hai vị trí thông báo lỗi
 Hai nút Submit
 Một bảng kết quả
Các trường văn bản dùng để nhập vào các số. Các nhãn dùng để gắn nhãn cho các
trường văn bản. Các vị trí thông báo lỗi dùng để hiển thị thông báo về duyệt tính
hợp lệ hoặc thông báo lỗi biến đổi dữ liệu cho các trường văn bản. Có hai trang
JSP: calculator.jsp và index.jsp, chỉ để chuyển hướng vào calculator.jsp. Một bean
quản lý có tên là Calculator dùng như là mô hình cho calculator.jsp. Ví dụ đơn
giản này hiện không có tầng trình điều khiển nào khác với những cái do JFS cung
cấp. Tạo ứng dụng: Tổng quan
Để xây dựng ứng dụng Calculator đầu tiên trong JSF bạn cần phải:
 Khai báo Faces Servlet và thêm ánh xạ Faces Servlet trong tệp tin web.xml
của bộ mô tả triển khai ứng dụng Web
 Chỉ rõ tệp tin faces-config.xml trong tệp tin web.xml
 Tạo lớp Calculator
 Khai báo bean Calculator trong tệp tin faces-config.xml file

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

Điều này tương tự với hầu hết các bộ mô tả web.xml, ngoại trừ rằng bạn đang
chuyển điều khiển đến servlet JSF để xử lý các yêu cầu thay vì chỉ rõ servlet của
riêng bạn. Tất cả các yêu cầu đến các tệp tin JSP có sử dụng một thẻ <f:view>
(được ứng dụng mẫu sử dụng) phải đi qua servlet này. Vì thế, bạn cần phải thêm
một ánh xạ và chỉ nạp công nghệ JSP có khả năng JSF thông qua ánh xạ đó, như
được hiển thị trong Listing 2:

Listing 2. Ánh xạ đường dẫn servlet Faces trong web.xml

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

Listing 2 báo cho bộ chứa (container) Servlet Faces gửi tất cả các yêu cầu bắt đầu
với /faces/ hoặc kết thúc bằng *.jsf tới servlet Faces để xử lý. Điều này cho phép
JSF khởi tạo bối cảnh Faces và gốc khung nhìn trước khi hiển thị trang JSF. Gốc
khung nhìn có chứa cây thành phần JSF. Bối cảnh Faces là một cách để tương tác
với JSF.
Điều này có nghĩa là để tải ứng dụng Calculator bạn sử dụng
http://localhost:8080/calculator/pages/calculator.jsf hoặc

package com.arcmind.jsfquickstart.model;

/**
* Calculator. Simple POJO.
*
* @author Rick Hightower
*/
public class Calculator {

/** First number used in operation. */
private int firstNumber = 0;

/** Result of operation on first number and second number. */
private int result = 0;

/** Second number used in operation. */
private int secondNumber = 0;

/** Add the two numbers. */
public void add() {
result = firstNumber + secondNumber;
}

/** Multiply the two numbers. */
public void multiply() {
result = firstNumber * secondNumber;
}

/** Clear the results. */
public void clear() {


Listing 3 là đơn giản và không cần giải thích; chỉ cần đọc mã. Tuy nhiên hãy nhớ
rằng POJO Calculator không có gì để làm với JSF. Khai báo bean Calculator trong tệp tin faces-config.xml file
Listing 4 hiển thị toàn bộ tệp tin faces-config.xml. Như bạn có thể nhìn thấy, một
phần lớn của nó chỉ kết hợp tệp tin này với lược đồ Java EE JSF XML. Trong
faces-config.xml, phần tử <managed-bean> được sử dụng để khai báo một bean
mà JSF có thể liên kết tới:

Listing 4. Tệp tin faces-config.xml có chứa khai báo bean quản lý

<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="
xmlns:xsi="
xsi:schemaLocation="

version="1.2">
<managed-bean>
<managed-bean-name>calculator</managed-bean-name>
<managed-bean-class>com.arcmind.jsfquickstart.model.Calculator</managed-
bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

</faces-config>

Khai báo bean trong Listing 4 chỉ rõ tên của bean là — calculator — trong

Listing 6. /src/main/webapp/calculator.jsp

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ taglib uri=" prefix="h"%>
<%@ taglib uri=" prefix="f"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title>Calculator Application</title>
</head>
<body>
<f:view>
<h:form id="calcForm">
<h4>Calculator</h4>
<table>
<tr>
<td><h:outputLabel value="First Number" for="firstNumber" /></td>
<td><h:inputText id="firstNumber"
value="#{calculator.firstNumber}" required="true" /></td>
<td><h:message for="firstNumber" /></td>
</tr>

<tr>
<td><h:outputLabel value="Second Number" for="secondNumber" />
</td>
<td><h:inputText id="secondNumber"
value="#{calculator.secondNumber}" required="true" /></td>
<td><h:message for="secondNumber" /></td>


Lưu ý rằng hầu hết tệp tin này là HTML thuần tuý (chính xác là XHTML). Bạn có
thể sử dụng HTML bên trong các thẻ <f:view>, <h:form>, và <h:panelGroup>.
Thật là hoang đường khi tin rằng bạn không thể kết hợp HTML với các thẻ JSF.
Bạn có thể kết hợp trong nhiều trường hợp. Bạn không thể sử dụng HTML bên
trong <h:commandButton>, Nó chỉ nhận các thành phần khác như là phần tử con
bên trong thân của nó.
Bởi vì trang này khá phức tạp, tôi sẽ chỉ cho bạn cách làm thế nào để từng bước
xây dựng nó. Khai báo thư viện thẻ (taglib)
Bạn hãy bắt đầu bằng cách khai báo các thẻ cho JSF, như hiển thị trong Listing 7:

Listing 7: Nhập các thư viện thẻ vào trong calculator.jsp

<%@ taglib uri=" prefix="h" %>
<%@ taglib uri=" prefix="f" %>