Thư viện tri thức trực tuyến
Kho tài liệu với 50,000+ tài liệu học thuật
© 2023 Siêu thị PDF - Kho tài liệu học thuật hàng đầu Việt Nam
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ỗ
Nội dung xem thử
Mô tả chi tiết
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