Cá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

Cá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

Nế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>

<link rel="stylesheet" type="text/css"

href="${pageContext.request.contextPath}/MyStyles.css">

<link rel="stylesheet" type="text/css"

href="<%=request.getContextPath()%>/styles/MoreStyles.css">

Sử dụng MyFaces Tomahawk

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 các thành phần của <t:stylesheet> MyFaces Tomahawk, để trả về thẻ <link>

cho bạn.

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

dẫ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; }

Cá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.