Sức mạnh của JSF 2, Phần 2: Tạo khuôn mẫu và các thành phần phức hợp doc

Sức mạnh của JSF 2, Phần 2: Tạo khuôn mẫu và các thành phần phức hợp

Triển khai các giao diện người dùng mở rộng với JavaServer Faces 2

David Geary, Chủ tịch, Clarity Training, Inc.

Tóm tắt: Java™Server Faces (JSF) 2 cho phép bạn triển khai thực hiện các giao

diện người dùng (UI), dễ dàng sửa đổi và mở rộng với hai tính năng mạnh mẽ: tạo

khuôn mẫu và các thành phần phức hợp. Trong bài viết này — bài thứ hai trong

loạt bài ba phần về các đặc tính mới của JSF 2 — David Geary, thành viên nhóm

chuyên gia JSF 2.0 cho bạn thấy các ứng dụng Web của mình có thể tận dụng tốt

nhất việc tạo khuôn mẫu và các thành phần phức hợp như thế nào.

Trở lại năm 2000, khi tôi tham gia vào một danh sách gửi thư về JavaServer Pages

(JSP), tôi đã gặp Craig McClanahan, người đang làm việc cho một khung công tác

Web mới sinh ra có tên là Struts. Quay lại thời đó, khi di chuyển từ Swing sang

lập trình Java phía máy chủ, tôi đã thực hiện một khung công tác nhỏ để tách biệt

cách bài trí khung nhìn của JSP khỏi nội dung của nó, tương tự với tinh thần của

các trình quản lý cách bài trí của Swing. Craig đã hỏi tôi có muốn cho phép đưa

thư viện tạo khuôn mẫu của tôi vào trong Struts không và tôi đã vui lòng đồng ý.

Thư viện khuôn mẫu của Struts (Struts Template Library), được đóng gói cùng với

Struts 1.0, đã trở thành cơ sở cho thư viện Tiles phổ biến của Strut, để cuối cùng

thư viện này đã trở thành một khung công tác Apache hàng đầu.

Hiện nay, công nghệ hiển thị mặc định của JSF 2 — Facelets — là một khung

công tác tạo khuôn mẫu phần lớn dựa vào Tiles. JSF 2 cũng cung cấp một cơ chế

mạnh, được gọi là các thành phần phức hợp, xây dựng trên các đặc tính tạo khuôn

mẫu của Facelets để cho bạn có thể triển khai thực hiện các thành phần tùy chỉnh

không cần mã Java và không có cấu hình XML nào. Trong bài này, tôi sẽ giới

thiệu cho bạn về tạo khuôn mẫu và các thành phần phức hợp với ba lời khuyên để

khai thác tốt nhất JSF 2:

 Lời khuyên 1: Giữ nguyên tắc DRY (Đừng lặp lại chính mình).

 Lời khuyên 2: Hãy dùng cách hợp thành.

 Lời khuyên 3: Hãy nghĩ theo kiểu LEGO.

Facelets và JSF 2

Trong khi chuẩn hoá việc thực hiện Facelets mã nguồn mở, Nhóm chuyên gia JSF

2 (JSF 2 Expert Group) đã thực hiện một số thay đổi cho các API Facelets bên

dưới nhưng giữ lại khả năng tương thích lùi với thư viện thẻ. Điều đó có nghĩa là

các khung nhìn hiện có, được triển khai thực hiện bằng phiên bản mã nguồn mở

của Facelets sẽ làm việc được với JSF 2.

Bạn có thể tìm hiểu thêm về nhiều tính năng của Facelets trong bài viết của Rick

Hightower "Facelets vừa khít với JSF" (Facelets Fits JSF like a Glove) và "Lập

trình Facelets nâng cao (Advanced Facelets programming)."

Lời khuyên 1: Giữ nguyên tắc DRY

Trong công việc đầu tiên của tôi với vai trò nhà phát triển phần mềm, tôi đã triển

khai thực hiện một giao diện người dùng đồ họa (GUI) cho các hệ thống thiết kế

có hỗ trợ của máy tính và hệ thống chế tác có hỗ trợ của máy tính (CAD/CAM)

dựa trên UNIX®.

Ban đầu tất cả đã diễn ra khá tốt, nhưng theo thời gian, mã của tôi đã trở nên ngày

càng có nhiều vấn đề. Vào lúc chúng tôi phát hành, hệ thống đã dễ mắc lỗi đến

mức tôi đã sợ hãi việc sửa lỗi và bản phát hành gây ra ngay một luồng tới tấp các

báo cáo lỗi.

Nếu tôi đã theo nguyên tắc DRY — Đừng lặp lại chính mình — khi làm dự án đó,

thì tôi có thể đã đã bớt được cho mình nhiều sự phiền toái. Nguyên tắc DRY, do

Dave Thomas và Andy Hunt đặt ra (xem Tài nguyên), nói rõ:

Mỗi một mảnh kiến thức phải được biểu diễn duy nhất, không lập lờ và chính thức

trong một hệ thống.

Ứng dụng CAD/CAM của tôi không theo nguyên tắc DRY — nó đã có quá nhiều

sự kết dính giữa các mối quan tâm — vì vậy các thay đổi trong một khu vực đã

gây ra những thay đổi bất ngờ ở nơi khác.

JSF 1 đã vi phạm nguyên tắc DRY trong một số khía cạnh, ví dụ bằng cách buộc

bạn cung cấp hai biểu diễn của bean được quản lý của bạn — một trong XML và

một trong mã Java. Nhu cầu có nhiều biểu diễn đã làm cho khó khăn hơn khi tạo

ra và thay đổi bean được quản lý. Như tôi đã chỉ ra cho bạn trong Phần 1, JSF 2

cho phép bạn sử dụng các chú giải thay vì XML để cấu hình bean được quản lý,

cho bạn một cách biểu diễn duy nhất, chính thức của bean được quản lý của bạn.

Gác lại Bean được quản lý sang một bên, ngay cả các thói quen hình như vô hại —

chẳng hạn như bao gồm bảng định kiểu (stylesheet) giống nhau trong tất cả các

khung nhìn của bạn — cũng vi phạm nguyên tắc DRY và có thể gây ra lo lắng.

Nếu bạn thay đổi tên của bảng định kiểu, bạn phải thay đổi nhiều khung nhìn. Tốt

hơn là gói kín việc bao gồm thêm bảng định kiểu nếu bạn có thể làm được.

Nguyên tắc DRY cũng áp dụng để thiết kế mã của bạn. Nếu bạn có nhiều phương

thức mà tất cả đều chứa mã để duyệt đi qua một cây chẳng hạn, thì một ý tưởng tốt

sẽ là gói kín thuật toán duyệt đi qua một cây, có thể là trong một lớp con.

Giữ nguyên tắc DRY đặc biệt quan trọng khi bạn thực hiện một giao diện người

dùng, là nơi (người ta cho rằng) những thay đổi hay xảy ra nhất trong quá trình

phát triển.

Tạo khuôn mẫu JSF 2

Một trong nhiều cách trong đó JSF 2 hỗ trợ nguyên tắc DRY là tạo khuôn mẫu

(templating). Các khuôn mẫu bao gói các chức năng phổ biến trong số các khung

nhìn trong ứng dụng của bạn, vì vậy bạn cần phải xác định chức năng đó chỉ một

lần. Một khuôn mẫu được sử dụng bởi nhiều cấu kiện để tạo ra các khung nhìn

trong một ứng dụng JSF 2.

Ứng dụng các địa điểm, mà tôi đã giới thiệu trong Phần 1, có ba khung nhìn như

thấy trong Hình 1:

Hình 1. Khung nhìn ứng dụng các địa điểm: Đăng nhập, xem mã nguồn và

các địa điểm

Giống như nhiều ứng dụng Web, ứng dụng các địa điểm có chứa nhiều khung nhìn

dùng chung cách bố trí giống nhau. Tạo khuôn mẫu JSF cho phép bạn bao kín

cách bố trí đó — cùng với các tạo phẩm dùng chung khác, chẳng hạn như mã

JavaScript và Cascading Style Sheets (Bảng định kiểu nhiều tầng-CSS) — trong

một khuôn mẫu. Liệt kê 1 là khuôn mẫu cho ba khung nhìn được hiển thị trong

Hình 1:

Liệt kê 1. Khuôn mẫu các địa điểm: /templates/masterLayout.xhtml

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

xmlns:h="http://java.sun.com/jsf/html"

xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

<title>

<ui:insert name="windowTitle">

#{msgs.placesWindowTitle}

</ui:insert>

</title>

</h:head>

<h:body>

<h:outputScript library="javascript" name="util.js" target="head"/>

<h:outputStylesheet library="css" name="styles.css" target="body"/>

<div class="pageHeading">

<ui:insert name="heading">

#{msgs.placesHeading}

</ui:insert>

</div>

<div class="menuAndContent">