JSF教程 – JSF复合组件示例
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:w3cschool="http://java.sun.com/jsf/composite/w3cschool" > <h:body> <w3cschool:register nameLable="Name" nameValue="#{user.name}" emailLable="E-mail" emailValue="#{user.email}" registerButtonText="Register" registerButtonAction="#{user.registerAction}" /> </h:body> </html>
下面的代码来自UserBean.java。
package cn.w3cschool.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