JSF 复合组件基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
JSF 为开发人员提供了强大的能力来定义他们自己的自定义组件,这些组件可用于呈现自定义内容。
定义自定义组件
在 JSF 中定义自定义组件是一个两步过程。
步骤 | 描述 |
1a |
创建一个资源文件夹。
在具有复合命名空间的资源文件夹中创建一个 xhtml 文件。
|
1b |
使用复合标签
composite:interface、composite:attribute和
composite:implementation来定义复合组件的内容。在
composite:implementation 中使用
cc.attrs 来获取在
composite:interface 中使用
composite:attribute 定义的变量。
|
步骤 1a:创建自定义组件:loginComponent.xhtml
在资源文件夹中创建一个文件夹tutorialspoint,并在其中创建一个文件loginComponent.xhtml。
在 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>
步骤 1b:使用复合标签:loginComponent.xhtml
下表描述了复合标签的使用。
S.No | 标签和说明 |
1 |
composite:interface
声明要在复合:实现中使用的可配置值。
|
2 |
composite:attribute
使用这个标签声明配置值。
|
3 |
composite:implementation
声明 JSF 组件。可以使用 #{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>
使用自定义组件
在 JSF 中使用自定义组件是一个简单的过程。
步骤 | 描述 |
2a | 创建一个 xhtml 文件并使用自定义组件的命名空间。命名空间将 http://java.sun.com/jsf/
|
2b | 使用自定义组件作为普通的 JSF 标签 |
步骤 2a:使用自定义命名空间: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">
步骤 2b:使用自定义标签:home.xhtml 和传递值
<h:form> <tp:loginComponent usernameLabel = "Enter User Name: " usernameValue = "#{userData.name}" /> </h:form>
示例应用
让我们创建一个测试 JSF 应用程序来测试 JSF 中的自定义组件。
步骤 | 描述 |
1 | 在com.tutorialspoint.test 包下创建一个名为helloworld 的项目,如JSF-第一个应用程序 章节所述。 |
2 | 在src → main文件夹下创建resources文件夹。 |
3 | 在src → main → resources文件夹下创建tutorialspoint文件夹。 |
4 | 在src→main→resources→tutorialspoint文件夹下创建loginComponent.xhtml文件。 |
5 | 修改 UserData.java 文件,如下所述。 |
6 | 修改 home.xhtml 如下所述。保持其余文件不变。 |
7 | 编译并运行应用程序以确保业务逻辑按照要求工作。 |
8 | 最后,以war文件的形式构建应用,并部署到Apache Tomcat Webserver中。 |
9 | 使用适当的 URL 启动您的 Web 应用程序,如下面最后一步所述。 |
登录组件.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>
用户数据.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>
一旦您准备好完成所有更改,让我们像在 JSF-First Application 章节中一样编译和运行应用程序。如果您的应用程序一切正常,这将产生以下结果。