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开发带来了哪些便捷体验。
分享到：
相关推荐
全面介绍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中引入了全新的界面表现模型Facelets，可以方便的实现自有组件定制和页面模版化。既强化了JSF提出以来的组件式开发思想，又简化了自有组件的开发。从Tapestry吸收来的模版方式不仅可以让开发工程师像搭...
12.2.5 Struts 2.0中的国际化编程 221 12.2.6 创建基于POJO的Action 223 12.3 Spring整合Struts 2.0框架 224 12.4 Struts 2.0应用实例：登录系统 227 12.5 本章小结 231 第13章 JPA的开发与应用 232 13.1 JPA规范...
16.4.3在jsf页面中使用springbean 16.4.4在jsf中暴露应用程序环境 16.5spring中带有dwr的支持ajax的应用程序 16.5.1直接web远程控制 16.5.2访问spring管理的beandwr 16.6小结 附录a装配spring a.1下载spring ...
16.4.3 在JSF页面中使用Spring Bean 16.4.4 在JSF中暴露应用程序环境 16.5 Spring中带有DWR的支持Ajax的应用程序 16.5.1 直接Web远程控制 16.5.2 访问Spring管理的Bean DWR 16.6 小结 附录A 装配Spring A.1 ...
16.4.3 在JSF页面中使用Spring Bean 16.4.4 在JSF中暴露应用程序环境 16.5 Spring中带有DWR的支持Ajax的应用程序 16.5.1 直接Web远程控制 16.5.2 访问Spring管理的Bean DWR 16.6 小结 附录A 装配Spring A.1 ...
PrettyFaces: EL API访问PrettyContext 支持JSF 1.1 增强了错误页面和servlet重定向 PrettyFaces是一个JSF1.2和JSF2.0的扩展，用来创建便于书签收藏、漂亮的网址。 PrettyFaces优雅的解决了这个问题，包括诸如功能：...
简介 笔者当初为了学习JAVA，收集了很多经典源码，源码难易程度分为初级、中级、高级等，详情看源码列表，需要的可以直接下载！ 这些源码反映了那时那景笔者对未来的盲目，对代码的热情、执着，对IT的憧憬、向往...
简介 笔者当初为了学习JAVA，收集了很多经典源码，源码难易程度分为初级、中级、高级等，详情看源码列表，需要的可以直接下载！ 这些源码反映了那时那景笔者对未来的盲目，对代码的热情、执着，对IT的憧憬、向往！...