Thông tin tài liệu
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ó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 chỉ, 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" xmlns:places="http://java.sun.com/jsf/composite/components/places"> <! INTERFACE > <composite:interface> <composite:attribute name="title"/> </composite:interface> <! IMPLEMENTATION > <composite:implementation"> <div class="map"> <h:panelGrid > <h:panelGrid > <h:selectOneMenu onchange="submit()" value="#{cc.parent.attrs.location.zoomIndex}" valueChangeListener="#{cc.parent.attrs.location.zoomChanged}" style="font-size:13px;font-family:Palatino"> <f:selectItems value="#{places.zoomLevelItems}"/> </h:selectOneMenu> </h:panelGrid> </h:panelGrid> <h:graphicImage url="#{cc.parent.attrs.location.mapUrl}" style="border: thin solid gray"/> </div> </composite:implementation> </html> Một trong những điều tuyệt vời của các thành phần là bạn có thể thay thế chúng bằng các lựa chọn thay thế khác, mạnh hơn mà không làm ảnh hưởng bất kỳ các chức năng xung quanh nào. Ví dụ, trong Hình 2, tôi đã thay thế thành phần image (hình ảnh) trong Liệt kê 1 bằng thành phần Google Maps, với sự cho phép của GMaps4JSF (xem Tài nguyên): Hì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: Liệ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"> <f:selectItems value="#{places.zoomLevelItems}"/> </h:selectOneMenu> <m:map id="map" width="420px" height="400px" address="#{cc.parent.attrs.location.streetAddress}, " zoom="#{cc.parent.attrs.location.zoomIndex}" renderOnWindowLoad="false"> <m:mapControl id="smallMapCtrl" name="GLargeMapControl" position="G_ANCHOR_TOP_RIGHT"/> <m:mapControl id="smallMapTypeCtrl" name="GMapTypeControl"/> <m:marker id="placeMapMarker"/> </m:map> Để sử dụng một thành phần GMaps4JSF, tôi đã thay thế thẻ <h:graphicImage> bằng một thẻ <m:map> từ bộ thành phần GMaps4JSF. Cũng thật đơn giản để móc nối thành phần GMaps4JSF vào trình đơn thả xuống các mức phóng to, chỉ cần chỉ rõ 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: Hình 3. Thành phần login Liệt kê 3 cho thấy tài liệu đánh dấu siêu văn bản tạo ra thành phần login hiển thị trong Hình 3: Liệt kê 3. login (đăng nhập) tối thiểu: Chỉ các thuộc tính cần thiết <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:util="http://java.sun.com/jsf/composite/components/util"> <util:login loginAction="#{user.login}" managedBean="#{user}"/> </ui:composition> Thà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. Bean đượ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 package com.clarity import javax.faces.context.FacesContext import javax.faces.bean.ManagedBean import javax.faces.bean.SessionScoped @ManagedBean() @SessionScoped 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 } public String getPassword() { return password } public void setPassword(String newValue) { password = newValue } public String login() { "/views/places" } public String logout() { name = password = nameError = null "/views/login" } } Bean được quản lý trong Liệt kê 4 là một bean Groovy. Việc sử dụng Groovy thay cho ngôn ngữ Java không mang lại gì nhiều cho tôi trong trường hợp này, ngoài việc giải phóng tôi khỏi công việc cực nhọc và buồn tẻ của các dấu chấm phẩy và các câu lệnh return. Tuy nhiên, trong phần Xác nhận hợp lệ (Validation) của Lời khuyên 2, tôi sẽ cho bạn thấy một lý do thuyết phục hơn để sử dụng Groovy đối với bean được quản lý User. 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: [...]... 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 JSF 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. .. 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ẻ , 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 . 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,. 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 JSF 2 hỗ trợ xử lý và biểu hiện từng phần bằ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:
Ngày đăng: 07/08/2014, 10:22
Xem thêm: Sức mạnh của JSF 2, Phần 3: Xử lý sự kiện, JavaScript và Ajax ppt, Sức mạnh của JSF 2, Phần 3: Xử lý sự kiện, JavaScript và Ajax ppt
