JSF已经出了很多年了，自从提出就带来了一些新的思想，但是直到JSF2.0的推出，才将许多当初的想法真正体现出来，并真正为广大开发者提供了一条便捷的开发道路。是时候关注JSF了，如果说以前他还是一个学院派的东西，现在他已经吸收了众多实践派的精华，我的这些例子中就以便捷开发和简介为主导。
插一段闲话：本系列是JSF2.0的入门及例子，其中的例子并未精心选择，只是用来说明JSF2.0的几个重要且便捷的特性。如若想了解更多的内容可以去官网查找，或者在本网站的JSF组中一起探讨。也非常感谢大家的支持。
上一篇我们已经接触了新的页面表现方式facelets，并实现了一个复合组件的例子。本篇继续沿用上一篇的例子，只是修改一下页面，来介绍可以与Tapestry相媲美的页面模版化定义。
我们还是一起来看例子，还记得上一篇中的文件吗？echo.xhtml，/resources/echo/echoInputText.xhtml，echoOut.xhtml。我们就在此基础上介绍页面模版化。
一、 创建一个模版
首先定义模版文件/templates/echoTemplate.xhtml，文件内容如下：
echoTemplate.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://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>#{title}</title>
<meta http-equiv="keywords" content="jsf2.0,组件，ajax" />
<meta http-equiv="description" content="测试简单的复合组件." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<body>
<div id="header" style="padding:100px 0 20px 100px;font-size:22px;font-weight:bold;border-bottom:solid 1px red">
这个应声器的作者是：#{echo.encoder.author}。
</div>
<div id="input">
<ui:insert name="content"/>
</div>
<h:panelGroup id="after">
<div style="padding:20px 0 0 100px">
响应：<h:outputText id="echo" value="#{echo.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
将此文件与系列之三中echo.xhtml比较，有两处不同：<title>#{title}</title>和<ui:insert name="content"/>。此两处都会在模版的实现页中定义。
二、定义一个实现页：
echointmp.xhtml:
<?xml version="1.0" encoding="gb2312"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/echoTemplate.xhtml">
<ui:param name="title" value="测试简单的模版" />
<ui:define name="content">
<ui:include src="/sections/content.xhtml"/>
</ui:define>
</ui:composition>
对照看看echointmp.xhtml与模版页echoTemplate.xhtml。其中#{title}在echointmp.xhtml页中定义<ui:param name="title" value="测试简单的模版" />。
<ui:define name="content">
<ui:include src="/sections/content.xhtml"/>
</ui:define>
这个标签用来定义模版页中预留的<ui:insert name="content"/>，其中ui:define标签与ui:insert标签是相对应的。这样在echointmp.xhtml中就会使用ui:define中的内容替换ui:insert中的内容，由name属性来确定匹配。
ui:insert标签还可以定义默认表现，就是当在定义页面中没有定义匹配的页面时，默认渲染的组件。示例如下：
<ui:insert name="content">
此模版未定义。
</ui:insert>
其中<ui:include src="/sections/content.xhtml"/>语法与jsp:include类似，就是引入content.xhtml页。
content.xhtml:
<?xml version="1.0" encoding="gb2312"?>
<!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://java.sun.com/jsf/html"
xmlns:echo="http://java.sun.com/jsf/composite/echo"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>模版内容</title>
</h:head>
<body>
<ui:component>
<h:form id="form" style="padding:20px 0 20px 100px">
<echo:echoInputText echo="#{echo}"></echo:echoInputText>
<div style="padding-left:50px">
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应"/>
</div>
</h:form>
</ui:component>
</body>
</html>
模版化的例子完成，在浏览器中输入：http://localhost:8080/TestJsf2.0/echointmp.xhtml看看访问效果。
二、 关于几个例子的几点说明
关于中文的问题：在任何java编程中，如果采用中文环境，都免不了涉及到中文问题，JSF2.0中的中文问题很容易解决，就是在组件等页面的开头加入以下说明
<?xml version="1.0" encoding="gb2312"?>
这样页面中就可以采用中文了。另外在主页面中（例如本例中的模版页和上例中的echo.xhtml），需要在meta标签中指定编码格式，见例子（本例都采用UTF-8编码），最好不要在页头加入上行，主要是由于如ie6等浏览器对xhtml的格式支持不是特别好，如果页头有这个说明，有些css模式在这些浏览器中无法正常显示。中文乱码问题一直是各类编程中令人头疼的问题，我们有时间可以单独用篇幅来讨论。
关于JSF2.0组件，JSF2.0提供两种标签来定义组件，分别为ui:composite和ui:component 。他们可以起到一样的效果，当定义复合组件或者是包含于ui:include标签中的内容时，最好都采用组件标签包含，例如本例中的content.xhtml，即使去掉ui:component标签也能正常显示，不过看看两种方式生成的源代码就知道有什么不同了。
在例子中还有一个小趣味，就是当你按“提交响应”按钮时，有什么变化，导航页变了吧。此是由于此按钮中有action="echo"，其中指向的是echo.xhtml，去掉此说明就是导航到本页了。
JSF2.0新的组件模型的简介例子写完了，希望能给大家一些帮助。更多的交流可以到本网站的JSF组中交流。从下一篇起，我们再看看JSF2.0中引入的Ajax模型，看看他对我们的Web2.0开发带来了哪些便捷体验。
分享到：
相关推荐
2. **全页面周期管理**：JSF 2.0引入了全页面请求生命周期，包括六种阶段：恢复视图、应用请求值、处理验证、更新模型值、调用应用程序和渲染响应。开发者可以在这个生命周期中插入自定义行为。 3. **...
JSF 2.0增加了更多的事件类型和监听器接口，允许开发者在特定生命周期阶段进行定制化处理。 10. **安全性增强**： JSF 2.0在安全方面也有所加强，如对XSS（跨站脚本攻击）的防护，以及对CSRF（跨站请求伪造）的...
- **国际化（I18N）**：JSF 2.0 提供了强大的国际化支持，允许应用程序轻松适应不同的语言和文化环境，通过资源束进行文本和格式化信息的本地化。 ##### 5. **性能优化** - **资源压缩**：JSF 2.0 可以自动压缩 ...
JSF 2.0引入了Faces Flow概念，为复杂的流程管理提供了一种结构化的方法。Faces Flow允许在多个页面之间组织逻辑，创建可重用的流程组件。 总的来说，JavaServer Faces 2.0通过增强组件库、依赖注入、异步请求处理...
JSF 2.0引入了许多改进，特别是对于页面制作的简化，这主要归功于Facelets的使用。 Facelets是JSF 2.0的标准视图声明语言，它是一种声明式轻量级的模板语言，允许开发者使用类似于HTML的语法来创建JSF页面。...
**JSF2.0基本环境搭建与应用** JavaServer Faces（JSF）是Java平台上的一个用于构建Web应用程序的UI框架。JSF2.0是一个重要的版本更新，它引入了许多新特性和改进，使得开发更加高效和灵活。在这个环境中，我们将...
**JSF 2.0（JavaServer Faces 2.0）教程详解** JavaServer Faces (JSF) 是Java EE平台中的一个用户界面组件框架，它主要用于构建动态、数据驱动的Web应用程序。JSF 2.0是该框架的一个重要版本，引入了许多改进和新...
**JSF 2.0 .3 Lib 官方发布包详解** JavaServer Faces（JSF）是Java平台上的一个标准的、模型-视图-控制器（MVC）框架，用于构建Web应用程序。JSF 2.0是其一个重要版本，带来了许多改进和新特性，而JSF 2.0.3则是该...
**JSF 2.0（JavaServer Faces 2.0）是Java EE 6中引入的一个重要的Web应用程序开发框架，用于构建用户界面。这个框架基于MVC（Model-View-Controller）模式，提供了丰富的组件库和事件处理机制，极大地简化了前端...
在创建新项目时，选择"Java Web"类别下的"JSF 2.0"应用模板。接着，设置项目名称和位置，Netbeans将自动为你创建所需的文件结构。项目创建后，你可以通过添加新的JSF页面（通常扩展名为.xhtml）开始构建视图层。 ...
4. **国际化**：JSF 2.0支持多语言资源包，方便实现全球化应用。 5. **错误处理**：统一的错误和警告处理机制，提供更好的用户体验。 总的来说，JSF 2.0 API为Java Web开发带来了强大的工具集，使得开发人员能够更...
这个"JSF2.0-hello-world-example-2.1.7.zip"是一个示例项目，用于帮助开发者了解如何在JSF 2.0环境中创建一个简单的“Hello World”应用程序。** 首先，让我们深入了解一下JSF的核心概念： 1. **组件模型**：JSF...
JSF 2.0是基于组件的框架，它提供了一系列预先定义的UI组件，如按钮、表单、文本框等，开发者可以通过声明式方式在页面上使用这些组件。每个组件都与后台Bean的属性绑定，允许数据的双向传递。此外，JSF 2.0支持...
全面介绍JSF2.0、详述如何使用Ajax，以及按照JSF2.0、的方式构建组件、快速理解众多可以直接运行的代码示例。 作者 作者：(美国)伯恩斯 (Ed Burns) (美国)沙尔克 (Chris Schalk) (美国)格里芬 (Neil Griffin) 译者...
全面介绍JSF2.0、详述如何使用Ajax，以及按照JSF2.0、的方式构建组件、快速理解众多可以直接运行的代码示例。 作者 作者：(美国)伯恩斯 (Ed Burns) (美国)沙尔克 (Chris Schalk) (美国)格里芬 (Neil Griffin) 译者...
- **JSF 2.0 的优势**：相比早期版本，JSF 2.0 引入了 Facelets 视图技术，使得模板化更加容易；引入了内联表达式语言（EL），减少了页面中的脚本代码；增强了组件模型，使得自定义组件更加简单；提供了更强大的事件...
总之，JSF 2.0结合Dojo库提供了一种灵活的方法来实现换肤功能，通过动态改变CSS引用，可以轻松地改变Web应用的视觉样式，满足用户的个性化需求。通过深入理解这些技术和实践，你可以为你的JSF应用带来更丰富、更具...
- Facelets取代了JSP成为JSF 2.0的默认视图技术，提供更清晰、模块化的页面结构，支持XML语法，使得代码更易于维护。 - Facelets允许使用模板和组件库，简化了页面布局和重用。 2. **依赖注入（Dependency ...