个性化阅读
专注于IT技术分析

Facelets模板

点击下载

它是一个提供实现用户界面的工具的工具。模板是一项有用的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)创建新文件。

JSF Facelets模板1

2)分别从类别和文件类型中选择JavaServer Faces和Facelets模板。

JSF Facelets模板2

3)选择Facelets模板文件的CSS布局。

JSF Facelets模板3

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标记用于将内容插入已实现的模板。

输出:

//索引页

JSF Facelets模板4

赞(0)
未经允许不得转载:srcmini » Facelets模板

评论 抢沙发

评论前必须登录!