| Inside Facelets - Part 3: Templating and Re-Use 深入Facelets-第三部分：创建模板和重用
by JavaFeng |
这是Facelets系列文章中的第三部分，是用另外一种视图技术来创建JSF应用。Facelets是一个强大的模板化系统，它能让你用HTML风格的模板来定义JSF视图，并能够减少那些适合于集成在视图中的组件的代码数量，而且不需要web容器。这篇文章解释了你如何能够用Facelets在你的JSF工程里面创建模板。
对任何一种想要成功的视图技术来说，它必须拥有一些创建模板和重用的功能，而且必须好用又易懂。对于JSF来说，Facelets技术完美的解决了这个问题，并且延续了传统的、基于标签的UI风格。这篇文章包括了一些增加重用和简化维护JSF工程的方法。
当人们第一次开始创建网页的时候，他们经常发现自己在多个文件中重复相同的内容。作为一个开发人员来说，当你开始用面向对象的思想来开发的时候，这样的重复劳动会让人很灰心丧气。难道把这些内容简单地维护在一个地方不是更漂亮吗？
开始
模板化和重用的第一步是创建一个模板。一个网页通常由一些基本的部分组成：header,body,和footer。用Facelets，你能把这些通用的元素放在一个单独的页面里，并创建一个带有可编辑区的模板，如下面的模板所示：
<!-- 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://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Template</title>
</head>
<body>
<h1>#{title}</h1>
<div><ui:insert name="menu"/></div>
<p><ui:insert name="body"/></p>
</body>
</html>
对于menu和body来说，<ui:insert/>标签用来标记这块地方的内容会根据每一页变化。你可以用这个模板来创建其他的页面，并给menu和body区域提供不同的内容。
<!-- template-client.xhtml -->
<!-- content above will be trimmed -->
<ui:composition template="template.xhtml">
<ui:param name="title" value="Here's my Title"/>
<ui:define name="menu">Here's My Menu</ui:define>
<ui:define name="body">Here's My Body</ui:define>
</ui:composition>
<!-- content below will be trimmed -->
这个例子介绍了另外一个标签<ui:composition/>。该标签提供了一对特征。它删掉了它外面的任何内容，就是说，你可以写一些普通的HTML页面，而Facelets将只是用或者显示出现在<ui:composition/>标签里面的内容。使用这个标签，你同样可以选择提供一个模板的属性，该属性将定义内容如何或在哪里显示。
为了把内容和模板配对，<ui:define/>标签的name属性和模板中的<ui:insert/>标签的name属性一致的就可以替换。为了简便地传递变量或者文字，你可以使用<ui:param/>标签，该标签把其value属性作为模板中的一个变量来替代。
<!-- 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://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Template</title>
</head>
<body>
<h1>Here's my Title</h1>
<div>Here's My Menu</div>
<p>Here's My Body</p>
</body>
</html>
前面的这个例子能够被更加简化，如果在模板中只有一个地方是可变的。
<!-- simple-template.xhtml -->
...
<body>
<h1>Title</h1>
<!-- editable body -->
<p><ui:insert/></p>
</body>
...
想要用上面模板的页面就可以简化成下面：
<!-- simple-template-client.xhtml -->
<ui:composition template="simple-template.xhtml">
Here's My Simple Body
</ui:composition>
使用Includes
页面中的位置这个概念在页面中定义可重用的内容是相当强大的。上面几个例子展示了如何使用模板中的位置来显示内容。但是如果你想从另一个页面中包含进来一些东西该如何做呢？可能这里有一系列的表单控件或者一个复杂的菜单，以至于你宁愿把它们分离到一个不同的文件中，以便重用或者单独管理而不用散乱在页面布局的各个角落。
总的来说，Facelets提供了两种包含位置或者其他页面的方法。第一种是用<ui:include/>标签，对于web开发人员来说，该标签应该是相当熟悉的：
<!-- include.xhtml -->
...
<span id="leftNav">
<ui:include src="/WEB-INF/siteNav.xhtml"/>
</span>
...
<!-- siteNav.xhtml -->
..
<ui:composition>
<!-- myfaces tomahawk components -->
<t:tree2 value="#{backingBean.options}" var="opt">
...
</t:tree2>
</ui:composition>
...
当Facelets处理include.xhtml时，siteNav.xhtml的所有<ui:composition/>中的内容将被包含进include.xhtml：
<!-- include.xhtml -->
...
<span id="leftNav">
<!-- myfaces tomahawk components -->
<t:tree2 value="#{backingBean.options}" var="opt">
...
</t:tree2>
</span>
...
如果你愿意给siteNav.xhtml传递变量，这些变量供tree组件使用，那么你可以使用<ui:param/>标签：
<!-- include.xhtml -->
...
<span id="leftNav">
<ui:include src="/WEB-INF/siteNav.xhtml">
<ui:param name="menuBean" value="#{backingBean.options}"/>
</ui:include>
</span>
...
<!-- siteNav.xhtml -->
...
<ui:composition>
<!-- myfaces tomahawk components -->
<t:tree2 value="#{menuBean}" var="opt">
...
</t:tree2>
</ui:composition>
...
你能够看到现在siteNav.xhtml可以使用变量menuBean并且menuBean是通过<ui:include/>标签来传递的。这样使一些灵活的可重用的通用组件和内容成为了可能。
对于<ui:include/>和<ui:param/>，Facelets提供了一个更加简洁的解决方案，通过支持自定义标签。别急，你不需要自己写任何一点java代码。为了给siteNav.xhtml定制一个可重用的标签，你必须创建一个简单的XML标签库文件。
<facelet-taglib>
<namespace>">http://www.mycompany.com/jsf</namespace>
<tag>
<tag-name>siteNav.xhtml</tag-name>
<source>/WEB-INF/tags/siteNav.xhtml</source>
</tag>
</facelet-taglib>
除了在你的新标签库XML文件中制定Facelets外，你可能需要添加尽可能多的标签到新的标签库中。通过指定http://www.mycompany.com/jsf作为命名空间，你可以这样写：
<!-- include-tag.xhtml -->
...
<span id="leftNav">
<my:siteNav menuBean="#{backingBean.options}"/>
</span>
...
这个include-tag.xhtml例子和前面的include.xhtml例子效果一样。MenuBean的属性作为siteNav.xhtml的一个属性将生效，就像<ui:param/>传递的那样。
你的工程可能包括了一个jar文件，其中包括了所有的自定义标签库，或者只是简单的把自定义标签库放到了一个文件加里。更多的标签在Facelets Developer Documentation中详细描述。
分享到：
相关推荐
3. **页面模板与组件**：Facelets 提供了一种基于 XML 的模板语言，允许你在 `template.xhtml` 中定义页面布局，然后在其他页面如 `guess.xhtml` 和 `response.xhtml` 中使用 `<ui:include>` 或 `<ui:insert>` 指令...
- **模板（Templates）与包含（Inclusion）**: Facelets支持模板和包含，允许开发者创建可重用的组件和布局。 - **组件库（Component Library）**: Facelets可以使用JSF的内置组件，也可以添加第三方组件库，如...
- Facelets模板：Facelets是JSF的默认视图表示技术，它允许创建可重用的组件和模板，提高了代码的可维护性。 - EL表达式：Expression Language是用于访问和操作Managed Bean属性的简洁语法，使得在视图层可以直接...
在开发过程中，你可以利用MyFaces和RichFaces提供的组件来快速构建界面，同时利用Facelets的模板和复合组件功能来组织和重用视图代码。这些包的组合使用，可以帮助你构建出功能强大、交互性强的Web应用程序。
2. **模板和组件化**：Facelets支持组件重用和模板，减少了代码冗余。 3. **直接编译**：Facelets视图在部署时编译为Java类，提高了运行时性能。 4. **分离关注点**：Facelets鼓励MVC模式，将视图逻辑与业务逻辑分离...
### 核心知识点：《Core JavaServer Faces 3rd Edition》JSF核心编程第三版 #### 1. JavaServer Faces (JSF) 技术概述 - **定义**：JavaServer Faces (JSF) 是Java EE标准技术之一，用于构建Web用户界面。它提供了...
JSF允许自定义组件、渲染器和行为，以及通过Facelets模板进行页面布局。此外，还可以通过提供第三方库如PrimeFaces、RichFaces等进一步增强功能。 综上所述，JSF中文教程将涵盖这些概念，帮助开发者理解和掌握JSF的...
- **复合组件**: 开发者现在可以轻松创建和使用复合组件，以提高代码重用性和可维护性。 #### 三、书籍主要内容概览 - **Facelets标签与页面布局**: 介绍如何使用Facelets进行页面布局设计，包括组件的嵌套、条件...
- **Facelets**：这是一种为JSF定制的视图定义语言，可以更方便地创建可重用的组件和布局模板。 ##### 2. **Web服务开发** - **JAX-WS (Java API for XML Web Services)**：提供了一种基于SOAP标准的服务实现方法...
3. 探索Facelets模板和标签库的内部工作，优化视图渲染。 4. 理解Managed Bean的生命周期和依赖注入机制，优化业务逻辑代码。 5. 分析事件处理和生命周期阶段，解决性能问题或调试应用程序。 源码阅读对于提升JSF...
Facelets是XML-based的，可以与XHTML结合，提供了模板和组件重用的机制。 2. **UIComponent**：JSF组件模型，代表了页面上的每个可视元素。例如，`<h:outputText>`就是JSF的一个UI组件，用于显示文本。 3. **...
4. **兼容性改进**：与Java EE 6或7的兼容性可能会得到增强，同时可能支持更多第三方库和插件。 在下载的压缩包中，"mojarra-2.1.2-FCS"可能包含以下文件和目录： 1. `javax.faces.jar`：这是核心的JSF实现库，包含...
此外，还有第三方组件库，如PrimeFaces和RichFaces，提供了更多高级功能和视觉效果。 ### 3. 视图和模型 - **视图**: 视图是用户看到的页面，通常由XHTML文件组成，其中嵌入了JSF组件。这些文件遵循Facelets语法，...
1. **组件库**：如PrimeFaces、MyFaces和RichFaces等第三方组件库提供了大量现成的组件，可以快速构建功能丰富的用户界面。 2. **依赖注入**：JSF可以与CDI（Contexts and Dependency Injection）结合，实现更灵活...
Facelets提供了更简洁、更易于维护的XML语法，支持组件化和模板化开发。 2. **全双工通信**：JSF 2.0引入了Partial State Saving（部分状态保存）机制，优化了页面回发过程，减少了服务器负担。同时，通过AJAX支持...
2. **视图（View）**：JSF使用Facelets作为默认的视图表示技术，这是一种基于XML的模板语言，允许开发者创建和组合组件，形成用户界面。 3. **控制器（Controller）**：JSF通过生命周期管理请求，自动处理用户的...
5. **Managed Beans和数据绑定**: 学习如何创建和使用Managed Beans，以及如何实现数据双向绑定。 6. **EL和Facelets**: 掌握EL表达式的使用，以及Facelets模板和组件的创建。 7. **验证和转换**: 实践验证器和转换...
1. **Facelets** - 作为默认视图层技术，Facelets允许开发者使用XML语法来创建和组织用户界面组件。它提供了模板和组合功能，便于重用和维护代码。 2. **UI Components** - JSF提供了一系列预定义的UI组件，如按钮...
- **Facelets模板**：使用Facelets作为视图层，这是一种基于XML的标记语言，用于定义页面布局和组件。 - **Managed Beans**：用于处理业务逻辑并存储应用程序的数据模型。 **步骤**： 1. **创建一个新的JSF项目**：...