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 docx

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.

Về hướng dẫn này
Hướng dẫn này đi theo một cách tiếp cận cơ bản để phát triển JSF. Bạn sẽ không
sử dụng các công cụ màu mè hay sự hỗ trợ IDE trong hướng dẫn này (mặc dù sự
hỗ trợ sử dụng công cụ là ích lợi chính của JSF). Bạn sẽ thực hiện lập trình bằng
tay không! Tôi đề cập những điểm cốt yếu, với lý thuyết vừa đủ để tiếp tục duy trì
việc trình bày và để cho bạn học tập một cách hiệu quả việc sử dụng JSF để xây
dựng các ứng dụng Web. Bạn có thể ngạc nhiên khi biết rằng JSF lập trình dễ
dàng hơn so với khung công tác Web Java khác, thậm chí không có các công cụ
IDE ưa thích.


Các mục tiêu
Trong hướng dẫn này, bạn nhận được một tổng quan về các tính năng của JSF và
tìm hiểu cách làm thế nào để viết một ứng dụng JSF cơ bản. Bạn xây dựng một
ứng dụng máy tính bỏ túi đơn giản và, tuần tự nhiều lần, cải thiện vẻ ngoài và cảm
nhận của nó, sửa đổi cấu trúc của nó để bổ sung thêm nội xạ phụ thuộc và thực
hiện cơ chế dẫn hướng của JSF. Trong Phần 2, bạn sẽ xây dựng các trình biến đổi
(converter), các bộ duyệt tính hợp lệ, và trình nghe pha (phase-listener) theo yêu
cầu.


Ai nên tìm hiểu hướng dẫn này?
Nếu bạn là người mới bắt đầu tìm hiểu JSF, hướng dẫn này để dành cho bạn. Ngay
cả khi bạn đã sử dụng JSF nhưng chưa thử nghiệm các tính năng JSF 1.2 hoặc chỉ
sử dụng các công cụ GUI để xây dựng các ứng dụng JSF, bạn sẽ có khả năng học
hỏi được rất nhiều từ cả hai hướng dẫn trong loạt bài này.

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

niệm để sử dụng JSF, nhưng làm như vậy cũng đáng công cố gắng. Việc quản lý
trạng thái thành phần của JSF; việc duyệt tính hợp lệ của dữ liệu đầu vào của
người dùng dễ sử dụng; xử lý sự kiện mức chi tiết, dựa trên thành phần; và kiến
trúc mở rộng dễ dàng; tất cả những cái đó sẽ làm đơn giản đáng kể công sức phát
triển web của bạn. Phần này giải thích những tính năng quan trọng nhất trong số
này một cách chi tiết.
Một kiến trúc dựa trên-thành phần
Hãy nghĩ theo cách của các thành phần có trạng thái
Chướng ngại lớn nhất mà bạn có thể gặp phải là bạn đã quên rằng JSF là một mô
hình thành phần có trạng thái. Nếu bạn đã sử dụng Struts từ trước, hãy lặp lại theo
tôi câu này: "JSF không phải là Struts. JSF không phải là Struts". Tôi đã thấy
những người có một nền tảng về GUI của Swing, AWT, Visual Basic, hay Delphi
học JSF nhanh hơn nhiều so với những người đã sử dụng Struts nhiều năm, và
chưa bao giờ thực hiện phát triển thành phần GUI trước đó. Hướng dẫn này được
thiết kế để giúp bạn nghĩ theo cách của các thành phần có trạng thái.
JSF cung cấp các thẻ thành phần cho tất cả các trường đầu vào có sẵn trong
HTML tiêu chuẩn. Bạn cũng có thể viết các thành phần tuỳ biến riêng của bạn cho
các mục đích riêng cho ứng dụng hoặc tổ hợp nhiều thành phần HTML để tạo
thành một phức hợp — ví dụ, một thành phần trình chọn ngày tháng (Data Picker)
có chứa ba danh sách chọn thả xuống. Các thành phần JSF có trạng thái. Tính có
trạng thái của chúng do các khung công tác JSF cung cấp. JSF sử dụng các thành
phần để sinh ra đáp ứng HTML. Nhiều thành phần GUI JSF của bên thứ ba cũng
có sẵn.
JSF bao gồm:
 Một mô hình sự kiện-xuất bản
 Một bộ chứa (container) nhẹ, đảo ngược-điều khiển (IoC)
 Các thành phần cho hầu hết mọi đặc tính GUI phổ biến khác, bao gồm
(nhưng không hạn chế):
o Công cụ biểu hiện (rendering) cắm chạy được
o Trình duyệt tính hợp lệ phía máy chủ

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

thực tế, các thẻ JSF được các trang JSP sử dụng chỉ để tham khảo các thành phần
sao cho chúng có thể được hiển thị. Các thành phần có một vòng đời khác với các
trang JSP.
Bạn sẽ thấy rõ điều này lần đầu tiên khi bạn sửa đổi một trang JSP để thay đổi các
thuộc tính của một thành phần JSF và nạp lại trang và không có điều gì xảy ra.
Đó là do thẻ này tìm kiếm thành phần trong trạng thái hiện tại của nó. Nếu thành
phần đã tồn tại, thẻ tuỳ biến không thay đổi trạng thái của nó. Mô hình thành phần
cho phép mã của trình điều khiển của bạn thay đổi một trạng thái của thành phần
(ví dụ, vô hiệu một trường văn bản), và khi khung nhìn đó được hiển thị, trạng thái
hiện tại của cây thành phần của bạn được hiển thị.
Một ứng dụng JSF điển hình không cần phải có mã Java và có rất ít mã ngôn ngữ
biểu thức phổ quát (JSTL EL) trong UI. Như tôi đã lưu ý trước đó, có rất nhiều
công cụ IDE để xây dựng và hợp dịch các ứng dụng trong JSF, và có một thị
trường của bên thứ ba cho các thành phần GUI của JSF. Cũng có khả năng viết mã
JSF mà không sử dụng các công cụ WYSIWYG (như bạn sẽ làm trong hướng dẫn
này), mặc dù JSF đã được thiết kế với các công cụ WYSIWYG IDE trong tâm trí.
Chúng ta không cần sự hỗ trợ khó chịu của IDE WYSIWYG
Mặc dù JSF đã được thiết kế với sự hỗ trợ IDE WYSIWYG trong tâm trí, bạn
không cần phải sử dụng sự hỗ trợ IDE WYSIWYG để có được các lợi ích của JSF.
Trong thực tế, JSF vẫn còn dễ sử dụng hơn nhiều hơn so với hầu hết các khung
công tác Web Java ngay cả khi bạn viết mã nó bằng tay. Nếu bạn lập trình trong
Swing, và bạn sử dụng một IDE WYSIWYG, thì nhiều khả năng bạn sẽ sử dụng
một công cụ như vậy với JSF. Nếu bạn thích viết mã Swing bằng tay hơn, bạn
cũng sẽ thích mã hóa JSF bằng tay. Đó là lập trình tay không!
Các cải tiến trong JSP 1.2 và JSF 2.1
JSP 2.1 thêm nhiều tính năng mới để hỗ trợ JSF, bao gồm API ngôn ngữ biểu thức
phổ quát (EL) mà JSF 1.2 cũng bổ sung thêm vào. Với các thẻ JSTL tiêu chuẩn,
bây giờ bạn có thể lặp qua một danh sách và biểu hiện các thành phần JSF, điều
mà JSF 1.1 và JSP 2.0 không thể làm. Xem Tài nguyên để biết thêm chi tiết về các
thay đổi đã được thực hiện trong JSP 2.1. (Ngay cả với những cải tiến này,

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ô

hình thành phần và sự kiện phong phú hơn sẽ làm cho dễ dàng tạo ra các loại
tương tác mà hầu hết người dùng mong đợi. Cũng giống như công nghệ JSP, hầu
hết các khung công tác của Mô hình 2 cũng làm cho quá dễ dàng trộn lẫn bố trí và
định dạng HTML với các thẻ tùy biến GUI, hoạt động hơi giống như các thành
phần, ngoại trừ là chúng không có trạng thái. Và một số kiến trúc Mô hình 2 (như
Struts kinh điển) phạm lỗi tách biệt hành vi với trạng thái, đã mang lại cho nhiều
nhà phát triển Java cảm giác như họ đang lập trình COBOL.


Một môi trường MVC phong phú hơn
JSF không phải là Struts; hãy trút hết cốc của bạn để bạn có thể đổ đầy nó
JSF không phải là một khung công tác Mô hình 2. Nó có nhiều hơn thế. Nhiều
người tin rằng do tác giả ban đầu của Struts đã là người lãnh đạo đặc tả kỹ thuật
JSF, nên các kỹ năng Struts có thể được sử dụng trên một dự án JSF. Đừng cố
gắng lập trình JSF giống như Struts. Bạn cần phải từ bỏ một số kỹ năng Struts của
bạn và học các kỹ năng JSF.
JSF cung cấp một mô hình thành phần và một môi trường MVC phong phú —
phong phú hơn nhiều khung công tác Mô hình 2. JSF gần gũi hơn nhiều với một
môi trường lập trình MVC thực thụ hơn là gần kiến trúc Mô hình 2, mặc dù nó vẫn
đang được xây dựng bên trên một giao thức không trạng thái. JSF cũng tạo thuận
lợi cho việc xây dựng các GUI hướng sự kiện, mức chi tiết mịn hơn so với các
khung công tác Mô hình 2. Trong khi JSF cung cấp cho bạn một số đông các tùy
chọn sự kiện — mục trình đơn được chọn, nút ấn được nhấn, nút cây được mở
rộng, — hầu hết các Mô hình 2 chỉ dựa trên một sự kiện đơn giản là "đã nhận
được yêu cầu."
Mô hình sự kiện tinh chỉnh được của JSF cho phép các ứng dụng của bạn ít bị ràng
buộc với các chi tiết HTTP và làm đơn giản nỗ lực phát triển của bạn. JSF cũng
cải tiến một chút kiến trúc Mô hình 2 truyền thống bằng cách làm dễ dàng hơn
việc di chuyển logic trình bày và logic nghiệp vụ ra ngoài trình điều khiển của
bạn, và di chuyển logic nghiệp vụ ra khỏi các trang JSP của bạn. Trong thực tế,

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

hiểu chi tiết!) theo một quan điểm của MVC:

Hình 1. Ứng dụng mẫu từ một phối cảnh MVC

Nếu phần đầu tiên này về JSF đã làm bạn phải lắc đầu một chút cũng đừng lo lắng:
bạn đã vượt qua lúc khó khăn nhất. Đi sâu vào khung công tác về mặt khái niệm
của JSF là đã qua được hơn một nửa cuộc chiến với việc thực hiện công nghệ này
— và bạn sẽ sớm thấy rằng nó cũng đáng công khó nhọc. Nhưng lý thuyết thế là
đủ: chúng ta hãy tay không đi viết vài đoạn mã!
Một ví dụ JSF: Dần từng bước một
Phần này tập trung vào quá trình từng bước tạo ra một ứng dụng trong JSF. Ví dụ
ứng dụng là một phần mềm máy tính bỏ túi (Calculator) đơn giản để giải thích các
khía cạnh sau đây của việc sử dụng công nghệ JSF:
 Làm thế nào để bố trí một ứng dụng JSF để triển khai
 Làm thế nào để cấu hình một tệp tin web.xml cho JSF
 Làm thế nào để cấu hình một tệp tin faces-config.xml cho một ứng dụng
 Viết bean quản lý (còn gọi là các đối tượng mô hình và các trình điều
khiển)
 Xây dựng khung nhìn bằng cách sử dụng công nghệ JSP
 Sử dụng các thư viện thẻ tùy biến để xây dựng cây thành phần trong gốc
khung nhìn
 Mặc định duyệt tính hợp lệ của các trường biểu mẫu
Trong phần tiếp theo, bạn sẽ cải tiến ứng dụng qua một số lần lặp đi lặp lại và làm
cho nó hiểu JSF nhiều hơn. Hình 2 cho thấy một khung nhìn có chú thích của
phiên bản cuối cùng của ví dụ ứng dụng máy tính bỏ túi sẽ trông như thế nào. Xem
Tải về để lấy mã nguồn ứng dụng.

Hình 2. Ứng dụng Máy tính bỏ túi, bản cuối cùng

Ứng dụng Calculator (Máy tính bỏ túi)

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

 Tạo trang index.jsp
 Tạo trang calculator.jsp
Ứng dụng sử dụng cách bố trí thư mục sau:
+ src
+ main
+ java
+ webapp
+ pages
+ WEB-INF
+ lib

Mã Java ở trong src/main/java/. Tệp tin web.xml ở trong thư mục
src/main/webapp/WEB-INF. Tệp tin cấu hình JSF cũng nằm trong thư mục
src/main/webapp/WEB-INF. Ví dụ ứng dụng đã được tạo ra với IDE Eclipse cho
các nhà phát triển Java EE (Eclipse JEE), trong đó bao gồm một trình thủ thuật tạo
dự án JSF để tạo tệp tin web.xml và tệp tin faces-config.xml có các mục đúng đắn.
Tôi giả sử rằng bạn sẽ sử dụng một máy chủ ứng dụng hỗ trợ Java EE 5, có nghĩa
là, có các tệp tin JSF và JSTL JAR. Xem Tài nguyên để tìm các chỉ dẫn cho việc
thiết lập Tomcat để chạy JSF, thiết lập Eclipse JEE để chạy Tomcat 6, và chạy các
ví dụ với Maven 2.


Khai báo servlet Faces và ánh xạ servlet
Để sử dụng Servlet Faces, trước hết bạn cần phải cài đặt nó trong tệp tin web.xml
của bạn, như được hiển thị trong Listing 1:

Listing 1. Khai báo Servlet Faces trong web.xml

<servlet>
<servlet-name>Faces Servlet</servlet-name>

<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

http://localhost:8080/calculator/faces/pages/calculator.jsp — không phải
http://localhost:8080/calculator/pages/calculator.jsp. Nếu bạn nạp trang JSP bên
ngoài bối cảnh JSF, JSF sẽ không có cơ hội để khởi tạo các bối cảnh Faces hoặc
gốc khung nhìn.


Chỉ rõ tệp tin faces-config.xml file
Nếu bạn đặt tên tệp tin cấu hình Faces của bạn là faces-config.xml và đặt nó vào
trong thư mục WEB-INF của các ứng dụng Web của bạn, thế thì Servlet Faces
chọn nó và sử dụng nó tự động (vì đó là mặc định). Một cách khác, bạn có thể nạp
một hoặc nhiều tệp tin cấu hình ứng dụng thông qua một tham số khởi tạo —
javax.faces.application.CONFIG_FILES — trong tệp tin web.xml của bạn với một
danh sách các tệp tin được phân cách bằng dấu phẩy như là phần thân. Nhiều khả
năng bạn sẽ sử dụng phương thức tiếp cận thứ hai cho tất cả, trừ các ứng dụng JSF
đơn giản nhất. Bởi vì ví dụ ứng dụng là đơn giản, hãy sử dụng vị trí tệp tin faces-
config.xml mặc định ở /src/main/webapp/WEB-INF.


Tạo lớp Calculator
Bây giờ bạn sẽ tạo một POJO (plain old Java object - đối tượng thuần Java) được
gọi là Calculator không bị trói buộc tý nào với JSF, và sau đó liên kết nó với JSF
bằng các liên kết phương thức và các liên kết thuộc tính. Lớp đơn giản này, có hai
thuộc tính: firstNumber và secondNumber.
Mục tiêu của tôi là giải thích cách làm thế nào để bắt đầu với JSF, vì vậy tôi vẫn
duy trì đối tượng mô hình rất đơn giản. Mô hình của ứng dụng này được chứa bên
trong một đối tượng mô hình, như hiển thị trong Listing 3. Sau đó bạn sẽ phân
chia nó thành hai lớp: trình điều khiển và mô hình.

Listing 3. POJO Calculator

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() {

result = 0;
}

/* properties */

public int getFirstNumber() {
return firstNumber;
}

public void setFirstNumber(int firstNumber) {
this.firstNumber = firstNumber;
}

public int getResult() {
return result;
}

public void setResult(int result) {
this.result = result;
}

public int getSecondNumber() {
return secondNumber;
}

public void setSecondNumber(int secondNumber) {
this.secondNumber = secondNumber;
}

}

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

<managed-bean-name>. Nó chỉ rõ tên lớp phân biệt đầy đủ trong <managed-bean-
class>. Lớp phải có một hàm tạo (constructor) không có đối số.
<managed-bean-scope> của phần tử <managed-bean> chỉ rõ nơi JSF có thể tìm
thấy bean: đó là phạm vi yêu cầu. Điều này được thực hiện thông qua JSF và API
EL phổ quát. Phạm vi yêu cầu chỉ sẵn sàng cho một yêu cầu mà thôi. Đó là một vị
trí tốt để đặt bean mà không cần phải duy trì trạng thái giữa các khung nhìn trang.


Tạo trang index.jsp
Mục đích của trang index.jsp trong ứng dụng Calculator là để đảm bảo rằng trang
calculator.jsp nạp vào trong bối cảnh JSF sao cho có thể tìm thấy gốc khung nhìn
tương ứng. Listing 5 hiển thị trang index.jsp:

Listing 5. Trang index, chuyển hướng đến calculator.jsp

<jsp:forward page="/faces/calculator.jsp" />

Toàn bộ công việc mà trang này làm là chuyển hướng người dùng tới
calculator.jsp trong bối cảnh Web faces. Điều này đặt trang calculator.jsp trong
đường dẫn bối cảnh JSF, nơi nó có thể tìm thấy gốc khung nhìn của nó.


Tạo trang calculator.jsp
Trang calculator.jsp là trung tâm của khung nhìn của ứng dụng Calculator. Trang
này sẽ nhận hai số do người dùng nhập vào, như được hiển thị trong Hình 3:

Hình 3. Ứng dụng Calculator đầu tiên đang chạy trong Eclipse JEE/WTP

Toàn bộ mã lệnh cho trang này nằm trong Listing 6:

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>

</tr>
</table>
<div>

<h:commandButton action="#{calculator.add}" value="Add" />
<h:commandButton action="#{calculator.multiply}" value="Multiply" />
<h:commandButton action="#{calculator.clear}" value="Clear"
immediate="true"/>
</div>

</h:form>

<h:panelGroup rendered="#{calculator.result != 0}">
<h4>Results</h4>
<table>
<tr><td>
First Number ${calculator.firstNumber}
</td></tr>
<tr><td>
Second Number ${calculator.secondNumber}
</td></tr>
<tr><td>
Result ${calculator.result}
</td></tr>
</table>
</h:panelGroup>
</f:view>

</body>
</html>

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" %>