`
yingfang05
  • 浏览: 122733 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JSF2.0的页面模版化

    博客分类:
  • jsf
阅读更多
本篇介绍可以与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 2.0 (Mojarra 2.0.2-FCS)

    JSF 2.0增加了更多的事件类型和监听器接口,允许开发者在特定生命周期阶段进行定制化处理。 10. **安全性增强**: JSF 2.0在安全方面也有所加强,如对XSS(跨站脚本攻击)的防护,以及对CSRF(跨站请求伪造)的...

    jsf 2.0官方参考手册

    JSF 2.0引入了Faces Flow概念,为复杂的流程管理提供了一种结构化的方法。Faces Flow允许在多个页面之间组织逻辑,创建可重用的流程组件。 总的来说,JavaServer Faces 2.0通过增强组件库、依赖注入、异步请求处理...

    JSF 2.0 开发资料

    Facelets 提供了更简洁的模板语法,支持嵌套视图组件,使得页面布局更加清晰,易于维护。 - **自动组件绑定**:在 JSF 2.0 中,表单字段可以自动绑定到模型对象的属性,无需显式编写 EL 表达式或 setter/getter ...

    jsf2.0 tutorial.rar

    JSF 2.0支持AJAX,允许部分页面更新,提升了用户体验。通过使用f:ajax标签或PrimeFaces等库,可以轻松实现异步交互。 10. **会话和状态管理** JSF管理会话状态,确保用户在会话期间保持一致的体验。JSF 2.0提供了...

    JSF2.0基本环境

    - JSF2.0引入了Facelets作为默认的视图描述语言,替代了JSP,使页面结构更加清晰,代码更易于维护。 - 新增了Managed Bean的注解支持,如`@ManagedBean`和`@ViewScoped`,提高了开发效率。 2. **环境搭建** - ...

    JSF 2.0 .3 lib 官方发布包

    3. **异步处理**:JSF 2.0引入了AJAX支持,允许部分页面更新,提高用户体验。通过`&lt;f:ajax&gt;`标签或PrimeFaces等第三方库,可以轻松实现异步请求。 4. **导航系统**:JSF 2.0的导航系统更加灵活,支持基于表达式的...

    Netbeans 开发 JSF 2.0 入门学习,使用Primefaces 及JPA

    在创建新项目时,选择"Java Web"类别下的"JSF 2.0"应用模板。接着,设置项目名称和位置,Netbeans将自动为你创建所需的文件结构。项目创建后,你可以通过添加新的JSF页面(通常扩展名为.xhtml)开始构建视图层。 ...

    JSF2.0 API

    4. **国际化**:JSF 2.0支持多语言资源包,方便实现全球化应用。 5. **错误处理**:统一的错误和警告处理机制,提供更好的用户体验。 总的来说,JSF 2.0 API为Java Web开发带来了强大的工具集,使得开发人员能够更...

    JSF2.0 Tutorial

    JSF 2.0是基于组件的框架,它提供了一系列预先定义的UI组件,如按钮、表单、文本框等,开发者可以通过声明式方式在页面上使用这些组件。每个组件都与后台Bean的属性绑定,允许数据的双向传递。此外,JSF 2.0支持...

    JSF2.0-hello-world-example-2.1.7.zip

    这个"JSF2.0-hello-world-example-2.1.7.zip"是一个示例项目,用于帮助开发者了解如何在JSF 2.0环境中创建一个简单的“Hello World”应用程序。** 首先,让我们深入了解一下JSF的核心概念: 1. **组件模型**:JSF...

    JavaServer Faces 2.0完全参考手册(JSF2.0中文版) 1/2

    全面介绍JSF2.0、详述如何使用Ajax,以及按照JSF2.0、的方式构建组件、快速理解众多可以直接运行的代码示例。 作者 作者:(美国)伯恩斯 (Ed Burns) (美国)沙尔克 (Chris Schalk) (美国)格里芬 (Neil Griffin) 译者...

    JavaServer Faces 2.0完全参考手册(JSF2.0中文版).part1

    全面介绍JSF2.0、详述如何使用Ajax,以及按照JSF2.0、的方式构建组件、快速理解众多可以直接运行的代码示例。 作者 作者:(美国)伯恩斯 (Ed Burns) (美国)沙尔克 (Chris Schalk) (美国)格里芬 (Neil Griffin) 译者...

    JSF2.0实战 - 8、实现换肤功能

    使用EL表达式(Expression Language)访问managed bean中的皮肤属性,然后在页面模板中插入对应的CSS资源。 5. **整合Dojo**:Dojo提供了一些强大的DOM操作工具,可以方便地与JSF集成。例如,我们可以使用dojo/on...

    JSF2-Getting-Started

    - **JSF 2.0 的优势**:相比早期版本,JSF 2.0 引入了 Facelets 视图技术,使得模板化更加容易;引入了内联表达式语言(EL),减少了页面中的脚本代码;增强了组件模型,使得自定义组件更加简单;提供了更强大的事件...

    jsf2

    - Facelets取代了JSP成为JSF 2.0的默认视图技术,提供更清晰、模块化的页面结构,支持XML语法,使得代码更易于维护。 - Facelets允许使用模板和组件库,简化了页面布局和重用。 2. **依赖注入(Dependency ...

    JavaServer Faces 2.0, The Complete Reference源码

    Facelets提供了更清晰、更可维护的视图结构,支持模板和包含,使得页面布局更为灵活。 2. **Component Model**:JSF的核心是组件模型,它允许开发者通过拖拽和配置UI组件来构建界面。JSF 2.0引入了更多的内置组件,...

    mojarra-2.0.0-EDR1-binary.zip

    Facelets提供了更简洁、更易于维护的XML语法,支持组件化和模板化开发。 2. **全双工通信**:JSF 2.0引入了Partial State Saving(部分状态保存)机制,优化了页面回发过程,减少了服务器负担。同时,通过AJAX支持...

    JSF1.1,1.2,2.0API大集合

    本资源集合包括JSF 1.1, 1.2 和 2.0 的API文档,是深入理解和学习JSF的重要参考资料。 ### JSF 1.1 API JSF 1.1 是JSF的第一个正式版本,发布于2004年。这个版本的核心特性包括: 1. **组件模型**:JSF提供了一种...

Global site tag (gtag.js) - Google Analytics