Facelets模板是提供實(shí)現(xiàn)用戶界面的工具的工具。模板化是一個(gè)有用的Facelets功能，允許您創(chuàng)建一個(gè)頁面，作為應(yīng)用程序中其他頁面的基礎(chǔ)。通過使用模板，您可以重用代碼，并避免重復(fù)類似的頁面。模板化還有助于簡化在具有大量頁面的應(yīng)用程序中維護(hù)標(biāo)準(zhǔn)外觀和感覺。

下表包含用于創(chuàng)建模板的Facelets標(biāo)簽。

模板標(biāo)簽

標(biāo)簽	功能
`ui:component`	它用于定義創(chuàng)建并添加到組件樹的組件。
`ui:composition`	它用于定義可選地使用模板的頁面組合，此標(biāo)記之外的內(nèi)容將被忽略。
`ui:debug`	它用于定義創(chuàng)建并添加到組件樹的調(diào)試組件
`ui:decorate`	它與組合標(biāo)簽類似，但不會(huì)忽略此標(biāo)記之外的內(nèi)容。
`ui:define`	它用于定義由模板插入到頁面中的內(nèi)容。
`ui:fragment`	它與組件標(biāo)簽類似，但不會(huì)忽略此標(biāo)記之外的內(nèi)容。
`ui:include`	它用于封裝和重用多個(gè)頁面的內(nèi)容。
`ui:insert`	它用于將內(nèi)容插入到模板中。
`ui:param`	它用于將參數(shù)傳遞給包含的文件。
`ui:repeat`	它用作循環(huán)標(biāo)簽的替代方法，例如：`c:forEach`或`h:dataTable`。
`ui:remove`	它用于從頁面中刪除內(nèi)容。

創(chuàng)建Facelets模板

創(chuàng)建模板涉及以下步驟。在這里，我們使用NetBean IDE創(chuàng)建一個(gè)名稱為：FaceletsTemplate 的Web項(xiàng)目。然后在這個(gè)項(xiàng)目之上創(chuàng)建Facelets模板。

完整的項(xiàng)目目錄結(jié)構(gòu)如下圖所示 -

創(chuàng)建新文件：template.xhtml -

分別從類別和文件類型選擇JavaServer Faces和Facelets模板。

為Facelets模板文件選擇CSS布局。

Facelets標(biāo)簽庫包括主模板標(biāo)簽ui:insert。使用此標(biāo)簽創(chuàng)建的模板頁面允許為頁面定義默認(rèn)結(jié)構(gòu)。我們可以使用模板頁面作為其他頁面的模板。

以下是所創(chuàng)建的文件：template.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://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <title>Facelets Template</title>
    </h:head>
    <h:body>
        <div id="top" class="top">
            <ui:insert name="top">Top</ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="left">Left</ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
    </h:body>

</html>

上述模板文件分為四個(gè)部分：頂部，左部分，內(nèi)容部分。我們可以對應(yīng)用程序的其他頁面進(jìn)一步重用此結(jié)構(gòu)。

以下是所創(chuàng)建的文件：index.xhtml 中的代碼 -

<!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://xmlns.jcp.org/jsf/html"  
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">  
    <h:head>  
        <meta http-equiv="Content-Type"  
              content="text/html; charset=UTF-8" />  
        <h:outputStylesheet library="css" name="default.css"/>  
        <h:outputStylesheet library="css" name="cssLayout.css"/>  
        <title>Facelets Template Example</title>  
    </h:head>  
    <h:body>  
        <ui:composition template="./template.xhtml">  
            <ui:define name="top">  
                <h:graphicImage value="/resources/images/header.png"/>  
            </ui:define>  

            <ui:define name="left">  
                <h:graphicImage value="/resources/images/left.png"/>  
            </ui:define>  

            <ui:define name="content">  
                <h:graphicImage value="/resources/images/right.png"/>  
            </ui:define>  

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

在index.xhtml文件中，我們使用png圖像來表示模板布局。您可以放置自己的圖像來執(zhí)行此項(xiàng)目。

ui:composition標(biāo)簽用于將模板實(shí)現(xiàn)到index.xhtml文件中。
ui:define標(biāo)簽用于將內(nèi)容插入到實(shí)現(xiàn)的模板中。

輸出結(jié)果如下所示 -

上一篇：JSF數(shù)據(jù)表(h:dataTable)排序數(shù)據(jù)下一篇：JSF多選列表框