它是一个提供实现用户界面的工具的工具。模板是一项有用的Facelets功能, 可让你创建一个页面, 该页面将充当应用程序中其他页面的基础。通过使用模板, 你可以重用代码, 避免一次又一次地重新创建类似的页面。模板还有助于在具有大量页面的应用程序中保持标准的外观。
下表包含用于创建模板的Facelets标记。
模板标签
| 标签 | 功能 |
|---|---|
| ui:component | 它用于定义创建并添加到组件树的组件。 |
| ui:composition | 它用于定义可选使用模板的页面组成。此标记之外的内容将被忽略。 |
| ui:debug | 它用于定义创建并添加到组件树的调试组件。 |
| ui:decorate | 它与composition标签相似, 但不忽略该标签之外的内容。 |
| ui:define | 它用于定义模板将其插入页面的内容。 |
| ui:fragment | 它与component标签相似, 但不忽略该标签之外的内容。 |
| ui:include | 它用于封装和重用多个页面的内容。 |
| ui:insert | 它用于将内容插入模板。 |
| ui:param | 它用于将参数传递到包含的文件。 |
| ui:repeat | 它用作循环标记（例如c：forEach或h：dataTable）的替代方法。 |
| ui:remove | 它用于从页面中删除内容。 |
1）创建新文件。
文章图片
2）分别从类别和文件类型中选择JavaServer Faces和Facelets模板。
文章图片
3）选择Facelets模板文件的CSS布局。
文章图片
Facelets标记库包含主要的模板标记ui：insert。使用此标签创建的模板页面允许你定义页面的默认结构。我们可以将模板页面用作其他页面的模板。
// template.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: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">
<
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>
<
div id="bottom">
<
ui:insert name="bottom">
Bottom<
/ui:insert>
<
/div>
<
/h:body>
<
/html>
上面的模板文件分为四个部分：顶部, 左侧, 内容部分和主要部分。我们可以将该结构进一步用于应用程序的其他页面。
// 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="header">
<
h:graphicImage value="http://www.srcmini.com/resources/images/header.png"/>
<
/ui:define>
<
ui:define name="index">
<
h:graphicImage value="http://www.srcmini.com/resources/images/index.png"/>
<
/ui:define>
<
ui:define name="content">
<
h:graphicImage value="http://www.srcmini.com/resources/images/content.png"/>
<
/ui:define>
<
ui:define name="footer">
<
h:graphicImage value="http://www.srcmini.com/resources/images/footer.png"/>
<
/ui:define>
<
/ui:composition>
<
/h:body>
<
/html>
在索引文件中, 我们使用png图像表示模板布局。你可以放置??自己的图像来执行此项目。
ui：composition标签用于将模板实现到index.xhtml文件中。
ui：define标记用于将内容插入已实现的模板。
输出：
【Facelets模板】//索引页
文章图片
