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...
Nội dung trích xuất từ tài liệu:
Sức mạnh của JSF 2, Phần 3: Xử lý sự kiện, JavaScript và Ajax Sức mạnh của JSF 2, Phần 3: Xử lý sự kiện, JavaScript và AjaxNâ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ớiDavid 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áchsử 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àothà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ácthà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ựchiệ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ínhnă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 quantrọ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ànhphầ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ảoluậ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ànhphầ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 địachỉ, bổ sung thêm một trình đơn thả xuống gồm các mức phóng to, như trong Hình1:Hình 1. Thành phần map của ứng dụng các địa điểmLiệ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 mapxmlns:places=http://java.sun.com/jsf/composite/components/places> ... ... 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úngbằ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ácchứ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ủaGMaps4JSF (xem Tài nguyên):Hình 2. Hình ảnh bản đồ của GMaps4JSFMã được cập nhật (và được cắt ngắn bớt) cho thành phần map được hiển thị trongLiệt kê 2:Liệt kê 2. Thay thế hình ảnh bản đồ bằng một thành phần GMaps4JSF ... Để sử dụng một thành phần GMaps4JSF, tôi đã thay thế thẻ bằng một thẻ từ bộ thành phần GMaps4JSF. Cũng thật đơn giản để mócnố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ẻ.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óngto, tôi bắt buộc gửi đi một biểu mẫu có thuộc tính onchange của thẻ, như được hiển thị trong dòng đầu tiên được in đậm một phầntrong 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 đẩygiá 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ếtvớ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ợpvớ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áchsử 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 loginMột thành phần khác được sử dụng trong ứng dụng các địa điểm là thành phầnlogin (đă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 loginLiệ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 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: ...