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

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ả

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

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

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

 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

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

Đ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

Đ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

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

public int getResult() {

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

<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

name> Nó chỉ rõ tên lớp phân biệt đầy đủ trong class> Lớp phải có một hàm tạo (constructor) không có đối số

<managed-bean-<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="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Calculator Application</title>

<h:commandButton action="#{calculator.add}" value="Add" />

<h:commandButton action="#{calculator.multiply}" value="Multiply" /> <h:commandButton action="#{calculator.clear}" value="Clear"

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="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

Listing 7 báo cho máy JSP biết rằng bạn muốn sử dụng cả hai thư viện thẻ JSF là html và lõi (core) Thư viện thẻ html chứa tất cả các thẻ để làm việc với các biểu mẫu và các mục HTML đặc thù khác Thư viện thẻ lõi có chứa tất cả các thẻ logic, duyệt tính hợp lệ, trình điều khiển, và các thẻ đặc thù cho JSF

Thẻ <f:view>

Sau khi bạn đã trình bày một trang dưới dạng HTML bình thường, bạn muốn thông báo cho hệ thống JSF rằng bạn sắp sử dụng JSF để quản lý các thành phần của bạn Bạn làm điều này bằng cách sử dụng thẻ <f:view> để thông báo cho bộ chứa rằng bạn đang sử dụng JSF để quản lý các thành phần bên trong nó

Nếu không có <f:view>, JSF không thể xây dựng cây thành phần và sau đó không thể tìm kiếm cây thành phần đã tạo ra Sử dụng thẻ <f:view> như được hiển thị trong Listing 8:

Listing 8 Thẻ <f:view> của calculator.jsp

Bên trong <f:view>: Thẻ <h:form>

Dòng thứ hai trong Listing 8 là thẻ <h:form> để nói cho JSF biết rằng bạn muốn

có một biểu mẫu HTML ở đây Trong giai đoạn hoàn trả, các thành phần nằm trong thành phần biểu mẫu được tìm kiếm và được yêu cầu tự hoàn trả và thế là chúng tạo ra HTML tiêu chuẩn ở đầu ra Bạn có thể bố trí các thành phần biểu mẫu theo bất cứ cách nào bạn muốn Listing 9 là cách bố trí cho trường đầu vào của ứng dụng Calculator:

Listing 9 Bên trong thẻ <h:form> của calculator.jsp: Các trường đầu vào

có thể sử dụng với JSF phiên bản 1.1 và cao hơn và nó sẽ là một phần của JSF 2.0)

Trong Listing 9 lưu ý rằng cả hai trường inputText sử dụng một biểu thức có giá trị kiểu JSF EL (JavaServer Faces Expression Language – ngôn ngữ biểu thức JSF) làm giá trị cho thuộc tính value (ví dụ, value="#{calculator.firstNumber}") Lúc đầu, điều này trông rất giống JSTL EL Tuy nhiên, trên thực tế mã EL phổ quát kết hợp các trường với các giá trị tương ứng của các thuộc tính của bean phía sau Sự kết hợp này là phản xạ (hai chiều); có nghĩa là, nếu firstNumber đã là 100, thì sẽ hiện lên 100 khi biểu mẫu được hiển thị Tương tự, nếu người dùng đã đệ trình một giá trị hợp lệ như là 200, thì 200 sẽ là một giá trị mới của đặc tính

firstNumber (giả thiết đã qua phép biến đổi và phép duyệt tính hợp lệ, mà bạn sẽ tìm hiểu thêm về sau)

Ngoài các trường này, calcForm được kết hợp với hai hành động bằng cách sử dụng ba commandButtons, như được hiển thị trong Listing 10:

Listing 10 Bên trong thẻ <h:form> của calculator.jsp: Các nút nhấn

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

Về các phiếu định kiểu (stylesheets)

Vẻ ngoài và cảm nhận của tất cả các thành phần JSF được khai báo thông qua các lớp phiếu định kiểu Mỗi thành phần có một thuộc tính kiểu dáng (style) để kết hợp với các định nghĩa kiểu dáng nội dòng, và một styleClass để kết hợp thành phần này với một lớp styleSheet <panelGrid>, mà bạn sẽ sử dụng trong phần kế tiếp của hướng dẫn này, cũng có các thuộc tính kiểu dáng để kết hợp các kiểu dáng cho các hàng và các cột Trong phần đó, bạn sẽ sử dụng Cascading Style Sheets (CSS) với JSF

Trong Listing 10 mã lệnh liên kết ba nút nhấn tới các phương thức add(),

multiply(), và clear() của lớp calculator , sao cho khi nhấn vào một nút, sẽ gọi ra phương thức tương ứng của nó (giả định rằng việc duyệt tính hợp lệ và biến đổi được thực hiện thành công)

Theo mặc định, JSF duyệt tính hợp lệ của biểu mẫu trước khi thực hiện bất kỳ một phương thức nào (như add() hoặc multiply()) Tuy nhiên, nếu bạn sử dụng thuộc tính immediate="true", như Listing 10 thực hiện cho nút Clear, thì JSF bỏ qua pha duyệt tính hợp lệ và thực hiện ngay phương thức đó mà không cần duyệt tính hợp

lệ của biểu mẫu (ít nhiều là như thế — chi tiết hơn sẽ trình bày sau)

Xem kết quả: Thẻ <h:panelGroup>

Cuối cùng, trong thẻ <f:view> bạn hiển thị các kết quả của các phép tính cộng và nhân với một <h:panelGroup>, như trong Listing 11:

Listing 11 Hiển thị kết quả

<h:panelGroup rendered="#{calculator.result != 0}">

<h:panelGroup> có một biểu thức được hoàn trả, như mọi thành phần JSF đều có

Do đó, phần kết quả chỉ xuất hiện nếu biểu thức calculator.result != 0 là đúng Vì

lý do này, khi những người sử dụng lần đầu tiên nạp trang calculator.jsp, phần này

sẽ không hiển thị Khi họ nhập vào các giá trị, phần kết quả sẽ hiển thị (miễn là các kết quả khác không) (Vấn đề với biểu thức này là ở chỗ nó đặt logic trong khung nhìn Và, điều gì sẽ xảy ra nếu bạn muốn người sử dụng có khả năng nhập vào 0 + 0 (hay 7 * 0) và hiển thị kết quả? Bạn sẽ sửa lỗi này ở phần sau trong hướng dẫn này.)

Chạy ứng dụng

Struts có dễ hơn JSF không?

Tôi đánh giá rằng cần phải nỗ lực ít nhất gấp đôi để tạo ra một phiên bản Struts kinh điển đơn giản cho ứng dụng JSF đơn giản mà bạn xây dựng ở đây Khi sử dụng Struts, bạn sẽ cần có hai lớp hành động cho hai nút, mỗi cái yêu cầu một tập các ánh xạ hành động riêng của mình Bạn cũng cần phải có một ánh xạ hành động

để nạp trang đầu tiên, ít nhất giả định rằng bạn đã làm theo khuyến nghị Mô hình

2 Để bắt chước việc duyệt tính hợp lệ mặc định và việc xử lý lỗi mặc định của JSF bạn phải đặt cấu hình Struts để sử dụng khung công tác của trình duyệt tính hợp lệ (validator) hoặc thực hiện công việc tương đương trong phương thức duyệt tính hợp lệ của một ActionForm Bạn cũng cần phải khai báo một

DynaValidatorForm trong cấu hình Struts, hoặc tạo một ActionForm và viết đè lên phương thức duyệt tính hợp lệ của nó, hoặc sử dụng các lớp con (subclass) của ValidatorForm với các móc nối vào khung công tác của trình duyệt tính hợp lệ Và cuối cùng, có lẽ bạn sẽ cần phải cấu hình một vài chuyển tiếp (có thể là hai tập hợp cho mỗi hành động) hoặc chuyển tiếp toàn cục để cho tất cả các hành động sử dụng Khai báo “lớp bạn bè” không cho phép các “bạn bè” sử dụng Struts kinh điển trên các ứng dụng mới

Để chạy ứng dụng này, hãy vào trang web nơi tệp tin WAR được ánh xạ (trên máy tính của tôi đó là http://localhost:8080/calculator0/) Việc này làm cho tệp tin index.jsp nạp trang calculator.jsp dưới bối cảnh JSF Nếu bạn đang sử dụng WTP Eclipse và bạn đã thiết lập máy chủ, bạn nhấn chuột phải vào trang calculator.jsp

trong Navigator và chọn tùy chọn Run As > Run On Server

Nếu bạn nhập một số dữ liệu văn bản không hợp lệ (ví dụ, abc) hoặc vào trong trường First Number hoặc vào trong trường Second Number và gửi đi, bạn sẽ được đưa quay lại khung nhìn /calculator.jsp, và một thông báo lỗi được hiển thị bên cạnh trường tương ứng Nếu bạn để lại một trong hai trường rỗng và gửi đi, bạn cũng sẽ được đưa quay lại khung nhìn /calculator.js, và một thông báo lỗi sẽ được hiển thị bên cạnh trường tương ứng Vì vậy, bạn có thể thấy rằng một số việc duyệt tính hợp lệ gần như là chạy tự động trong JSF chỉ cần chỉ rõ các trường là phải được điền vào và liên kết các trường này với thuộc tính int Hình 4 chỉ ra cách ứng dụng đối phó với các lỗi duyệt tính hợp lệ và biến đổi dữ liệu như thế nào:

Hình 4 Các lỗi duyệt tính hợp lệ và lỗi biến đổi dữ liệu

Lưu ý các thông báo lỗi khó hiểu Các thông báo lỗi mặc định đối với biến đổi dữ liệu và các giá trị phải điền không thân thiện với người dùng lắm:

 calcForm:firstNumber: 'abc' phải là một con số nằm giữa -2147483648 và

Cải thiện ví dụ Calculator

Trong phần này, bạn sẽ cải thiện hình thức của ứng dụng Calculator và làm đơn giản nó bằng cách sử dụng các kỹ thuật JSF Bạn sẽ tìm hiểu cách làm thế nào để

sử dụng CSS, thiết lập các thông báo quốc tế hóa (I18N), và cải thiện vẻ ngoài và cảm nhận của ứng dụng theo nhiều cách khác Bạn cũng cải thiện thông báo lỗi mặc định, vì còn nhiều điều phải sửa

Sử dụng một lưới kẻ ô các bảng

Trong các phần trước, bạn đã sử dụng HTML rất nhiều để tiến hành việc bố trí Với HTML, bạn có thể bố trí trang web chính xác theo cách bạn muốn Tuy nhiên, việc bố trí ứng dụng web có thể không quan trọng bằng, ví dụ, việc bố trí của một

tờ gấp tiếp thị Để làm đơn giản GUI của ứng dụng Calculator kha khá, ngay bây giờ bạn sẽ sử dụng một <h:panelGrid> để bố trí các mục vào trong một lưới kẻ ô

Listing 12 cho thấy mã lệnh của biểu mẫu đầu vào thay đổi như thế nào để sử dụng <h:panelGrid>:

Listing 12 Thay đổi biểu mẫu để sử dụng <h:panelGrid>

<h:outputLabel value="Second Number"

<h:outputText value="First Number #{calculator.firstNumber}"/>

<h:outputText value="Second Number #{calculator.secondNumber}"/>

<h:outputText value="Result #{calculator.result}"/>

</h:panelGrid>

</h:panelGroup>

Bạn đã loại bỏ gần 20 dòng mã (khoảng một phần ba), làm cho nó dễ đọc hơn một chút Và giờ đây, ứng dụng này có một mức độ "JSFness" cao hơn, mà một số

người (ví dụ, hầu hết các nhà phát triển) thích còn những người khác (các nhà thiết

kế Web) thì ghét Bạn cần phải cân đối những gì bạn làm theo yêu cầu của dự án của bạn Các dự án là thay đổi, và vì thế thực hiện yêu cầu đối với việc kiểm soát tuyệt đối (bố trí chỉ dùng HTML) và các ứng dụng dễ bảo trì (xem thêm JSFness)

Đây là nơi có một số việc cần phải xoay sở khéo léo hơn một chút Một

<h:panelGrid> chỉ có thể chứa các thành phần, trong khi <h:form>, <f:view>, và

<h:panelGroup> có thể chứa cả HTML và cả các thành phần <h:panelGrid> đầu tiên trong biểu mẫu có ba cột, do đó, ngay khi bạn thêm một thành phần nữa, nó sẽ chuyển xuống hàng dưới <h:panelGrid> thứ hai chỉ chứa một cột, do đó, mỗi thành phần sẽ được thêm vào hàng tiếp theo <h:panelGrid> hoàn trả một bảng, vì thế kết quả gần như giống hệt với những gì bạn đã có trước đó (Với người sử dụng nó là giống nhau) Nhắc lại: bạn không thể thêm HTML vào một

<h:panelGrid> Nó sẽ không hoàn trả ở nơi mà bạn mong đợi Nó chỉ có các thành phần

Che dấu cho GUI bằng CSS

Nếu bạn hiểu biết HTML và CSS, thì bạn biết làm thế nào để tăng thêm vẻ ngoài

và cảm nhận của phiên bản đầu tiên của ứng dụng Calculator <h:panelGrid> cũng cho phép bạn thực hiện điều này Bạn sẽ nhập khẩu một phiếu định kiểu CSS và sau đó sử dụng nó với <h:panelGrid> Bạn sẽ làm cho <h:panelGrid> hiện lên với một đường viền và xen kẽ các hàng màu bạc và màu trắng

Trước tiên, nhập khẩu phiếu định kiểu, như chỉ ra trong Listing 14:

Listing 14 Nhập khẩu phiếu định kiểu

href="<%=request.getContextPath()%>/css/main.css" />

</head>

Listing 15 là phiếu định kiểu này:

Listing 15 Phiếu định kiểu CSS

Listing 17 Sử dụng các lớp kiểu dáng cho panelGrid các kết quả panelGrid

<h:panelGrid columns="1" rowClasses="oddRow, evenRow"

styleClass="resultGrid">

</h:panelGrid>

Hình 6 cho thấy ứng dụng Calculator bây giờ trông như thế nào:

Hình 6 Calculator với một số kiểu dáng

Tôi mới chỉ xới trên bề mặt khi nói về các kiểu dáng mà <panelGrid> hỗ trợ Tham khảo các liên kết đến API thư viện thẻ trong Tài nguyên để biết thêm chi tiết

Bắt đầu làm sạch các thông báo lỗi

Các thông báo lỗi rất thú vị nếu người dùng của bạn là những người đam mê hoặc nhưng người say mê kỹ thuật Trái lại, chúng không thân thiện với người dùng Bạn có thể cải thiện chúng theo nhiều cách khác nhau Bạn có thể bắt đầu bằng cách thêm vào một nhãn, như được hiển thị trong Listing 18:

Listing 19 Hiển thị thông báo tóm tắt thay cho thông báo chi tiết

<h:outputLabel value="First Number" for="firstNumber" />

<h:inputText id="firstNumber" label="First Number"

value="#{calculator.firstNumber}" required="true" />

<h:message for="firstNumber" showSummary="true" showDetail="false"/>

Lưu ý rằng Listing 19 đặt giá trị cho showSummary và showDetail của thành phần h:message là showSummary="true" showDetail="false" Điều này dẫn đến kết quả thông báo là "First Number: 'aaa' phải là một số bao gồm một hoặc nhiều chữ số."

và "Second Number: Lỗi duyệt tính hợp lệ: giá trị cần phải điền." tương ứng cho phép biến đổi dữ liệu và yêu cầu phải nhập vào firstNumber và secondNumber Như thế vẫn chưa tốt Hãy đọc tiếp để có cách thay thế khác, tốt hơn

Viết đè lên nội dung thông báo

JSF 1.2 đã thêm một requiredMessage và một conversionMessage, do đó bạn có thể viết đè một thông báo trên cơ sở xét từng trường hợp, như được hiển thị trong Listing 20:

Listing 20 Sử dụng requiredMessage và converterMessge để rút ngắn các thông báo

<% First Number %>

<h:outputLabel value="First Number" for="firstNumber" />

<h:inputText id="firstNumber" label="First Number"