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开发带来了哪些便捷体验。