JSF - Các thành phần tổng hợp
JSF cung cấp cho các nhà phát triển một khả năng mạnh mẽ để xác định các thành phần tùy chỉnh của riêng họ, có thể được sử dụng để hiển thị nội dung tùy chỉnh.
Xác định thành phần tùy chỉnh
Xác định một thành phần tùy chỉnh trong JSF là một quá trình gồm hai bước.
| Bươc | Sự miêu tả |
|---|---|
| 1a | Tạo một thư mục tài nguyên. Tạo tệp xhtml trong thư mục tài nguyên với không gian tên tổng hợp. |
| 1b | Sử dụng các thẻ tổng hợp composite: interface, composite: thuộc tính và composite: thực hiện, để xác định nội dung của thành phần tổng hợp. Sử dụng cc.attrs trong composite: thực hiện để có được biến được xác định bằng cách sử dụng composite: thuộc tính trong composite: interface . |
Bước 1a: Tạo Thành phần Tùy chỉnh: loginComponent.xhtml
Tạo điểm hướng dẫn thư mục trong thư mục tài nguyên và tạo tệp loginComponent.xhtml trong đó.
Sử dụng không gian tên tổng hợp trong tiêu đề html.
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:composite = "http://java.sun.com/jsf/composite">
...
</html>Bước 1b: Sử dụng Thẻ tổng hợp: loginComponent.xhtml
Bảng sau mô tả việc sử dụng các thẻ tổng hợp.
| S. không | Thẻ & Mô tả |
|---|---|
| 1 | composite:interface Khai báo các giá trị có thể định cấu hình sẽ được sử dụng trong composite: implement. |
| 2 | composite:attribute Giá trị cấu hình được khai báo bằng thẻ này. |
| 3 | composite:implementation Khai báo thành phần JSF. Có thể truy cập các giá trị có thể định cấu hình được xác định trong giao diện composite: sử dụng biểu thức # {cc.attrs.attribute-name}. |
<composite:interface>
<composite:attribute name = "usernameLabel" />
<composite:attribute name = "usernameValue" />
</composite:interface>
<composite:implementation>
<h:form>
#{cc.attrs.usernameLabel} :
<h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
</h:form>Sử dụng thành phần tùy chỉnh
Sử dụng một thành phần tùy chỉnh trong JSF là một quá trình đơn giản.
| Bươc | Sự miêu tả |
|---|---|
| 2a | Tạo tệp xhtml và sử dụng không gian tên của thành phần tùy chỉnh. Không gian tên sẽ là http://java.sun.com/jsf/ <folder-name> nơi tên thư mục là thư mục trong thư mục tài nguyên chứa thành phần tùy chỉnh |
| 2b | Sử dụng thành phần tùy chỉnh như các thẻ JSF bình thường |
Bước 2a: Sử dụng Không gian tên tùy chỉnh: home.xhtml
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">Bước 2b: Sử dụng Thẻ tùy chỉnh: home.xhtml và Giá trị vượt qua
<h:form>
<tp:loginComponent
usernameLabel = "Enter User Name: "
usernameValue = "#{userData.name}" />
</h:form>Ứng dụng mẫu
Hãy để chúng tôi tạo một ứng dụng JSF thử nghiệm để kiểm tra thành phần tùy chỉnh trong JSF.
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên helloworld dưới một gói com.tutorialspoint.test như được giải thích trong chương JSF - Ứng dụng đầu tiên . |
| 2 | Tạo thư mục tài nguyên trong thư mục src → chính . |
| 3 | Tạo thư mục hướng dẫn trong thư mục src → chính → tài nguyên . |
| 4 | Tạo tệp loginComponent.xhtml trong thư mục src → main → resources → tutorialspoint . |
| 5 | Sửa đổi tệp UserData.java như được giải thích bên dưới. |
| 6 | Sửa đổi home.xhtml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 7 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
| số 8 | Cuối cùng, xây dựng ứng dụng dưới dạng tệp chiến tranh và triển khai nó trong Apache Tomcat Webserver. |
| 9 | Khởi chạy ứng dụng web của bạn bằng URL thích hợp như được giải thích bên dưới trong bước cuối cùng. |
loginComponent.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:composite = "http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name = "usernameLabel" />
<composite:attribute name = "usernameValue" />
<composite:attribute name = "passwordLabel" />
<composite:attribute name = "passwordValue" />
<composite:attribute name = "loginButtonLabel" />
<composite:attribute name = "loginButtonAction"
method-signature = "java.lang.String login()" />
</composite:interface>
<composite:implementation>
<h:form>
<h:message for = "loginPanel" style = "color:red;" />
<h:panelGrid columns = "2" id = "loginPanel">
#{cc.attrs.usernameLabel} :
<h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
#{cc.attrs.passwordLabel} :
<h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
</h:panelGrid>
<h:commandButton action = "#{cc.attrs.loginButtonAction}"
value = "#{cc.attrs.loginButtonLabel}"/>
</h:form>
</composite:implementation>
</html>UserData.java
package com.tutorialspoint.test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private String password;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String login() {
return "result";
}
}home.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
<h:head>
<title>JSF tutorial</title>
</h:head>
<h:body>
<h2>Custom Component Example</h2>
<h:form>
<tp:loginComponent
usernameLabel = "Enter User Name: "
usernameValue = "#{userData.name}"
passwordLabel = "Enter Password: "
passwordValue = "#{userData.password}"
loginButtonLabel = "Login"
loginButtonAction = "#{userData.login}" />
</h:form>
</h:body>
</html>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng như chúng tôi đã làm trong JSF - chương Ứng dụng đầu tiên. Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau.
