它是一个提供实现用户界面的工具的工具。模板是一项有用的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 | 它用于从页面中删除内容。 |
创建面模板
创建模板涉及以下步骤。在这里, 我们使用Net Bean IDE创建Facelets模板。
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="/resources/images/header.png"/>
</ui:define>
<ui:define name="index">
<h:graphicImage value="/resources/images/index.png"/>
</ui:define>
<ui:define name="content">
<h:graphicImage value="/resources/images/content.png"/>
</ui:define>
<ui:define name="footer">
<h:graphicImage value="/resources/images/footer.png"/>
</ui:define>
</ui:composition>
</h:body>
</html>
在索引文件中, 我们使用png图像表示模板布局。你可以放置自己的图像来执行此项目。
ui:composition标签用于将模板实现到index.xhtml文件中。
ui:define标记用于将内容插入已实现的模板。
输出:
//索引页
评论前必须登录!
注册