JSF Facelets模板示例

2018-09-27 15:32 更新

JSF教程 - JSF Facelets模板示例


以下代碼顯示了如何使用JSF Facelets標簽創(chuàng)建模板。

JSF應用程序中的模板定義了公共接口布局和樣式。

例如，我們可以創(chuàng)建一個頁面模板，其中有橫幅，標題和頁腳中的版權信息。

然后我們可以重用模板來創(chuàng)建頁面。

JSF有以下facelets標簽來創(chuàng)建模板布局。

標簽描述
ui:insert定義要放置在模板中的內(nèi)容。ui:define標簽可以替換其內(nèi)容。
ui:define在模板中插入內(nèi)容。
ui:include將一個xhtml頁面的內(nèi)容包含到另一個xhtml頁面中。
ui:composition使用模板屬性加載模板。它可以定義要插入xhtml頁面的一組組件。

以下步驟顯示如何創(chuàng)建模板。

創(chuàng)建頭部文件：header.xhtml如下使用ui:composition標記。

<ui:composition> 
   <h1>Default Header</h1>  
</ui:composition>

創(chuàng)建頁腳文件:footer.xhtml作為頁腳

<ui:composition> 
   <h1>Default Footer</h1>  
</ui:composition>

創(chuàng)建內(nèi)容文件:contents.xhtml定義內(nèi)容部分的默認內(nèi)容。

<ui:composition> 
   <h1>Default Contents</h1>  
</ui:composition>

創(chuàng)建模板：common.xhtml通過使用ui:insert和ui:include標記在模板文件中包含頁眉/頁腳和內(nèi)容文件。在ui:insert標記中命名每個部分。
ui:insert標簽的name屬性將用于替換相應section的內(nèi)容。

<h:body> 
   <ui:insert name="header" >
      <ui:include src="header.xhtml" />
   </ui:insert> 
   <ui:insert name="content" >
      <ui:include src="contents.xhtml" />
   </ui:insert>    
   <ui:insert name="footer" >
      <ui:include src="footer.xhtml" />
   </ui:insert>
</h:body>

以下代碼顯示如何使用帶默認內(nèi)容的模板創(chuàng)建home.xhtml

<h:body>
   <ui:composition template="common.xhtml">  
</h:body>

我們也可以結合模板和其他標簽來創(chuàng)建一個新的頁面。使用ui:define標記來覆蓋默認值。

<h:body>
   <ui:composition template="templates/common.xhtml">  
      <ui:define name="content">        
         <h:link value="Page 1" outcome="page1" />
         &nbsp;
         <h:link value="Page 2" outcome="page2" />      
      </ui:define>
   </ui:composition>
</h:body>

例子

以下代碼來自commonLayout.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:ui="http://java.sun.com/jsf/facelets"
      >

  <h:head>
    <h:outputStylesheet name="common-style.css" library="css" />
  </h:head>
    
    <h:body>

  <div id="page">
    
    <div id="header">
      <ui:insert name="header" >
        <ui:include src="/template/common/commonHeader.xhtml" />
      </ui:insert>
      </div>
      
      <div id="content">
         <ui:insert name="content" >
           <ui:include src="/template/common/commonContent.xhtml" />
         </ui:insert>
      </div>
        
      <div id="footer">
        <ui:insert name="footer" >
          <ui:include src="/template/common/commonFooter.xhtml" />
        </ui:insert>
      </div>
      
    </div>
    
    </h:body>

</html>

以下代碼來自commonFooter.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:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
      <ui:composition>
  
      <h1>This is default footer</h1>
        
      </ui:composition>
    </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:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
      
      <ui:composition template="template/common/commonLayout.xhtml">

      
      </ui:composition>
      
    </h:body>

</html>

以下代碼來自page1.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:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
      
      <ui:composition template="/template/common/commonLayout.xhtml">
      
        <ui:define name="content">
          <h2>This is page1 content</h2>
        </ui:define>
        
        <ui:define name="footer">
          <h2>This is page1 Footer</h2>
        </ui:define>
        
      </ui:composition>
      
    </h:body>

</html>

下面的代碼來自UserBean.java。

package cn.w3cschool.common;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  
  private static final long serialVersionUID = 1L;

}

以下代碼來自common-style.css。

#page{
  width: 800px;
  margin: 0 auto;
}

#header{
  width: 100%;
  height:100px;
  border: 1px solid #000;
  margin-bottom:16px;
}

#content{
  width: 100%;
  height:200px;
  margin-right:16px;
  margin-bottom:16px;
  border: 1px solid #000;
}

#footer{
  width: 100%;
  height:100px;
  border: 1px solid #000;
}

以下代碼來自commonContent.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:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
      <ui:composition>
  
      <h1>This is default content</h1>
        
      </ui:composition>
    </body>
</html>

以下代碼來自commonHeader.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:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
      <ui:composition>
  
      <h1>This is default header</h1>
        
      </ui:composition>
    </body>
</html>
下載 Facelets-Template.zip

運行

將生成的WAR文件從目標文件夾復制到Tomcat部署文件夾，并運行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成啟動后，在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號