Facelets 模板

2024 年 8 月 29 日 | 阅读 3 分钟

它是一个提供实现用户界面的工具。模板是 Facelets 的一个有用特性，它允许您创建一个页面，该页面将充当应用程序中其他页面的基础。通过使用模板，您可以重用代码并避免一次又一次地重新创建类似的页面。模板还有助于在具有大量页面的应用程序中维护标准的外观和感觉。

下表包含用于创建模板的 Facelets 标签。

模板标签

标签	函数
ui:component	它用于定义一个已创建并添加到组件树的组件。
ui:composition	它用于定义一个可选使用模板的页面组合。此标签之外的内容将被忽略。
ui:debug	它用于定义一个已创建并添加到组件树的调试组件。
ui:decorate	它类似于 composition 标签，但不会忽略此标签之外的内容。
ui:define	它用于定义由模板插入到页面中的内容。
ui:fragment	它类似于组件标签，但不会忽略此标签之外的内容。
ui:include	它用于封装和重用多个页面的内容。
ui:insert	它用于将内容插入到模板中。
ui:param	它用于将参数传递给包含的文件。
ui:repeat	它用作循环标签（例如 c:forEach 或 h:dataTable）的替代方案。
ui:remove	它用于从页面中删除内容。

创建 Facelets 模板

创建模板涉及以下步骤。在这里，我们使用 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 标签用于将内容插入到已实现的模板中。

输出

// 首页