CSS cho phép bạn thay đổi các đặc tính trực quan của các thành phần Web trong Ajax và các ứng dụng khác để chúng có thể có một phong cách thân mật và đặc biệt.. Bạn cũng có thể sử dụng k
Trang 1Các ứng dụng Craft Ajax sử dụng JSF với CSS và Javascript, Phần 1: Tăng
cường diện mạo của các trang JSF của bạn
Khám phá sự hỗ trợ CSS 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: Các ứng dụng Web điển hình yêu cầu sử dụng Cascading Style Sheets
(CSS-Các bảng định kiểu nhiều tầng) và JavaScript, cùng với một khung công tác phía-máy chủ, như là JavaServer Faces (JSF) CSS cho phép bạn thay đổi các đặc tính trực quan của các thành phần Web trong Ajax và các ứng dụng khác để chúng
có thể có một phong cách thân mật và đặc biệt Trong bài đầu tiên của loạt bài có hai phần này, hãy khám phá cách sử dụng các thuộc tính có liên quan đến CSS của các thành phần JSF chuẩn Ngoài ra, tìm hiểu cách tạo một thành phần JSF tuỳ chỉnh để thiết lập các phong cách mặc định của các thành phần lồng nhau, làm cho
nó dễ dàng đảm bảo một phong cách phù hợp cho tất cả các trang của ứng dụng Web của bạn Bạn cũng có thể sử dụng kỹ thuật này để thiết lập theo chương trình các thuộc tính thành phần khác, như bạn sẽ thấy trong Phần 2, phần này sẽ chỉ ra cách làm cho các biểu mẫu JSF động hơn khi sử dụng JavaScript
Sử dụng các thuộc tính phong cách của các thành phần JSF
Hầu như mọi thành phần JSF HTML có hai thuộc tính tùy chọn có tên là style và styleClass, được hoàn trả như các thuộc tính style (phong cách) và class (lớp) trong kết quả HTML Một số các thành phần, như <h:dataTable> và
<h:panelGrid>, có các thuộc tính phong cách bổ sung cho các khía cạnh của
chúng Phần này bàn về các thuộc tính liên quan đến CSS của thư viện JSF
HTML
Liên kết tệp CSS đến các trang JSF của bạn
Trang 2Nếu một trang Web có phong cách độc đáo, bạn có thể định nghĩa các quy tắc phong cách trong phần tử <style> của tiêu đề của trang Bạn cũng có thể xác định thông tin phong cách cho một thành phần JSF bằng cách sử dụng thuộc tính style Tuy nhiên, trong hầu hết trường hợp, có lẽ bạn sẽ thích bao gồm các quy tắc phong cách trong các tệp CSS riêng để bạn có thể áp dụng chúng trên nhiều trang Bạn có thể liên kết một bảng định kiểu ngoài đến một trang Web bằng cách sử dụng thẻ
<link> như trong Liệt kê 1:
Liệt kê 1 Sử dụng thẻ <link>
Trong Liệt kê 1, các thuộc tính href chứa các URL tuyệt đối Bạn cũng có thể sử dụng các đường liên kết tương đối cho các tệp CSS, nhưng tốt hơn là chứa đường
Trang 3dẫn ngữ cảnh với ${pageContext.request.contextPath} hoặc
<%=request.getContextPath()%> nếu các URL của các trang JSF chứa tiền tố /faces/ (các bề mặt) Trong trường hợp này, đường liên kết tương đối bất kỳ đến một tệp, hình ảnh hoặc một số tài nguyên khác của CSS sẽ dẫn đến một yêu cầu HTTP có chứa tiền tố /faces/ có nghĩa là các tệp không phải JSF sẽ được các Faces servlet sử dụng Servet này hoạt động, nhưng không hiệu quả Bạn có thể sử dụng
an toàn các đường liên kết tương đối trong các ứng dụng dựa trên JSF của bạn nếu bạn yêu cầu các trang JSF sử dụng hậu tố faces, để loại bỏ vấn đề được mô tả ở trên
Định nghĩa và sử dụng các quy tắc phong cách
Các tệp CSS chứa các quy tắc của bảng định kiểu áp dụng cho các phần tử HTML, các phần tử này có thể được các thành phần JSF hoàn trả, hay có thể đơn giản được bao gồm giữa các thành phần của trang JSF Ví dụ, nếu bạn muốn các đường liên kết của bạn được gạch chân khi dùng chuột lướt trên chúng, thì bạn sẽ sử dụng các quy tắc sau (xem Liệt kê 2):
Liệt kê 2 Các quy tắc phong cách cho các đường liên kết
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Trang 4Các quy tắc này sẽ được áp dụng cho đường liên kết bất kỳ, cho dù phần tử <a> trực tiếp được tính đến trong trang JSF, hoặc nó được một thành phần JSF tạo như
<h:commandLink> (xem Liệt kê 3):
Liệt kê 3 Các đường liên kết HTML và JSF
<a href="LinkStyles.faces">HTML Link</a>
<h:commandLink value="JSF Link"/>
Liệt kê 4 cho thấy cách bạn có thể chỉ định các phong cách nội tuyến cho một thành phần JSF
Liệt kê 4 Thành phần JSF với thuộc tính phong cách
<h:commandLink value="Red Link" style="color: red"/>
Tuy nhiên, trong hầu hết trường hợp, bạn sẽ định nghĩa các lớp phong cách (xem Liệt kê 5) trong các tệp CSS để bạn có thể sử dụng các quy tắc phong cách giống nhau cho nhiều thành phần
Trang 5Liệt kê 5 Ví dụ về lớp phong cách
.GreenClass { color: green; }
Tên lớp phong cách sẽ được cung cấp qua thuộc tính styleClass đến các thành phần JSF như trong Liệt kê 6
Liệt kê 6 Thành phần JSF với thuộc tính styleClass
<h:commandLink value="Green Link" styleClass="GreenClass"/>
Bạn có thể tìm mã từ các liệt kê 1-6 trong các tệp LinkStyles.jsp và LinkStyles.css
từ đường liên kết mã ví dụ trong bài viết này (xem Tải về)
Các thành phần JSF có nhiều lớp phong cách
Như đã đề cập ở trên, một số thành phần JSF có nhiều hơn một thuộc tính phong cách Ví dụ, <h:message> và <h:messages> có mười thuộc tính liên quan đến CSS tiếp theo:
Trang 6Chỉ có hai trong số đó được chọn cho mỗi thông báo, tùy thuộc vào mức độ
nghiêm trọng của thông báo đang được hoàn trả Các thẻ JSF của các thành phần UISelectOne và UISelectMany chấp nhận các thuộc tính enabledClass và
disabledClass cho các mục của các liệt kê được đưa ra Các thẻ <h:dataTable> và
<h:panelGrid> có các thuộc tính lớp cho bảng chính, tiêu đề (đầu trang), cuối trang, các hàng và các cột Các ví dụ sau cho thấy cách sử dụng các thuộc tính liên quan đến CSS của một bảng dữ liệu được hiển thị trong ảnh chụp màn hình tiếp theo
Trang 7Hình 1 Ví dụ TableStyles
Trước tiên, bạn cần một mô hình dữ liệu cho thành phần bảng Lớp OrderBean (hiển thị trong Liệt kê 7) mở rộng javax.faces.model.ArrayDataModel Một ứng dụng thực sẽ lấy dữ liệu của mô hình từ một cơ sở dữ liệu, nhưng để đơn giản, OrderBean được khởi tạo từ một mảng tĩnh
Liệt kê 7 Ví dụ OrderBean
Trang 8
package jsfcssjs;
import javax.faces.model.ArrayDataModel;
public class OrderBean extends ArrayDataModel { private static ItemBean items[] = new ItemBean[] { new ItemBean("Domain Name", 3, 7.99f), new ItemBean("SSL Certificate", 1, 119.00f), new ItemBean("Web Hosting", 1, 19.95f), new ItemBean("Email Box", 20, 0.15f), new ItemBean("E-Commerce Setup", 1, 25.00f), new ItemBean("Technical Support", 1, 50.00f) };
public OrderBean() {
super(items);
}
Trang 10public class ItemBean implements java.io.Serializable {
private String description;
private int quantity;
private float unitPrice;
Trang 11public float getItemPrice() {
return unitPrice * quantity;
body { font-family: Arial; }
.tablebg { background-color: #D0D0A0; }
.header { font-weight: bold; }
.footer { font-weight: bold; }
.text { text-align: left; }
.number { text-align: right; }
Trang 12.graybg { background-color: #DDDDDD; }
.whitebg { background-color: #FFFFFF; }
Ví dụ TableStyles.jsp jsp (xem Liệt kê 10) có chứa một thành phần bảng JSF có sử dụng các lớp phong cách được định nghĩa trong TableStyles.css Sử dụng giá trị của thuộc tính styleClass cho phần tử <table> Các thuộc tính headerClass và footerClass xác định các phong cách cho các ô tiêu đề và cuối trang của bảng Thuộc tính columnClasses chứa danh sách có phân tách bằng một dấu phẩy của các lớp được sử dụng cho các phần tử <td> của các ô dữ liệu
Một danh sách khác của các lớp có thể được xác định thông qua thuộc tính
rowClasses Các lớp này được sử dụng cho các phần tử <tr> của bảng Trong ví dụ TableStyles.jsp, chỉ có hai lớp hàng, nhưng bảng có sáu hàng Trình hoàn trả (renderer) JSF của thành phần <h:dataTable> sẽ thay thế hai lớp phong cách, khi
sử dụng lớp graybg cho các hàng đầu tiên, thứ ba và thứ năm, và lớp whitebg cho các hàng thứ hai, thứ tư và thứ sáu Thuộc tính var định nghĩa một biến có tên là row (hàng), được dùng để truy cập dữ liệu hàng hiện tại trong khi hoàn trả Toàn
bộ dữ liệu được lấy ra từ mô hình orderBean, nó được liên kết tới bảng này thông qua thuộc tính value (giá trị)
Liệt kê 10 Ví dụ TableStyles.jsp
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
Trang 13<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<h:dataTable id="table" var="row" value="#{orderBean}"
styleClass="tablebg" headerClass="header" footerClass="footer" columnClasses="text,number,number,number"
rowClasses="graybg,whitebg" border="0" cellpadding="5"> <h:column>
<f:facet name="header">
Trang 14<h:outputText value="Description"/> </f:facet>
<h:outputText value="#{row.description}"/> <f:facet name="footer">
<h:outputText value="Total Price"/> </f:facet>
<h:column>
<f:facet name="header">
<h:outputText value="Unit Price"/>
</f:facet>
Trang 16Liệt kê 11 hiển thị HTML được trang TableStyles.jsp tạo ra
Liệt kê 11 TableStyles.jsp tạo ra HTML
Trang 17<th class="header" scope="col">Unit Price</th>
<th class="header" scope="col">Item Price</th>
Trang 19<tr class="graybg">
</tr>
<tr class="whitebg">
</tr>
<tr class="graybg">
</tr>
<tr class="whitebg">
Trang 20Thành phần <h:column> còn lại của bảng JSF từ ví dụ TableStyles.jsp sử dụng thuộc tính footerClass để xác định hai lớp cho ô cuối trang hiển thị tổng số đơn đặt hàng Các lớp footer (cuối trang) và number (số) sẽ được sử dụng cho phần tử
<td> của ô cuối trang Thuộc tính footerClass của thành phần <h:column> chỉ có sẵn trong phiên bản JSF 1.2 Nếu bạn sử dụng một phiên bản JSF có trước, bạn cần bao bọc thành phần <h:outputText> để trả về tổng số này trong một phần tử
<div> để có thể thêm hiệu ứng sắp thẳng hàng của lớp number (xem Liệt kê 12)
Tư liệu mã nguồn có chứa các mẫu mã cho cả hai phiên bản JSF 1.1 và JSF 1.2
Liệt kê 12 Phiên bản JSF 1.1 của ví dụ TableStyles.jsp
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
Trang 22Khi xây dựng các ứng dụng lớn có nhiều trang JSF, bạn có thể không thích ý tưởng thiết lập thủ công thuộc tính styleClass cho mọi cá thể thành phần Các thành phần JSF HTML chuẩn không có các phong cách mặc định, nhưng khi bạn
sẽ thấy trong phần này, có thể đi ngang qua cây thành phần JSF và thiết lập theo chương trình các lớp phong cách mặc định Để thực hiện thao tác này, bạn cần phải biết cách tạo các cây này và cách tạo HTML
Hiểu cách xây dựng các cây thành phần JSF
Tất cả các yêu cầu bề mặt (faces) bị chặn bởi Faces Servlet, được cấu hình trong
bộ mô tả web.xml của bất kỳ ứng dụng Web dựa trên JSF nào Đối với mỗi yêu cầu, Faces Servlet khởi tạo một đối tượng javax.faces.context.FacesContext và gọi các phương thức execute() và render() của một cá thể
javax.faces.lifecycle.Lifecycle Phương thức execute() xử lý tất cả các giai đoạn của yêu cầu JSF xử lý vòng đời, trừ một giai đoạn cuối cùng (có tên là Render Response), được phương thức render() thực hiện
Các phương thức lưu trữ trạng thái
Tùy thuộc vào giá trị của tham số ngữ cảnh
javax.faces.STATE_SAVING_METHOD tham số này có thể được thiết lập trong tệp web.xml, các cây thành phần được lưu trữ trên máy chủ hoặc trên máy khách Việc thực hiện JSF có thể sử dụng quy mô session (phiên làm việc) để duy trì các cây thành phần ở phía máy chủ Phương thức này hiệu quả, nhưng khung công tác
JSF có thể bị lẫn lộn nếu người dùng nhấn nút Back (Quay lại) của trình duyệt, trả
về một biểu mẫu đã gửi đi Thật tốt để lưu trữ mỗi cây thành phần ở phía máy khách ở đó một phần tử biểu mẫu ẩn giữ bản sao theo thứ tự của cây có liên quan đến thể hiện của trang Việc lưu trữ cây thành phần ở phía máy khách làm tăng lưu lượng tuyến và yêu cầu các nguồn tài nguyên CPU bổ sung thêm để sắp xếp theo
Trang 23thứ tự và sắp xếp không theo thứ tự các cây đối tượng, nhưng phương thức này tin cậy hơn so với việc sử dụng quy mô session
Trong giai đoạn đầu (có tên Restore View (Khung nhìn khôi phục lại)), việc thực hiện JSF nhận được trình xử lý (handler) khung nhìn của ứng dụng, đó là cá thể javax.faces.application.ViewHandler, và gọi phương thức restoreView() nếu yêu cầu này là gửi thông báo lại (ví dụ, người dùng nhấn vào một nút Submit-Gửi đi) Trong trường hợp này, cây thành phần đã được xây dựng và được lưu trong lúc xử
lý một yêu cầu Faces trước đó (xem phần bên về các phương thức lưu trữ trạng thái)
Nếu yêu cầu hiện tại không phải là gửi một thông báo trả lại (ví dụ, người dùng nhấn vào một đường liên kết Faces), thì việc thực hiện JSF gọi phương thức renderResponse() của phương thức FacesContext và createView() hiện có của cá thể ViewHandler Cuộc gọi renderResponse() chỉ dẫn cho việc thực hiện JSF nhảy
từ giai đoạn hiện tại là Restore View, đến giai đoạn Render Response (Đáp ứng hoàn trả) Phương thức createView() của trình xử lý khung nhìn mặc định chỉ tạo
ra một thành phần javax.faces.component.UIViewRoot Phần còn lại của cây sẽ được tạo ra trong giai đoạn Render Response, khi việc thực hiện JSF gọi phương thức renderView() của trình xử lý khung nhìn
Cho dù cây thành phần được khôi phục lại hoặc phải được tạo, việc thực hiện JSF chuyển tiếp yêu cầu HTTP đến một trang JSF có liên quan tại một số điểm trong quá trình thực hiện phương thức renderView() Ví dụ, nếu bạn đã yêu cầu
/MyApp/MyPage.faces hoặc /MyApp/faces/MyPage.jsp, URI của trang JSF đã thực hiện là /MyApp/MyPage.jsp
Trang JSF bất kỳ có chứa thẻ thành phần, như <f:view> và <h:form>, được các trình xử lý thẻ JSP hỗ trợ Đây là những lớp Java™ thực hiện các giao diện được định nghĩa trong gói javax.servlet.jsp.tagext Khi trang này được thực hiện, thùng
Trang 24chứa (container) JSP tạo các cá thể của các trình xử lý thẻ và gọi các phương thức của chúng Trình xử lý thẻ của một thành phần JSF 1.2 bất kỳ mở rộng
javax.faces.webapp.UIComponentELTag Nếu bạn sử dụng API của JSF 1.1, lớp của trình xử lý thẻ mở rộng javax.faces.webapp.UIComponentTag hoặc
javax.faces.webapp.UIComponentBodyTag Bất kể bạn sử dụng phiên bản JSF nào, thì các trình xử lý thẻ JSF vẫn tạo các cá thể thành phần trong giai đoạn Render Response nếu cây thành phần chưa được phục hồi trong giai đoạn Restore View
Bạn có thể bị lôi cuốn vào việc thực hiện javax.faces.event.PhaseListener để thiết lập các phong cách mặc định, nhưng điều này sẽ không hoạt động khi người dùng yêu cầu một trang bằng cách nhấn vào một đường liên kết hoặc nhập vào URL trong trình duyệt Web Trong trường hợp này, việc thực hiện JSF không thể khôi phục lại cây thành phần, lẽ ra phải được tạo trong giai đoạn Render Response Trước giai đoạn cuối này, cây thành phần không tồn tại và sau khi trả về đáp ứng, thật quá muộn để cập nhật các phong cách thành phần vì đầu ra HTML đã được tạo Vì vậy, các phong cách mặc định phải được thiết lập trong quá trình thực hiện giai đoạn Render Response trước khi hoàn trả các thành phần
Duyệt các cây thành phần bên phải trước khi hoàn trả các thành phần
JSF có đặc tính chỉ đọc thú vị có tên là rendersChildren Nếu đặc tính này là false (sai), chỉ có phương thức encodeBegin() và encodeEnd() sẽ được gọi để hoàn trả thành phần này Nếu getRendersChildren() trả về true (đúng), encodeChildren() cũng được gọi trong giai đoạn Render Response Những phương thức này thường
ủy quyền hoàn trả cho một lớp, lớp này phải thực hiện giao diện
javax.faces.render.Renderer, nhưng các thành phần JSF cũng có thể tạo HTML của mình, mà không cần sử dụng các trình hoàn trả (renderers)
