JSF 復(fù)合組件示例

2018-02-22 14:43 更新

JSF教程 - JSF復(fù)合組件示例


JSF可以定義自定義組件來(lái)渲染自定義內(nèi)容。

為了創(chuàng)建一個(gè)自定義組件,我們需要?jiǎng)?chuàng)建一個(gè)資源文件夾。并將一個(gè)xhtml文件放在resources文件夾中與復(fù)合命名空間。

我們需要使用復(fù)合標(biāo)簽composite:interface,composite:attribute和composite:implementation,來(lái)定義復(fù)合組件的內(nèi)容。

然后在composite:implementation中使用cc.attrs來(lái)獲取在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>
  

例子

以下代碼來(lái)自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>

以下代碼來(lái)自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>

下面的代碼來(lái)自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";
  }
}

以下代碼來(lái)自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

運(yùn)行

將生成的WAR文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾,并運(yùn)行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成啟動(dòng)后,在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)