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

Chia sẻ: Nguyen Nhi | Ngày: | Loại File: PDF | Số trang:48

Thêm vào BST

Báo xấu

90
lượt xem 24
download

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

Mô tả tài liệu

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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

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ư và , 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ử 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ẻ như trong Liệt kê 1: Liệt kê 1. Sử dụng thẻ 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 MyFaces Tomahawk, để trả về thẻ 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 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ử 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ư (xem Liệt kê 3): Liệt kê 3. Các đường liên kết HTML và JSF HTML 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 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.
Liệ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 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ụ, và có mười thuộc tính liên quan đến CSS tiếp theo:
style  styleClass  errorClass  errorStyle  fatalClass  fatalStyle  infoClass  infoStyle  warnClass  warnStyle  Chỉ 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ẻ và 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.
Hì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
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); }
public float getTotalPrice() { float total = 0; for (int i = 0; i < items.length; i++) total += items[i].getItemPrice(); return total; } } Lớp ItemBean (xem Liệt kê 8) có ba đặc tính đọc/ghi có tên là description (mô tả), quantity, (số lượng) và unitPrice (đơn giá) và một đặc tính chỉ đọc tên là itemPrice. Liệt kê 8. Ví dụ ItemBean package jsfcssjs;
public class ItemBean implements java.io.Serializable { private String description; private int quantity; private float unitPrice; public ItemBean() { } public ItemBean(String description, int quantity, float unitPrice) { this.description = description; this.quantity = quantity; this.unitPrice = unitPrice; } ...
public float getItemPrice() { return unitPrice * quantity; } } Tệp TableStyles.css (hiển thị trong Liệt kê 9) chứa các phong cách được sử dụng cho bảng dữ liệu. Liệt kê 9. Ví dụ TableStyles.css body { font-family: Arial; } .tablebg { background-color: #D0D0A0; } .header { font-weight: bold; } .footer { font-weight: bold; } .text { text-align: left; } .number { text-align: right; }
.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ử . 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ử 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ử 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 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
Order Table Order Table
Liệt kê 11 hiển thị HTML được trang TableStyles.jsp tạo ra. Liệt kê 11. TableStyles.jsp tạo ra HTML Order Table
Order Table Description Quantity Unit Price Item Price Total Price
$240.92 Domain Name 3 $7.99 $23.97 SSL Certificate 1 $119.00 $119.00
... ... ... ...
Thành phần 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ử của ô cuối trang. Thuộc tính footerClass của thành phần 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 để trả về tổng số này trong một phần tử để 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 ... ...