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ỹ...
Nội dung trích xuất từ 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 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 độngKhám phá hỗ trợ JavaScript trong các thành phần JSF chuẩnAndrei Cioroianu, Nhà phát triển và Tư vấn Java cao cấp, DevsphereTó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áttriển Java™ Andrei Cioroianu đã chỉ ra cách sử dụng các thuộc tính phong cáchcủa các thành phần JavaServer Faces (JSF) và cách thiết lập các giá trị mặc địnhcho 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ìmhiểu một số kỹ thuật Web dựa trên Document Object Model (DOM-Mô hình đốitượ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ùychọ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áchphá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ùngNhiều thành phần JSF HTML có các thuộc tính liên quan đến JavaScript cho phépbạn chỉ định các đoạn mã, được thực hiện trong trình duyệt Web khi một sự kiệnUI (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 đượccá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ệnonkeydown, onkeyup và onkeypress được thực hiện khi một phím được nhấn hoặcnhả ra. Ngoài ra, thành phần 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ầntử HTML trực tiếp có trong một trang JSF thay vì đang được hoàn trả bởi cácthành phần JSF. Ví dụ, thẻ có các thuộc tính onload và onunload. Sự kiệnonload đượ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ìnhduyệ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ầnJSF 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ầntử HTML khi sử dụng DOM Core API. Ví dụ, bạn có thể sử dụngdocument.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ằngmyForm.elements. Một đặc tính rất có ích là className, cho phép bạn thay đổithuộ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ươngthứ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áykhá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 đếnJavaScript của các thành phần JSF HTML và cách cập nhật các giao diện ngườidù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 JSFMã JavaScript có thể được chèn vào trong một trang JSF như trong bất kỳ trangWeb thông thường nào, sử dụng các phần tử 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ử trong tiêu đề của trang, trong đó sẽ chứa các hàmJavaScript đượ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ử để cảnh báo người dùngnếu JavaScript bị vô hiệu hóa trong trình duyệt của họ.Liệt kê 1. Sử dụng thẻ function myEventHandler(...) { ... } This page requires JavaScript. ...Apache MyFaces TobagoNế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 của MyFaces Tobago, để hoàn trả phần tử 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 ...