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 pot

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. 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 <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:  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ẻ <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. 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; } [...]... 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... Thiết lập các phong cách mặc định cho các thành phần JSF Khi 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à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... 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) Khi sử dụng phiên bản JSF 1.1, các phương thức mã hóa ban đầu được các phương thức của trình xử lý thẻ gọi Tuy nhiên, nếu một thành phần hoàn trả thành phần con riêng của nó, tất cả các trình xử lý thẻ của các thành phần lồng nhau ngừng gọi các phương... 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ể... và , đượ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 chứ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. .. 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ứ... thành phần được tạo ra Cho dù bạn sử dụng phiên bản JSF 1.1 hoặc 1.2, các thành phần lồng nhau được khởi tạo hoàn toàn và sẵn sàng được hoàn trả khi encodeChildren() được gọi Vì vậy, đây là nơi mà bạn có được cơ hội để thiết lập các phong cách mặc định Tiếp theo, bạn sẽ thấy cách tạo một phần tùy chỉnh để thiết lập thuộc tính styleClass cho tất cả các thành phần lồng nhau của nó, duyệt cây thành phần JSF. .. theo cách đệ quy Kỹ thuật được trình bày ở đây có thể được dùng để thiết lập các thuộc tính hoặc các đặc tính bất kì của các thành phần JSF, không chỉ là các phong cách mặc định Vì vậy ý tưởng tốt là tạo một lớp cơ sở chung có thể được tái sử dụng sau này Lớp SetupComponent mở rộng lớp UIComponentBase của JSF API và định nghĩa một phương thức trừu tượng có tên là setup(), nó được gọi cho mọi thành phần. .. việc hoàn trả trở thành trách nhiệm của các thành phần, có phương thức getRendersChildren() của nó trả về true (đúng) Quá trình hoàn trả này được thực hiện trong phiên bản JSF 1.1 đã có hiệu quả vì nó giảm tầng đệm, nhưng nó đòi hỏi các nhà phát triển ứng dụng tính đến nội dung HTML trong các thành phần Trong phiên bản JSF 1.2, bạn không cần phải sử dụng nữa vì việc hoàn trả . 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. 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. 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.