Thông tin tài liệu
Các ứng dụng Craft Ajax sử dụng JSF với CSS và Javascript, Phần 2: Các biểu mẫu JSF động Khám phá hỗ trợ JavaScript trong các thành phần JSF chuẩn Andrei Cioroianu, Nhà phát triển và Tư vấn Java cao cấp, Devsphere Tóm tắt: Trong bài viết đầu tiên của loạt bài hai phần này, tác giả và nhà phát triển Java™ Andrei Cioroianu đã chỉ ra cách sử dụng các thuộc tính phong cách của các thành phần JavaServer Faces (JSF) và cách thiết lập các giá trị mặc định cho các thuộc tính đó. Trong bài viết thứ hai của loạt bài này, hãy tìm hiểu cách sử dụng các thuộc tính liên quan đến JavaScript của các thành phần JSF chuẩn. Tìm hiểu một số kỹ thuật Web dựa trên Document Object Model (DOM-Mô hình đối tượng tài liệu), các API, JavaScript và Cascading Style Sheets (CSS-Các bảng định kiểu nhiều tầng). Hãy xem cách ẩn dấu và hiển thị các thành phần JSF tùy chọn mà không cần làm mới lại trang Web, cách thực hiện việc xác nhận hợp lệ phía máy khách, việc xác nhận này được thực hiện trong trình duyệt Web, và cách phát triển thành phần tùy chỉnh để hiển thị các thông báo trợ giúp cho các phần tử đầu vào của một biểu mẫu Web. Xử lý các sự kiện và cập nhật giao diện người dùng Nhiều thành phần JSF HTML có các thuộc tính liên quan đến JavaScript cho phép bạn chỉ định các đoạn mã, được thực hiện trong trình duyệt Web khi một sự kiện UI (giao diện người dùng) nào đó xảy ra. Ví dụ, có bảy loại sự kiện về chuột được các thành phần JSF chuẩn hỗ trợ: onmouseover onmouseout onmousemove onmousedown onmouseup onclick ondblclick Khi một thành phần UI tập trung hay không tập trung vào bàn phím, nó tạo các sự kiện có thể bắt giữ được thông qua các thuộc tính onfocus và onblur. Các sự kiện onkeydown, onkeyup và onkeypress được thực hiện khi một phím được nhấn hoặc nhả ra. Ngoài ra, thành phần <h:form> chấp nhận các thuộc tính onsubmit và onreset và các thành phần đầu vào có các thuộc tính onchange và onselect, có thể được sử dụng để gọi một hàm JavaScript khi trạng thái của phần tử biểu mẫu thay đổi. Bạn cũng có thể sử dụng các thuộc tính có liên quan đến JavaScript của các phần tử HTML trực tiếp có trong một trang JSF thay vì đang được hoàn trả bởi các thành phần JSF. Ví dụ, thẻ <body> có các thuộc tính onload và onunload. Sự kiện onload được thực hiện khi hoàn thành việc nạp một trang trong trình duyệt Web. Sự kiện onunload xảy ra khi người dùng rời khỏi trang này. Một trình xử lý sự kiện JavaScript điển hình sử dụng các DOM API trong trình duyệt Web để cập nhật các đặc tính của các phần tử HTML được các thành phần JSF hoàn trả. Bạn có thể dễ dàng xác định vị trí các đối tượng biểu diễn các phần tử HTML khi sử dụng DOM Core API. Ví dụ, bạn có thể sử dụng document.getElementById( ) để tìm một phần tử có mã nhận dạng ID đã biết. DOM HTML API mở rộng DOM Core API, bổ sung thêm các phương thức và các đặc tính cụ thể cho các văn bản HTML. Sử dụng document.forms.myFormId để nhận được các đối tượng biểu diễn một biểu mẫu trong trình duyệt Web và sau đó lấy được một mảng của các đối tượng biểu diễn các phần tử của biểu mẫu bằng myForm.elements. Một đặc tính rất có ích là className, cho phép bạn thay đổi thuộc tính class (lớp) của một phần tử HTML. Đặc tả DOM HTML (xem Tài nguyên) mô tả tất cả các đặc tính và các phương thức tiêu chuẩn của các đối tượng biểu diễn các phần tử của một trang ở phía máy khách. Hầu hết các trình duyệt Web, bao gồm IE, Firefox, Netscape, Safari và Opera, hỗ trợ các đặc tính bổ sung, chẳng hạn như innerHTML, cho phép bạn thay đổi các nội dung của một phần tử HTML. Các ví dụ trong phần này hiển thị cách sử dụng các thuộc tính có liên quan đến JavaScript của các thành phần JSF HTML và cách cập nhật các giao diện người dùng bằng cách sử dụng HTML DOM API. Việc đặt các kịch bản lệnh trong các trang JSF Mã JavaScript có thể được chèn vào trong một trang JSF như trong bất kỳ trang Web thông thường nào, sử dụng các phần tử <script> của HTML (xem Liệt kê 1). Bạn có thể sử dụng mã JavaScript để tạo nội dung HTML với document.write() trong trình duyệt Web, nhưng điều này hiếm khi cần. Trong hầu hết trường hợp, bạn sẽ đặt các phần tử <script> trong tiêu đề của trang, trong đó sẽ chứa các hàm JavaScript được gọi từ các thuộc tính sự kiện, chẳng hạn như onclick, onsubmit và onchange. Bạn cũng có thể sử dụng phần tử <noscript> để cảnh báo người dùng nếu JavaScript bị vô hiệu hóa trong trình duyệt của họ. Liệt kê 1. Sử dụng thẻ <script> <html> <head> <script type="text/javascript"> function myEventHandler( ) { } </script> </head> <body> <noscript> This page requires JavaScript. </noscript> </body> </html> Apache MyFaces Tobago Nếu bạn thích sử dụng các thành phần JSF thay cho các thẻ HTML, bạn có thể sử dụng thành phần <tc:script> của MyFaces Tobago, để hoàn trả phần tử <script> cho bạn. Đặt mã JavaScript của bạn trong tệp .js nếu bạn muốn gọi các hàm giống nhau trong nhiều trang. Các kịch bản lệnh ngoài phải được nhập khẩu vào các trang Web, sử dụng thuộc tính src của thẻ <script> (xem Liệt kê 2). Trong trường hợp này, chắc chắn là các tiền tố /faces/ không được thêm vào URL của kịch bản lệnh này, URL này có thể xảy ra nếu bạn sử dụng một URI tương đối trong thuộc tính src. Cách đơn giản nhất để tránh những vấn đề này là sử dụng hậu tố .faces. Nếu bạn thích tiền tố /faces/ để yêu cầu các trang JSF, hãy xác định một URI tuyệt đối cho tệp JavaScript, bao gồm đường dẫn ngữ cảnh trong thuộc tính src của thẻ <script>. Liệt kê 2. Nhập khẩu các kịch bản lệnh ngoài <script type="text/javascript" request.contextPath}/scripts/MyScript.js"> </script> <script type="text/javascript" src="<%=request.getContextPath()%>/AnotherScript.js"> </script> Ẩn dấu và hiển thị các thành phần JSF tùy chọn Trong Phần 1 của loạt bài này, bạn đã thấy cách thiết lập các lớp phong cách của các thành phần JSF ở phía máy chủ bằng cách sử dụng thuộc tính styleClass. Bạn cũng có thể thiết lập hoặc thay đổi các lớp phong cách ở phía máy khách bằng cách sử dụng JavaScript và DOM. Ví dụ sau chỉ ra cách thu hẹp và mở rộng một nhóm các thành phần tùy chọn khi sử dụng đặc tính CSS display (hiển thị). Một biểu mẫu tìm kiếm đơn giản (xem Hình 1) có chứa một trường văn bản yêu cầu, hai hộp kiểm tra và một danh sách thả xuống. Khi người sử dụng đánh dấu chọn More Options (Nhiều tùy chọn hơn), ô chứa thành phần Match Case (Trường hợp giống nhau) và Language (Ngôn ngữ) được hiển thị. Nếu người dùng không đánh dấu chọn More Options, các thành phần tùy chọn bị thu hẹp lại. Hình 1. Ví dụ SearchForm Ví dụ SearchForm.jsp (xem Liệt kê 3) sử dụng các thành phần JSF chuẩn để xây dựng Web từ đó. Các thành phần tùy chọn được đặt trong một thùng chứa <h:panelGrid> được hoàn trả như là một bảng HTML. Ô tùy chọn được nhìn thấy hoặc ẩn dấu ở phía máy khách khi sử dụng một hàm JavaScript có tên là updatePanelClass(). Như tên gọi của nó cho thấy, hàm này thay đổi lớp phong cách của phần tử <table> được <h:panelGrid> hoàn trả. Hàm updatePanelClass() được gọi mỗi khi người dùng thay đổi trạng thái của hộp kiểm tra có nhãn là More Options vì cuộc gọi updatePanelClass() được mã hoá trong các thuộc tính onclick của các thành phần <h:selectBooleanCheckbox>. Liệt kê 3. Ví dụ SearchForm.jsp <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <f:view> <html> <head> <title>Search Form </title> </head> <body onload="initForm()"> <h1>Search Form</h1> <h:form id="searchForm"> <h:panelGrid columns="1" border="0" cellspacing="5"> <h:panelGroup> <h:outputLabel value="Text: " for="text"/> <h:inputText id="text" value="#{searchBean.text}" required="true" requiredMessage="Required" size="20"/> <h:message for="text"/> </h:panelGroup> <h:panelGroup> <h:selectBooleanCheckbox id="moreOptions" value="#{searchBean.moreOptions}" onclick="updatePanelClass()"/> <h:outputLabel value="More Options" for="moreOptions"/> </h:panelGroup> <h:panelGrid id="optionsPanel" columns="1" border="0" cellspacing="5"> <h:panelGroup> <h:selectBooleanCheckbox id="matchCase" value="#{searchBean.matchCase}"/> <h:outputLabel value="Match Case" for="matchCase"/> </h:panelGroup> <h:panelGroup> <h:outputLabel value="Language: " for="language"/> <h:selectOneMenu id="language" value="#{searchBean.language}"> <f:selectItem itemValue="English" itemLabel="English"/> <f:selectItem itemValue="Spanish" itemLabel="Spanish"/> <f:selectItem itemValue="French" itemLabel="French"/> </h:selectOneMenu> </h:panelGroup> </h:panelGrid> <h:commandButton id="search" value="Search" action="#{searchBean.searchAction}"/> </h:panelGrid> </h:form> </body> </html> </f:view> Trang SearchForm.jsp tạo ra HTML được hiển thị trong Liệt kê 4. Quan sát cách các thành phần JSF chuẩn thêm tiền tố searchForm: đến các mã nhận dạng (ID) của các phần tử HTML được hoàn trả bởi các thành phần lồng nhau trong biểu mẫu JSF có ID của nó là searchForm. Liệt kê 4. SearchForm.jsp tạo ra HTML <html> <head> <title>Search Form</title> </head> <body onload="initForm()"> <h1>Search Form</h1> <form id="searchForm" name="searchForm" method="post" action="/jsf12js/SearchForm.faces" enctype="application/x-www-form-urlencoded"> <table border="0" cellspacing="5"> <tbody> <tr> <td> <label for="searchForm:text">Text: </label> <input id="searchForm:text" type="text" name="searchForm:text" size="20" /> </td> </tr> <tr> <td> <input id="searchForm:moreOptions" type="checkbox" name="searchForm:moreOptions" checked="checked" onclick="updatePanelClass()" /> <label for="searchForm:moreOptions">More Options</label></td> </tr> <tr> <td> <table id="searchForm:optionsPanel" border="0" cellspacing="5"> <tbody> <tr> <td> <input id="searchForm:matchCase" type="checkbox" name="searchForm:matchCase" /> <label for="searchForm:matchCase">Match Case</label></td> </tr> <tr> <td> <label for="searchForm:language">Language: </label> <select id="searchForm:language" name="searchForm:language" size="1"> <option value="English">English</option> <option value="Spanish">Spanish</option> <option value="French">French</option> </select></td> </tr> </tbody> </table> </td> </tr> <tr> <td><input id="searchForm:search" type="submit" name="searchForm:search" value="Search" /></td> </tr> </tbody> </table> </form> </body> </html> Liệt kê 5 cho thấy phần tử <style> của trang SearchForm.jsp có tiêu đề của nó chứa cả các lớp phong cách và cả các hàm JavaScript. Lớp visible (có thể nhìn thấy) chỉ đặt lề trái của ô tùy chọn và không cần bất kỳ giá trị cài đặt nào khác vì bảng HTML được hiển thị theo mặc định. Lớp hidden (ẩn) thiết lập đặc tính CSS display tới none (không), tắt chức năng hiển thị của bảng này. Liệt kê 5. Các lớp phong cách của SearchForm.jsp <style type="text/css"> .visible { margin-left: 40px; } .hidden { display: none; } </style> Hàm updatePanelClass() (xem Liệt kê 6) xác định vị trí hộp kiểm tra searchForm:moreOptions và bảng searchForm:optionsPanel với document.getElementById(). Các đối tượng panel biểu diễn phần tử <table id="searchForm:optionsPanel"> được <h:panelGrid id="optionsPanel"> hoàn trả và các đối tượng checkbox (hộp kiểm tra) biểu diễn phần tử <input id="searchForm:moreOptions"> được <h:selectBooleanCheckbox id="moreOptions"> hoàn trả. Hàm updatePanelClass() nhận được trạng thái của đối tượng checkbox từ đặc tính DOM checked (được kiểm tra) và thiết lập lớp phong cách của bảng panel, sử dụng đặc tính DOM className. Liệt kê 6. Hàm updatePanelClass() của SearchForm.jsp function updatePanelClass() { var checkbox = document.getElementById("searchForm:moreOptions"); var panel = document.getElementById("searchForm:optionsPanel"); panel.className = checkbox.checked ? "visible" : "hidden"; } [...]... lập các phong cách mặc định của các thành phần JSF Trong phần này, bạn sẽ thấy cách sử dụng các kỹ thuật tương tự để thiết lập thuộc tính liên quan đến JavaScript Ngoài ra, các ví dụ mẫu được trình bày ở đây sử dụng một thuộc tính tuỳ chỉnh, được bổ sung thêm bằng thẻ cho các thành phần JSF chuẩn Phát triển các thành phần JSF tùy chỉnh Tiếp theo, bạn sẽ thấy cách xây dựng một thành phần. .. thể phát triển các thành phần JSF tùy chỉnh để thiết lập các cơ chế dựa trên JavaScript và thậm chí bạn có thể thêm các thuộc tính tùy chỉnh tới các thành phần hiện có Phần tiếp theo cho thấy cách thực hiện các tính năng UI chung để nâng cao các thành phần JSF chuẩn Sử dụng các thuộc tính tuỳ chỉnh để kích hoạt các tính năng UI mới Phần 1 của loạt bài này đã chỉ cho bạn cách xây dựng một thành phần. .. cộng đồng Ajax năng động, được chuyên gia Ajax Jack Herrington đăng lên, sẽ kết nối bạn với những người có thể có các câu trả lời mà bạn đang tìm kiếm ngay bây giờ Sử dụng thành phần tùy chỉnh trong một trang JSF Trang HelpOnFocus.jsp (xem Liệt kê 24) là một ví dụ khác có sử dụng các thành phần Biểu mẫu đầu vào JSF chứa ba thành phần: một trường văn bản, một hộp kiểm tra và một danh... trang này được thực hiện, các thành phần duyệt cây thành phần lồng nhau và thiết lập các thuộc tính onfocus và onblur để hiển thị và xóa thông báo trợ giúp Liệt kê 23 cho thấy HTML được các thành phần JSF hoàn trả Thuộc tính onfocus chứa cuộc gọi showHelpOnFocus() cùng với biểu thức alert('focus') từ ví dụ được hiển thị trong Liệt kê 22 Các ký tự & và dấu phân cách " của chuỗi đã mã hóa... thế nào để phát triển các trình xử lý sự kiện JavaScript để cập nhật HTML được các thành phần JSF hoàn trả Nó giới thiệu một số kỹ thuật Web, bao gồm: Thiết lập thuộc tính className để thay đổi giá trị của thuộc tính class Sử dụng đặc tính innerHTML để chèn một số nội dung trong một phần tử HTML Ẩn và hiển thị các thành phần JSF với CSS Thực hiện xác nhận hợp lệ phía máy khách với JavaScript. .. thuộc tính onfocus của mỗi thành phần đầu vào lồng nhau để chỉ ra một thông báo trợ giúp trong một phần tử khi phần tử được hoàn trả tập trung chú ý Thuộc tính onblur của thành phần lồng nhau cũng được thay đổi để xóa thông báo trợ giúp khi các phần tử không tập trung vào bàn phím Liệt kê 14 Sử dụng thành phần trong một trang JSF . Các ứng dụng Craft Ajax sử dụng JSF với CSS và Javascript, Phần 2: Các biểu mẫu JSF động Khám phá hỗ trợ JavaScript trong các thành phần JSF chuẩn Andrei Cioroianu, Nhà phát triển và Tư. thị trong Liệt kê 4. Quan sát cách các thành phần JSF chuẩn thêm tiền tố searchForm: đến các mã nhận dạng (ID) của các phần tử HTML được hoàn trả bởi các thành phần lồng nhau trong biểu mẫu JSF. liên quan đến JavaScript của các thành phần JSF HTML và cách cập nhật các giao diện người dùng bằng cách sử dụng HTML DOM API. Việc đặt các kịch bản lệnh trong các trang JSF Mã JavaScript có
Ngày đăng: 07/08/2014, 10:22
Xem thêm: Các ứng dụng Craft Ajax sử dụng JSF với CSS và Javascript, Phần 2: Các biểu mẫu JSF động Khám phá hỗ trợ JavaScript trong các thành phần JSF chuẩn pot, Các ứng dụng Craft Ajax sử dụng JSF với CSS và Javascript, Phần 2: Các biểu mẫu JSF động Khám phá hỗ trợ JavaScript trong các thành phần JSF chuẩn pot
