Sức mạnh JSF 2, Phần 2: Tạo khuôn mẫu thành phần phức hợp Triển khai giao diện người dùng mở rộng với JavaServer Faces David Geary, Chủ tịch, Clarity Training, Inc Tóm tắt: Java™Server Faces (JSF) cho phép bạn triển khai thực giao diện người dùng (UI), dễ dàng sửa đổi mở rộng với hai tính mạnh mẽ: tạo khn mẫu thành phần phức hợp Trong viết — thứ hai loạt ba phần đặc tính JSF — David Geary, thành viên nhóm chuyên gia JSF 2.0 cho bạn thấy ứng dụng Web tận dụng tốt việc tạo khuôn mẫu thành phần phức hợp Trở lại năm 2000, tham gia vào danh sách gửi thư JavaServer Pages (JSP), gặp Craig McClanahan, người làm việc cho khung công tác Web sinh có tên Struts Quay lại thời đó, di chuyển từ Swing sang lập trình Java phía máy chủ, thực khung công tác nhỏ để tách biệt cách trí khung nhìn JSP khỏi nội dung nó, tương tự với tinh thần trình quản lý cách trí Swing Craig hỏi tơi có muốn cho phép đưa thư viện tạo khuôn mẫu vào Struts khơng tơi vui lịng đồng ý Thư viện khn mẫu Struts (Struts Template Library), đóng gói với Struts 1.0, trở thành sở cho thư viện Tiles phổ biến Strut, để cuối thư viện trở thành khung công tác Apache hàng đầu Hiện nay, công nghệ hiển thị mặc định JSF — Facelets — khung công tác tạo khuôn mẫu phần lớn dựa vào Tiles JSF cung cấp chế mạnh, gọi thành phần phức hợp, xây dựng đặc tính tạo khn mẫu Facelets bạn triển khai thực thành phần tùy chỉnh khơng cần mã Java khơng có cấu hình XML Trong này, tơi giới thiệu cho bạn tạo khuôn mẫu thành phần phức hợp với ba lời khuyên để khai thác tốt JSF 2:  Lời khuyên 1: Giữ nguyên tắc DRY (Đừng lặp lại mình)  Lời khun 2: Hãy dùng cách hợp thành  Lời khuyên 3: Hãy nghĩ theo kiểu LEGO Facelets JSF Trong chuẩn hố việc thực Facelets mã nguồn mở, Nhóm chuyên gia JSF (JSF Expert Group) thực số thay đổi cho API Facelets bên giữ lại khả tương thích lùi với thư viện thẻ Điều có nghĩa khung nhìn có, triển khai thực phiên mã nguồn mở Facelets làm việc với JSF Bạn tìm hiểu thêm nhiều tính Facelets viết Rick Hightower "Facelets vừa khít với JSF" (Facelets Fits JSF like a Glove) "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 tơi với vai trị nhà phát triển phần mềm, triển khai thực giao diện người dùng đồ họa (GUI) cho hệ thống thiết kế có hỗ trợ máy tính hệ thống chế tác có hỗ trợ máy tính (CAD/CAM) dựa UNIX® Ban đầu tất diễn tốt, theo thời gian, mã trở nên ngày có nhiều vấn đề Vào lúc phát hành, hệ thống dễ mắc lỗi đến mức sợ hãi việc sửa lỗi phát hành gây luồng tới tấp báo cáo lỗi Nếu theo nguyên tắc DRY — Đừng lặp lại — làm dự án đó, tơi đã bớt cho nhiều phiền tối Ngun tắc DRY, Dave Thomas Andy Hunt đặt (xem Tài nguyên), nói rõ: Mỗi mảnh kiến thức phải biểu diễn nhất, khơng lập lờ thức hệ thống Ứng dụng CAD/CAM khơng theo ngun tắc DRY — có q nhiều kết dính mối quan tâm — thay đổi khu vực gây thay đổi bất ngờ nơi khác JSF vi phạm nguyên tắc DRY số khía cạnh, ví dụ cách buộc bạn cung cấp hai biểu diễn bean quản lý bạn — XML mã Java Nhu cầu có nhiều biểu diễn làm cho khó khăn tạo thay đổi bean quản lý Như cho bạn Phần 1, JSF cho phép bạn sử dụng giải thay XML để cấu hình bean quản lý, cho bạn cách biểu diễn nhất, thức bean quản lý bạn Gác lại Bean quản lý sang bên, thói quen vơ hại — chẳng hạn bao gồm bảng định kiểu (stylesheet) giống tất khung nhìn bạn — vi phạm nguyên tắc DRY gây lo lắng Nếu bạn thay đổi tên bảng định kiểu, bạn phải thay đổi nhiều khung nhìn Tốt gói kín việc bao gồm thêm bảng định kiểu bạn làm Nguyên tắc DRY áp dụng để thiết kế mã bạn Nếu bạn có nhiều phương thức mà tất chứa mã để duyệt qua chẳng hạn, ý tưởng tốt gói kín thuật tốn duyệt qua cây, lớp Giữ nguyên tắc DRY đặc biệt quan trọng bạn thực giao diện người dùng, nơi (người ta cho rằng) thay đổi hay xảy q trình phát triển Tạo khn mẫu JSF Một nhiều cách JSF hỗ trợ nguyên tắc DRY tạo khuôn mẫu (templating) Các khn mẫu bao gói chức phổ biến số khung nhìn ứng dụng bạn, bạn cần phải xác định chức lần Một khuôn mẫu sử dụng nhiều cấu kiện để tạo khung nhìn ứng dụng JSF Ứng dụng địa điểm, mà tơi giới thiệu Phần 1, có ba khung nhìn thấy Hình 1: Hình Khung nhìn ứng dụng địa điểm: Đăng nhập, xem mã nguồn địa điểm Giống nhiều ứng dụng Web, ứng dụng địa điểm có chứa nhiều khung nhìn dùng chung cách bố trí giống Tạo khn mẫu JSF cho phép bạn bao kín cách bố trí — với tạo phẩm dùng chung khác, chẳng hạn mã JavaScript Cascading Style Sheets (Bảng định kiểu nhiều tầng-CSS) — khuôn mẫu Liệt kê khn mẫu cho ba khung nhìn hiển thị Hình 1: Liệt kê Khn mẫu địa điểm: /templates/masterLayout.xhtml #{msgs.placesWindowTitle} #{msgs.placesHeading} Khuôn mẫu Liệt kê cung cấp sở hạ tầng sau cho tất khung nhìn ứng dụng:  Các thẻ HTML ,  Một tiêu đề (title) mặc định (có thể bị ghi đè cấu kiện sử dụng khuôn mẫu)  Một bảng định kiểu CSS  Một số tiện ích JavaScript  Một cách bố trí dạng lớp CSS tương ứng  Nội dung mặc định cho phần đầu (head) (có thể bị ghi đè)  Nội dung mặc định cho trình đơn bên phải (có thể bị ghi đè) Như Liệt kê minh họa, khuôn mẫu chèn nội dung vào cách bố trí chúng thẻ Nếu bạn quy định phần thân cho thẻ , thực tiêu đề cửa sổ, phần đầu trình đơn bên phải Liệt kê 1, JSF sử dụng phần thân thẻ nội dung mặc định Các cấu kiện sử dụng khn mẫu định nghĩa nội dung ghi đè lên nội dung mặc định thẻ , chứng tỏ Liệt kê 2, hiển thị tài liệu đánh dấu siêu văn khung nhìn đăng nhập: Liệt kê Khung nhìn đăng nhập Khung nhìn đăng nhập sử dụng nội dung mặc định khuôn mẫu cho tiêu đề cửa sổ, phần đầu trình đơn bên phải Nó định nghĩa chức cụ thể riêng cho khung nhìn đăng nhập: phần nội dung trình đơn bên trái Bằng cách cung cấp thẻ cho tiêu đề cửa sổ, phần đầu trình đơn bên phải, tơi ghi đè nội dung mặc định khn mẫu định nghĩa Ví dụ, Liệt kê cho thấy khung nhìn xem mã nguồn (hình ảnh Hình 1): Liệt kê Khung nhìn xem-mã nguồn Khung nhìn-xem mã nguồn định nghĩa nội dung cho phần nội dung cho trình đơn bên phải Nó ghi đè nội dung mặc định, khuôn mẫu định nghĩa Liệt kê 1, cho trình đơn bên trái Liệt kê cho thấy khung nhìn địa điểm (hình Hình 1): Liệt kê Khung nhìn địa điểm Tạo khuôn mẫu JSF Khái niệm phía sau tạo khn mẫu đơn giản Bạn định nghĩa khn mẫu bao gói chức phổ biến nhiều khung nhìn Mỗi khung nhìn bao gồm cấu kiện khuôn mẫu Khi JSF tạo khung nhìn, nạp khn mẫu cấu kiện sau chèn nội dung định nghĩa cấu kiện vào khn mẫu Chú ý nét giống Liệt kê 2, Cả ba khung nhìn xác định rõ khn mẫu chúng định nghĩa nội dung Cũng để ý việc tạo khung nhìn dễ dàng nào, hầu hết sở hạ tầng khung nhìn bao gói khn mẫu tệp bao gồm thêm Một khía cạnh thú vị khác sử dụng tạo khuôn mẫu JSF khung nhìn giống khung nhìn Liệt kê 2, không thay đổi nhiều theo thời gian, phần đáng kể mã khung nhìn bạn khơng u cầu phải bảo trì Cũng giống khung nhìn có sử dụng chúng, khn mẫu có xu hướng thay đổi Và bạn bao gói nhiều chức phổ biến vào mã lệnh khơng cần bảo trì, bạn tập trung vào nội dung thực tế khung nhìn bạn — diễn trình đơn bên trái trang đăng nhập chẳng hạn Việc tập trung vào nội dung thực tế khung nhìn bạn tất mà lời khuyên bàn đến Lời khuyên 2: Hãy dùng cách hợp thành Không lâu sau GUI CAD/CAM phát hành, dành vài tháng tiếp tục làm việc với nhà phát triển có tên Bob, dự án khơng có liên quan Chúng tơi làm việc sở mã Bob thay đổi sửa lỗi dễ dàng đến khơng ngờ Tơi sớm nhận có khác biệt lớn mã Bob ông viết phương thức nhỏ — thường từ đến 15 dòng mã — tồn hệ thống ơng lắp ráp với từ phương thức nhỏ Trong mà tơi đánh vật để sửa đổi phương thức dài, làm nhiều việc dự án trước tôi, Bob nhanh nhẹn phối hợp phương thức nhỏ với chức nguyên tử (atomic - không chia nhỏ nữa) Sự khác biệt khả bảo trì mở rộng mã Bob giống so sánh đêm với ngày từ trở đi, phương thức nhỏ thuyết phục Cả Bob lẫn vào lúc chưa biết, chúng tơi sử dụng mẫu thiết kế từ Smalltalk có tên Phương thức hợp thành (Composed Method) (xem Tài nguyên): Hãy chia phần mềm bạn thành phương thức thực nhiệm vụ nhận biết được, mức trừu tượng Những lợi ích việc sử dụng mẫu hình Phương thức hợp thành có tài liệu hướng dẫn tốt (Xem "Kiến trúc tiến hóa thiết kế dần: Phương thức hợp thành SLAP" Neal Ford với giải thích chi tiết tuyệt vời) Ở đây, tập trung vào cách bạn sử dụng mẫu hình Phương thức hợp thành với khung nhìn JSF bạn JSF khuyến khích bạn hợp thành khung nhìn từ mảnh khung nhìn nhỏ Việc tạo khn mẫu bao gói chức chung, chia khung nhìn bạn thành mảnh nhỏ JSF cung cấp thẻ , tơi giải thích liệt kê trước, cho phép bạn tiếp tục chia nhỏ khung nhìn thành mảnh chức nhỏ Ví dụ, Hình cho thấy trình đơn bên trái trang đăng nhập ứng địa điểm: Hình Trình đơn bên trái trang đăng nhập Và Liệt kê cho thấy tệp định nghĩa nội dung trình đơn đó: Với JSF 2, bạn triển khai thực thành phần phức hợp cấu hình đầy đủ Ví dụ, ứng dụng địa điểm có chứa thành phần login, thể Hình 7: Hình Thành phần login ứng dụng địa điểm Liệt kê 15 cho thấy ứng dụng địa điểm sử dụng thành phần login nào: Liệt kê 15 Sử dụng thành phần login Liệt kê 15 không tham số hóa thuộc tính thành phần login, chẳng hạn nhắc tên mật khẩu, mà cịn gắn trình lắng nghe hành động vào nút Log In (đăng nhập) thành phần Nút giao diện thành phần login trưng ra, hiển thị Liệt kê 16: Liệt kê 16 Thành phần login #{cc.attrs.loginPrompt} #{cc.attrs.namePrompt} #{cc.attrs.passwordPrompt}

Trong giao diện thành phần login, trưng nút Log In tên loginButton Tên nhằm vào nút Log In nằm biểu mẫu có tên form, giá trị thuộc tính targets là: form:loginButton Trình lắng nghe hành động kết hợp với nút Log In Liệt kê 16 thấy Liệt kê 17: Liệt kê 17 Trình nghe hành động nút Log in package com.clarity; import javax.faces.event.AbortProcessingException; import javax.faces.event.ActionEvent; import javax.faces.event.ActionListener; public class LoginActionListener implements ActionListener { public void processAction(ActionEvent e) throws AbortProcessingException { System.out.println("logging in "); } } Trình nghe hành động Liệt kê 17 dành cho mục đích minh họa — người sử dụng đăng nhập, đơn giản viết lại thông báo vào tệp log thùng chứa servlet Nhưng bạn hiểu ý tưởng: Với JSF 2, bạn triển khai thực thành phần cấu hình đầy đủ bạn gắn chức cho thành phần đó, tất mà khơng có dịng mã Java cấu hình XML Đó vài miếng võ mạnh (N.D: fu - tạm dịch miếng võ – tác giả mượn từ gốc tiếng Hán, dùng với nghĩa từ Kung Fu) Thành phần place (địa điểm): Lồng thành phần phức hợp vào JSF cho phép bạn thực thành phần cấu hình đầy đủ mà khơng có mã Java cấu hình Bạn lồng thành phần phức hợp vào nhau, cho phép bạn chia cắt thành phần phức hợp thành mảnh nhỏ hơn, dễ dùng Ví dụ, Hình cho thấy thành phần place, hiển thị đồ thông tin thời tiết địa cho: Hình Thành phần place ứng dụng địa điểm Liệt kê 18 cho thấy ứng dụng địa điểm sử dụng thành phần place nào: Liệt kê 18 Sử dụng thành phần place Mã cho thành phần place hiển thị Liệt kê 19: Liệt kê 19 Thành phần place Trong Liệt kê 19, thành phần place sử dụng hai thành phần lồng nhau: Liệt kê 20 cho thấy thành phần map (bản đồ): Liệt kê 20 Thành phần map #{msgs.zoomPrompt} Cấu trúc lại thành phần phức hợp Liệt kê 20 — tài liệu đánh dấu siêu văn thành phần map — dài chút theo vị Nhìn thống qua lần đầu, khó hiểu phức tạp gây vấn đề sau Bạn dễ dàng cấu trúc lại Liệt kê 20 thành nhiều tệp dễ quản lý hơn, làm tơi cấu trúc lại trình đơn bên trái khung nhìn địa điểm Liệt kê 8, 10 Trong trường hợp này, dành lại việc tái cấu trúc tập cho bạn Hãy ý việc sử dụng biểu thức #{cc.parent.attrs.location.ATTRIBUTE_NAME} Liệt kê 20 Bạn sử dụng thuộc tính parent (cha mẹ) thành phần phức hợp để truy cập thuộc tính thành phần cha mẹ, tạo thuận lợi lớn cho việc lồng thành phần Nhưng bạn khơng cần hồn tồn dựa vào thuộc tính cha mẹ thành phần lồng Như làm thành phần place Liệt kê 19, bạn vượt qua thuộc tính, chẳng hạn tiêu đề đồ, từ thành phần cha mẹ tới thành phần lồng nó, giống bạn vượt qua thuộc tính đến thành phần khác nào, có lồng hay khơng Nó có giảm chút, Liệt kê 21 cho thấy thành phần weather (thời tiết): Liệt kê 21 Thành phần weather Thành phần weather, giống thành phần map, sử dụng thuộc tính thành phần cha mẹ (weather HTML từ dịch vụ Web thời tiết) thuộc tính thành phần cụ thể (tiêu đề) (Xem Phần để thấy ứng dụng nhận đồ thông tin thời tiết với địa điểm cụ thể nào) Vì vậy, bạn thực thành phần lồng nhau, bạn có lựa chọn Bạn thành phần lồng dựa vào thuộc tính thành phần cha mẹ bạn yêu cầu thành phần cha mẹ chuyển qua thuộc tính rõ ràng đến thành phần lồng Ví dụ, thành phần place Liệt kê 19 rõ ràng vượt qua thuộc tính tiêu đề đến thành phần lồng nó, thành phần lồng dựa vào thuộc tính cha mẹ, chẳng hạn URL đồ (map URL) HTML thời tiết (weather HTML) Bạn chọn thực thuộc tính thành phần rõ ràng dựa vào thuộc tính cha mẹ thỏa hiệp việc kết nối tiện lợi Trong trường hợp này, thành phần map weather kết nối chặt chẽ với thành phần cha mẹ chúng (thành phần place), chúng dựa vào thuộc tính thành phần cha mẹ Tơi tách rời thành phần map weather khỏi thành phần place cách xác định tất thuộc tính thành phần map weather thuộc tính rõ ràng Nhưng trường hợp đó, tơi số tiện nghi, thành phần place rõ ràng cần phải vượt qua tất thuộc tính đến thành phần map weather Tiếp theo Trong này, cho bạn thấy cách sử dụng JSF UIS để triển khai thực UI dễ dàng để trì mở rộng thơng qua việc tạo khuôn mẫu thành phần phức hợp Bài cuối loạt cho bạn cách sử dụng JavaScript thành phần phức hợp, làm để sử dụng mơ hình kiện JSF làm để tận dụng lợi hỗ trợ có sẵn JSF cho Ajax Mục lục  Lời khuyên 1: Giữ nguyên tắc DRY  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  Tiếp theo ... đơn giản để triển khai thực thành phần phức hợp Các thành phần phức hợp, tên gọi cho thấy, cho phép bạn hợp thành thành phần từ thành phần có Bạn thực thành phần phức hợp XHTML nơi thư mục tài... mẹ) thành phần phức hợp để truy cập thuộc tính thành phần cha mẹ, tạo thuận lợi lớn cho việc lồng thành phần Nhưng bạn khơng cần hồn tồn dựa vào thuộc tính cha mẹ thành phần lồng Như làm thành phần. .. trường hợp này, thành phần map weather kết nối chặt chẽ với thành phần cha mẹ chúng (thành phần place), chúng dựa vào thuộc tính thành phần cha mẹ Tơi tách rời thành phần map weather khỏi thành phần