JSF2.0的页面模版化

yingfang05

浏览: 123024 次
性别:
来自: 重庆

最近访客更多访客>>

自恋的斌哥哥

airyoureyes

ddkwubai

NieXJ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XHTML UI 编程浏览器 Tapestry

本篇介绍可以与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新的组件模型的简介例子写完了，希望能给大家一些帮助。

分享到：

Java的PBE算法加密 | EJB3部署文件中使用拦截器元素语法

2009-08-15 10:28
浏览 1733
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论