JSF - 模板標籤

Web應用程式中的模板定義了通用的介面佈局和樣式。例如，相同的橫幅、公共頁首中的徽標和頁尾中的版權資訊。JSF提供以下Facelet標籤來提供標準的Web介面佈局。

序號	標籤及描述
1	ui:insert 用於模板檔案。它定義了要放置在模板中的內容。ui:define標籤可以替換其內容。
2	ui:define 定義要插入模板的內容。
3	ui:include 將一個xhtml頁面的內容包含到另一個xhtml頁面中。
4	ui:composition 使用template屬性載入模板。它還可以定義要插入xhtml頁面的一組元件。

建立模板

為Web應用程式建立模板是一個分步過程。以下是建立示例模板的步驟。

步驟1：建立標頭檔案：header.xhtml

使用ui:composition標籤定義Header部分的預設內容。

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

步驟2：建立頁尾檔案：footer.xhtml

使用ui:composition標籤定義Footer部分的預設內容。

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

步驟3：建立內容檔案：contents.xhtml

使用ui:composition標籤定義Content部分的預設內容。

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

步驟4：建立一個模板：common.xhtml

使用ui:insert和ui:include標籤在模板檔案中包含頭/尾和內容檔案。在ui:insert標籤中命名每個部分。

ui:insert標籤的name屬性將用於替換相應部分的內容。

<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>

步驟5a：使用具有預設內容的模板：home.xhtml

在任何xhtml頁面中使用ui:composition標籤載入common.xhtml模板。

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

步驟5b：使用模板並設定自己的內容：home.xhtml

在任何xhtml頁面中使用ui:composition標籤載入common.xhtml模板。使用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>

示例應用程式

讓我們建立一個測試JSF應用程式來測試JSF中的模板標籤。

步驟	描述
1	按照JSF - 第一個應用程式章節中的說明，在com.tutorialspoint.test包下建立一個名為helloworld的專案。
2	在src → main → webapp資料夾下建立templates資料夾。
3	在src → main → webapp → templates資料夾下建立header.xhtml, footer.xhtml, contents.xhtml和common.xhtml檔案。按照以下說明修改它們。
4	在src → main → webapp資料夾下建立page1.xhtml和page2.xhtml檔案。按照以下說明修改它們。
5	按照以下說明修改home.xhtml。保持其餘檔案不變。
6	編譯並執行應用程式，以確保業務邏輯按要求工作。
7	最後，將應用程式構建為war檔案，並將其部署到Apache Tomcat Web伺服器。
8	使用最後一步中說明的適當URL啟動您的Web應用程式。

header.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>Default Header</h1>
      </ui:composition>	
   </body>
</html>

footer.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>Default Footer</h1>
      </ui:composition>	
   </body>
</html>

contents.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>Default Content</h1>
      </ui:composition>	
   </body>
</html>

common.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:head>
   <h:body> 
      <div style = "border-width:2px; border-color:green; border-style:solid;">
         <ui:insert name = "header" >
            <ui:include src = "/templates/header.xhtml" />
         </ui:insert> 
      </div>
      <br/>
      
      <div style = "border-width:2px; border-color:black; border-style:solid;">
         <ui:insert name = "content" >
            <ui:include src = "/templates/contents.xhtml" />
         </ui:insert>    
      </div>
      <br/>
      
      <div style = "border-width:2px; border-color:red; border-style:solid;">
         <ui:insert name = "footer" >
            <ui:include src = "/templates/footer.xhtml" />
         </ui:insert>
      </div>
   
   </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 = "templates/common.xhtml">
         <ui:define name = "header">
            <h2>Page1 header</h2>
         </ui:define>			
         
         <ui:define name = "content">
            <h2>Page1 content</h2>
             <h:link value = "Back To Home" outcome = "home" />
         </ui:define> 
         
         <ui:define name = "footer">
            <h2>Page1 Footer</h2>
         </ui:define>			
      </ui:composition> 
   
   </h:body> 
</html>

page2.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 = "templates/common.xhtml">
         <ui:define name = "header">
            <h2>Page2 header</h2>
         </ui:define>			
         
         <ui:define name = "content">
            <h2>Page2 content</h2>
             <h:link value = "Back To Home" outcome = "home" />
         </ui:define> 
         
         <ui:define name = "footer">
            <h2>Page2 Footer</h2>
         </ui:define>			
      </ui:composition> 
   
   </h:body> 
</html>

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:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body>
      <ui:composition template = "templates/common.xhtml">	
         <ui:define name = "content">				
            <br/><br/>
             <h:link value = "Page 1" outcome = "page1" />
             <h:link value = "Page 2" outcome = "page2" />			
            <br/><br/>
         </ui:define>
      </ui:composition>
   
   </h:body>
</html>

完成所有更改後，讓我們像在JSF - 第一個應用程式章節中所做的那樣編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果。

單擊Page1連結，您將看到以下結果。

或者單擊Page2連結，您將看到以下結果。

jsf_facelets_tags.htm

列印頁面