Sức mạnh của JSF 2, Phần 3: Xử lý sự kiện, JavaScript và Ajax Nâng cao các thành phần phức hợp bằng cách sử dụng các tính năng JSF 2 mới David Geary, Chủ tịch, Clarity Training, Inc.. T
Trang 1Sức mạnh của JSF 2, Phần 3: Xử lý sự kiện, JavaScript và Ajax
Nâng cao các thành phần phức hợp bằng cách sử dụng các tính năng JSF 2 mới
David Geary, Chủ tịch, Clarity Training, Inc
Tóm tắt: David Geary, thành viên nhóm chuyên gia Java™Server Faces (JSF) 2,
kết thúc loạt bài ba phần của ông về các tính năng mới của JSF 2 Tìm hiểu cách
sử dụng mô hình sự kiện mới của khung công tác và sự hỗ trợ kèm sẵn cho Ajax
để làm cho tất cả các thành phần tái sử dụng của bạn càng mạnh mẽ hơn
Một trong các điểm hấp dẫn lớn nhất của JSF là nó là một khung công tác dựa vào thành phần Điều đó có nghĩa là bạn hoặc những người khác có thể thực hiện các thành phần, các thành phần có thể tái sử dụng Cơ chế tái sử dụng mạnh mẽ đó, đối với hầu hết các phần, đã biểu hiện không đáng kể trong JSF 1 vì đã rất khó triển khai thực hiện các thành phần
Tuy nhiên, như bạn đã thấy trong Phần 2, JSF 2 làm cho dễ dàng triển khai thực hiện các thành phần — không cần mã Java và không có cấu hình — với một tính
năng mới được gọi là các thành phần phức hợp Tính năng đó có thể là phần quan
trọng nhất của JSF 2, vì cuối cùng nó thực hiện được tiềm năng của các thành phần JSF
Trong bài thứ ba và là bài cuối cùng về JSF 2 này, tôi sẽ cho bạn thấy làm thế nào
để cải thiện tính năng của thành phần phức hợp bằng cách sử dụng Ajax mới và các khả năng xử lý sự kiện cũng được đưa vào trong JSF 2, với các lời khuyên sau đây để khai thác tốt nhất JSF 2:
Lời khuyên 1: Hãy thành phần hóa
Lời khuyên 2: Hãy Ajax hóa
Lời khuyên 3: Hãy cho xem tiến độ
Trong lời khuyên đầu tiên, tôi sẽ xem xét lại ngắn gọn hai thành phần mà tôi thảo luận chi tiết trong Phần 2 Trong các lời khuyên sau đó, tôi sẽ cho bạn thấy làm thế nào để chuyển đổi các thành phần đó bằng cách sử dụng Ajax và xử lý-sự kiện Lời khuyên 1: Hãy thành phần hóa
Ứng dụng các địa điểm, mà tôi đã giới thiệu trong Phần 1, có chứa một số thành phần phức hợp Một là thành phần map (bản đồ), hiển thị một bản đồ của một địa
Trang 2chỉ, bổ sung thêm một trình đơn thả xuống gồm các mức phóng to, như trong Hình 1:
Hình 1 Thành phần map của ứng dụng các địa điểm
Liệt kê mã rút gọn của thành phần map được hiển thị trong Liệt kê 1:
Liệt kê 1 Thành phần map
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
Trang 3xmlns:places="http://java.sun.com/jsf/composite/components/places">
Trang 5Hình 2 Hình ảnh bản đồ của GMaps4JSF
Mã được cập nhật (và được cắt ngắn bớt) cho thành phần map được hiển thị trong Liệt kê 2:
Trang 6Liệt kê 2 Thay thế hình ảnh bản đồ bằng một thành phần GMaps4JSF
<h:selectOneMenu onchange="submit()"
value="#{cc.parent.attrs.location.zoomIndex}"
valueChangeListener="#{cc.parent.attrs.location.zoomChanged}" style="font-size:13px;font-family:Palatino">
Trang 7rõ thuộc tính bean hậu thuẫn chính xác cho thuộc tính zoom (phóng to) của thẻ
<m:map>
Khi nói về các mức phóng to, chú ý rằng khi một người dùng thay đổi mức phóng
to, tôi bắt buộc gửi đi một biểu mẫu có thuộc tính onchange của thẻ
<h:selectOneMenu>, như được hiển thị trong dòng đầu tiên được in đậm một phần trong Liệt kê 1 Việc gửi biểu mẫu đó kích hoạt vòng đời JSF, mà cuối cùng đẩy giá trị mới cho mức phóng to vào thuộc tính zoomIndex của một bean location (vị trí) được lưu trong thành phần phức hợp cha mẹ Thuộc tính bean đó được liên kết với thành phần đầu vào, trong dòng đầu tiên của Liệt kê 2
Vì tôi đã không xác định bất kỳ sự chuyển hướng nào để gửi đi biểu mẫu kết hợp với việc thay đổi mức phóng to, nên JSF làm mới chính trang này sau khi xử lý các yêu cầu, vẽ lại hình ảnh bản đồ để phản ánh mức phóng to mới Tuy nhiên, việc làm mới trang đó cũng vẽ lại toàn bộ trang mặc dù sự thay đổi duy nhất chỉ ở trong hình ảnh bản đồ Trong Lời khuyên 2: Hãy Ajax hóa, tôi sẽ chỉ cho bạn cách
sử dụng Ajax để chỉ vẽ lại hình ảnh để đáp ứng một sự thay đổi mức phóng to Thành phần login
Một thành phần khác được sử dụng trong ứng dụng các địa điểm là thành phần login (đăng nhập) Hình 3 cho thấy thành phần login đang hoạt động:
Trang 8Thành phần login chỉ có hai thuộc tính cần thiết phải có:
loginAction: Một phương thức hành động đăng nhập
managedBean: Một bean được quản lý có các thuộc tính tên và mật khẩu
Trang 9Bean được quản lý đã xác định trong Liệt kê 3 được hiển thị trong Liệt kê 4:
Liệt kê 4 User.groovy
public class User {
private final String VALID_NAME = "Hiro"
private final String VALID_PASSWORD = "jsf"
private String name, password;
public String getName() { name }
public void setName(String newValue) { name = newValue }
Trang 10
public String getPassword() { return password }
public void setPassword(String newValue) { password = newValue }
public String login() {
"/views/places"
}
public String logout() {
name = password = nameError = null
Hầu hết trường hợp, bạn sẽ muốn cấu hình đầy đủ các thành phần đăng nhập với các lời nhắc và văn bản kèm theo nút, như trong Hình 4:
Trang 11Hình 4 Một thành phần login được cấu hình đầy đủ
Liệt kê 5 cho thấy tài liệu đánh dấu siêu văn bản tạo ra thành phần login trong Hình 4:
Liệt kê 5 Cấu hình thành phần login
Trang 12Liệt kê 6 định nghĩa thành phần login:
Liệt kê 6 Định nghĩa thành phần login
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Trang 14<! You can add listeners to this actionSource: >
<composite:actionSource name="loginButton" targets="form:loginButton"/>
<! BACKING BEAN >
Trang 15<composite:attribute name="managedBean" required="true"/> </composite:interface>
Trang 16
Lời khuyên 2: Hãy Ajax hóa
Ajax điển hình thường đòi hỏi hai bước mà thông thường các yêu cầu HTTP
không Ajax đã không làm như thế: xử lý từng phần các biểu mẫu trên máy chủ và biểu hiện từng phần kết quả của Mô hình đối tượng tài liệu (Document Object Model-DOM) trên máy khách
Xử lý và biểu hiện từng phần
Trang 17JSF 2 hỗ trợ xử lý và biểu hiện từng phần bằng cách phân tách vòng đời của JSF thành hai phần lô-gic riêng biệt: thi hành và biểu hiện Hình 5 nêu bật phần thi hành:
Hình 5 Phần thi hành của vòng đời JSF
Hình 6 nêu bật phần biểu hiện của vòng đời của JSF:
Hình 6 Phần biểu hiện của vòng đời JSF
Ý tưởng đằng sau các phần thi hành và biểu hiện trong vòng đời là đơn giản: bạn
có thể quy định các thành phần mà JSF thi hành (xử lý) chúng trên máy chủ và các thành phần mà JSF biểu hiện khi một cuộc gọi Ajax trả về Bạn làm điều đó với thẻ <f:ajax>, là thẻ mới cho JSF 2, như thể hiện trong Liệt kê 7:
Liệt kê 7 Trình đơn phóng to của Ajax
Trang 18<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Sự kiện kích hoạt cuộc gọi Ajax
Một thành phần để thi hành trên máy chủ
Một thành phần để biểu hiện trên máy khách
Khi người sử dụng chọn một mục từ trình đơn phóng to, JSF bắt đầu một cuộc gọi Ajax đến máy chủ Sau đó, JSF chuyển trình đơn đến phần thi hành của vòng đời (@this có nghĩa là thành phần bao quanh của <f:ajax>) và cập nhật zoomIndex của trình đơn trong giai đoạn Cập nhật các giá trị mô hình của vòng đời Khi cuộc gọi Ajax trả về, JSF biểu hiện thành phần map (bản đồ), sử dụng chỉ số phóng to (vừa mới được thiết lập) để vẽ lại bản đồ và bây giờ bạn có một trình đơn phóng to được xử lý bằng Ajax, chỉ thêm một dòng XHTML
Trang 19Nhưng còn có thể làm mọi việc đơn giản hơn nữa, bởi vì JSF cung cấp các giá trị mặc định cho các thuộc tính event (sự kiện) và execute (thi hành)
Mỗi thành phần JSF có một sự kiện mặc định để kích hoạt các cuộc gọi Ajax nếu bạn nhúng một thẻ <f:ajax> bên trong thẻ thành phần Đối với các trình đơn, sự kiện đó là sự kiện change (thay đổi) Điều đó có nghĩa là tôi có thể bỏ thuộc tính event của <f:ajax> trong Liệt kê 7 Giá trị mặc định cho thuộc tính execute của
<f:ajax> là @this, nghĩa là thành phần bao quanh của thẻ <f:ajax> Trong ví dụ này, thành phần đó là trình đơn, vì vậy tôi cũng có thể bỏ thuộc tính execute
Bằng cách sử dụng các giá trị thuộc tính mặc định cho <f:ajax>, tôi có thể rút gọn Liệt kê 7 thành Liệt kê 8:
Liệt kê 8 Phiên bản đơn giản hơn của một trình đơn Ajax phóng to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Trang 20thay vì toàn bộ cả trang khi người sử dụng chọn một mức phóng to Một số phép toán, như là việc xác nhận hợp lệ một trường riêng biệt trong một biểu mẫu, sẽ phức tạp hơn, do đó, tiếp theo tôi sẽ giải quyết các trường hợp sử dụng đó
Xác nhận hợp lệ
Xác nhận hợp lệ các trường và cung cấp thông tin phản hồi ngay lập tức khi người
sử dụng nhập xong dữ liệu và ra khỏi một trường là một ý tưởng tốt Ví dụ, trong Hình 7, tôi đang sử dụng Ajax để xác nhận hợp lệ trường tên:
Hình 7 Xác nhận hợp lệ của Ajax
Mã đánh dấu siêu văn bản tạo ra trường tên được hiển thị trong Liệt kê 9:
Liệt kê 9 Trường name
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Trang 21<f:ajax event="blur" render="nameError"/>
Liệt kê 10 Phương thức validateName()
package com.clarity
import javax.faces.context.FacesContext
Trang 22public class User {
private String name, password, nameError;
public void validateName(ValueChangeEvent e) {
UIInput nameInput = e.getComponent()
String name = nameInput.getValue()
Trang 23
}
Trình nghe thay đổi-giá trị — Phương thức validateName() của bean được quản lý user (người sử dụng) — xác nhận hợp lệ trường tên và cập nhật thuộc tính
nameError của bean được quản lý user
Sau khi cuộc gọi Ajax trả về, nhờ có thuộc tính render của thẻ <f:ajax> trong Liệt
kê 9, JSF biểu hiện kết quả đầu ra nameError Đầu ra đó hiển thị thuộc tính
nameError của bean được quản lý user
Liệt kê 11 Sử dụng <f:event>
Trang 24<h:form id="form" prependId="false">
Bạn đặt một thẻ <f:event> bên trong một thẻ thành phần và khi sự kiện đã xác định (bằng thuộc tính type) xảy ra đối với thành phần đó, JSF gọi một phương thức, chỉ rõ bởi thuộc tính listener (trình nghe) Vì vậy, theo tiếng Anh, thẻ
<f:event> trong Liệt kê 11 có nghĩa là: Sau khi xác nhận hợp lệ biểu mẫu, gọi phương thức validate() của bean được quản lý mà người sử dụng đã chuyển cho thành phần phức hợp này Đó là phương thức được chỉ ra trong Liệt kê 12:
Liệt kê 12 Phương thức validate()
package com.clarity
Trang 25public class User {
private final String VALID_NAME = "Hiro";
private final String VALID_PASSWORD = "jsf";
public void validate(ComponentSystemEvent e) {
UIForm form = e.getComponent()
UIInput nameInput = form.findComponent("name") UIInput pwdInput = form.findComponent("password")
if ( ! (nameInput.getValue().equals(VALID_NAME) &&
Trang 26Bạn có thể đã nhận thấy rằng các phương thức xác nhận hợp lệ trong Liệt kê 10 và Liệt kê 12 được viết bằng Groovy Không giống như Liệt kê 4, ở đó lợi thế duy nhất để sử dụng Groovy là không có các dấu chấm phẩy và các câu lệnh return, mã Groovy trong Liệt kê 10 và Liệt kê 12 giải phóng tôi khỏi phải ép kiểu (casting)
Ví dụ, trong Liệt kê 10, ComponentSystemEvent.getComponent() và
UIComponent.findComponent() cả hai đều trả về kiểu UIComponent Với ngôn ngữ Java, tôi sẽ phải ép kiểu các giá trị trả về của các phương thức đó Groovy thực hiện ép kiểu cho tôi
Trang 27
Lời khuyên 3: Hãy cho xem tiến độ
Trong phần Hãy Ajax hóa, tôi đã cho bạn thấy làm thế nào để xử lý bằng Ajax trình đơn phóng to cho thành phần map, sao cho ứng dụng các địa điểm chỉ vẽ lại phần bản đồ của trang khi người dùng thay đổi mức phóng to Một trường hợp phổ biến sử dụng Ajax là cung cấp một phản hồi đến người dùng, khi một sự kiện Ajax đang tiến triển, như Hình 9:
Hình 9 Một thanh tiến độ
Trang 28Trong Hình 9, tôi đã thay thế trình đơn phóng to bằng một hoạt hình GIF, hiển thị trong khi cuộc gọi Ajax đang tiến triển Khi cuộc gọi Ajax hoàn thành, tôi thay thế
bộ chỉ thị tiến độ bằng trình đơn phóng to Liệt kê 13 cho thấy nó được thực hiện như thế nào:
Liệt kê 13 Theo dõi một yêu cầu của Ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Trang 29Liệt kê 14 JavaScript để đáp ứng một yêu cầu Ajax
function zoomChanging(data) {
var menuId = data.source.id;
var progressbarId = menuId.substring(0, menuId.length - "menu".length)
Trang 30Hàm zoomChanging() hiển thị trong Liệt kê 14 tính toán mã nhận dạng máy khách của hình ảnh thanh tiến trình và sau đó sử dụng đối tượng Element (phần tử)
nguyên mẫu để ẩn giấu và hiển thị các phần tử HTML thích hợp trong thời gian cuộc gọi Ajax
Kết luận
Trong những năm qua, JSF 1 đã có tiếng như là một khung công tác rất khó sử dụng Trong nhiều khía cạnh, danh tiếng đó là đúng JSF 1 đã được phát triển trong một tháp ngà mà không nhận thức ra được rằng việc sử dụng trong thế giới thực mới có đủ khả năng Kết quả là, JSF đã tạo ra cho nó nhiều khó khăn để triển khai các ứng dụng và các thành phần hơn nó vốn có
JSF 2, mặt khác, đã được sinh ra từ thử thách khắc nghiệt của thế giới thực, bởi công chúng, những người đã triển khai thực hiện các dự án mã nguồn mở bên trên JSF 1 Các nhận thức sau này trong thế giới thực đã dẫn đến một khung công tác hiểu biết nhiều hơn, làm cho dễ dàng triển khai thực hiện các ứng dụng Ajax hóa mạnh mẽ
Trong suốt loạt bài này, tôi đã cho bạn thấy một số đặc tính JSF 2 nổi bật nhất, chẳng hạn như các chú giải và quy ước để thay thế việc cấu hình, việc dẫn hướng được đơn giản hóa, hỗ trợ cho sử dụng tài nguyên, các thành phần phức hợp, Ajax gắn sẵn và mô hình sự kiện mở rộng Nhưng JSF 2 có nhiều đặc tính hơn nữa mà tôi đã không trình bày được trong loạt bài này, chẳng hạn như các phạm vi của View và Page (Khung nhìn và Trang), hỗ trợ cho các trang có khả năng đánh dấu
và Giai đoạn dự án (Project Stage) Tất cả những đặc tính đó và nhiều hơn nữa, làm cho JSF 2 được cải tiến rất nhiều so với phiên bản ban đầu của nó
Mục lục
Lời khuyên 1: Hãy thành phần hóa
Lời khuyên 2: Hãy Ajax hóa
Trang 31 Lời khuyên 3: Hãy cho xem tiến độ
Kết luận
