JSF2.0简介：页面模版化（系列之四）
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的入门及例子，其中的例子并未精心选择，只是用来说明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开发带来了哪些便捷体验。