Facelets 非常适合 JSF（2）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-7-16 12:17 | 只看该作者

Facelets 非常适合 JSF（2）

安装 Facelets安装 Facelets 的步骤很容易。请注意，我假设已经下载并安装了。

并解压缩。
把 jsf-facelets.jar 拷贝到 WEB-INF/lib 目录（在应用程序部署时，它最终必须放在 WEB-INF/lib 目录中）。
把 Facelet 初始化参数添加到 web.xml 文件中。
把 FaceletViewHandler 添加到 faces-config.xml 文件中。

步骤 1 和 2 比较基本。我将详细介绍其他两个步骤。
添加初始化参数这一步假设已经安装了工作正常的 JSF 应用程序（例如），然后编辑现有的 web.xml 页面，添加以下参数：

1
2
3
4

<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>

这告诉 JSF 采用 xhtml 前缀，Facelet 渲染器能够解释这个前缀。
Facelets 有许多参数，请参阅获得完整清单。如果示例有问题，请参考 DEVELOPMENT init 参数，它适合调试。把 REFRESH_PERIOD 参数设置为 low 在开发期间会有帮助。
添加 FaceletViewHandler要让 Facelets 模板生效，需要把 Facelets 视图处理器告诉 JSF。JSF ViewHandler 是个插件，为不同的响应生成技术（包括 Facelets）处理 JSF 请求处理生命周期的 “渲染器响应和恢复视图” 阶段。（任何认为 JSF 不能扩展的人都是被误导了！）通过添加以下视图处理器到 faces-config.xml 中，就把 Facelets 插进了 JSF 中：

1
2
3
4
5
6

<application>
  <locale-config>
<default-locale>en</default-locale>
  </locale-config>
  <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

用 Facelets 进行模板化首先介绍 Facelets 模板化框架，因为它相对容易理解。创建和使用 Facelets 模板的步骤如下：

创建 layout.xhtml 页面。
定义 Facelet 的命名空间，导入对 Facelets 的使用。
用 ui:insert 标记定义页面的逻辑区域。
用纯文本和 ui:include 标记定义合理的默认值。

我要逐步介绍这些步骤，用在线 CD 商店清单页面作为我的布局示例。
步骤 1. 创建 layout.xhtml 页面layout.xhtml 页面就是一个一般的 XHTML 文本文件，使用了以下文档类型声明：

1
2
3
4

<!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">
</html>

不要求进一步细节！
步骤 2. 定义 Facelets 的命名空间为了用 Facelets 标记进行模板化，需要用 XML 命名空间像下面这样导入它们：

1
2
3
4
5

请注意 ui 命名空间的定义。
步骤 3. 用 ui:insert 标记定义页面的逻辑区域下面，定义布局的逻辑区域，例如页面标题、小标题、导航、内容等等。下面是定义页面标题的示例：

1
2
3
4
5
6
7
8
9

请注意使用 ui:insert 标记定义了标题的逻辑区域。ui:insert 元素内的文本 “Default title” 定义了模板用户不传递标题时显示的文本。也可以像下面这样编写上面的内容：

1	<title>#{title}</title>

步骤 4. 用纯文本和 ui:includes 定义默认值可以传递更多的纯文本作为默认值。例如，请研究 layout.xhtml 中的以下代码片段：

1
2
3
4
5

在这里，我用了 ui:insert 标记定义逻辑区域，用 ui:include 标记插入默认值。默认情况下，使用布局的页面会采用 header.xhtml 的内容作为标题文本，但是因为标题是 ui:insert 定义的逻辑区域，所以用这个模板也能传递不同的标题。对于拥有前端（例如，带有购物车的目录）和后端管理（例如添加新产品）的应用程序，后端站点在标题或导航上可能不同的链接。ui:include 标记可以容易地用新标题换掉默认标题。
清单 1 显示了示例应用程序的清单页面 list.xhtml 的完整代码：
清单 1. 完整的 list.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!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://java.sun.com/jsf/facelets">
<head>
  <title><ui:insert name="title">Default title</ui:insert></title>
  <link rel="stylesheet" type="text/css" href="./css/main.css"/>
</head>
<body>
<div id="header">
<ui:insert name="header">
      <ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="left">
  <ui:insert name="navigation" >
<ui:include src="navigation.xhtml"/>
  </ui:insert>
</div>
<div id="center">
  <br />
  <span class="titleText"> <ui:insert name="title" /> </span>
  <hr />
  <ui:insert name="content">
<div>
<ui:include src="content.xhtml"/>
</div>
  </ui:insert>
</div>
<div id="right">
  <ui:insert name="news">
<ui:include src="news.xhtml"/>
  </ui:insert>
</div>
<div id="footer">
  <ui:insert name="footer">
<ui:include src="footer.xhtml"/>
  </ui:insert>
</div>
</body>
</html>

现在已经知道了如何定义布局，我将介绍如何使用布局！

收藏分享评分

回复引用

订阅 TOP

返回列表