复合组件是一种把多个组件组合在一起的技术,它可以帮助开发者更快速、更高效地实现功能。它的三要素包括:
1. 组件:复合组件的基本单元是组件,它是一个独立的、可重用的代码片段,可以用来实现特定功能。例如,一个表单输入字段就是一个独立的组件,它可以被重复使用来创建不同的表单。
2. 结构:复合组件也需要一个特定的结构来将这些独立的组件连接起来。这些连接可能是通过函数调用或者对象层面上的嵌套来实现。例如,你可能会需要将一个表单字段和一个表单标题连接在一起形成一个表单。
3. 抽象:最后,复合组件也需要适当的抽象来使得代码易于理解和重用。例如,你可能会需要将表单字段和标题封装成一个“FormField”对象,而不是直接将字段和标题写在同一个文件中。这样就可以使得代码易于理解、重用、测试和修复。
const FormField = (props) => { return ({props.children}); };
JSF可以定义自定义组件来渲染自定义内容。
为了创建一个自定义组件,我们需要创建一个资源文件夹。并将一个xhtml文件放在resources文件夹中与复合命名空间。
我们需要使用复合标签composite:interface,composite:attribute和composite:implementation,来定义复合组件的内容。
然后在composite:implementation中使用cc.attrs来获取在composite:interface中使用composite:attribute定义的变量。
以下代码显示如何使用composite:interface和composite:implementation。
<composite:interface> <composite:attribute name="nameLable" /> <composite:attribute name="nameValue" /> <composite:attribute name="emailLable" /> <composite:attribute name="emailValue" /> <composite:attribute name="registerButtonText" /> <composite:attribute name="registerButtonAction" method-signature="java.lang.String action()" /> </composite:interface> <composite:implementation> <h:form> <h:message for="textPanel" /> <h:panelGrid columns="2" id="textPanel"> #{cc.attrs.nameLable} : <h:inputText id="name" value="#{cc.attrs.nameValue}" /> #{cc.attrs.emailLable} : <h:inputText id="email" value="#{cc.attrs.emailValue}" /> </h:panelGrid> <h:commandButton action="#{cc.attrs.registerButtonAction}" value="#{cc.attrs.registerButtonText}"/> </h:form> </composite:implementation>
以下代码来自result.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" > <h:body> <h1>Composite Components in JSF 2.0</h1> Name : #{user.name} <br /> E-mail : #{user.email} </h:body> </html>
以下代码来自demo.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:="http://java.sun.com/jsf/composite/" > <h:body> <:register nameLable="Name" nameValue="#{user.name}" emailLable="E-mail" emailValue="#{user.email}" registerButtonText="Register" registerButtonAction="#{user.registerAction}" /> </h:body> </html>
下面的代码来自UserBean.java。
package cn..common; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="user") @SessionScoped public class UserBean{ public String name; public String email; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String registerAction(){ return "result"; } }
以下代码来自register.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="nameLable" /> <composite:attribute name="nameValue" /> <composite:attribute name="emailLable" /> <composite:attribute name="emailValue" /> <composite:attribute name="registerButtonText" /> <composite:attribute name="registerButtonAction" method-signature="java.lang.String action()" /> </composite:interface> <composite:implementation> <h:form> <h:message for="textPanel" /> <h:panelGrid columns="2" id="textPanel"> #{cc.attrs.nameLable} : <h:inputText id="name" value="#{cc.attrs.nameValue}" /> #{cc.attrs.emailLable} : <h:inputText id="email" value="#{cc.attrs.emailValue}" /> </h:panelGrid> <h:commandButton action="#{cc.attrs.registerButtonAction}" value="#{cc.attrs.registerButtonText}"/> </h:form> </composite:implementation> </html>下载 Composite-Components.zip
将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹,并运行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成启动后,在浏览器地址栏中键入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
JSF教程 -JSF页面重定向示例JSF默认在从一个页面导航到另一个页面时执行服务器页面,并且应用程序的URL不会更改。要启用页面重定...
JPA教程 -JPA ElementCollection CollectionTable覆盖示例以下代码显示了如何将集合与目标实体映射到数据库。// Using a targetC...