本篇介绍可以与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增加了更多的事件类型和监听器接口,允许开发者在特定生命周期阶段进行定制化处理。 10. **安全性增强**: JSF 2.0在安全方面也有所加强,如对XSS(跨站脚本攻击)的防护,以及对CSRF(跨站请求伪造)的...
JSF 2.0引入了Faces Flow概念,为复杂的流程管理提供了一种结构化的方法。Faces Flow允许在多个页面之间组织逻辑,创建可重用的流程组件。 总的来说,JavaServer Faces 2.0通过增强组件库、依赖注入、异步请求处理...
Facelets 提供了更简洁的模板语法,支持嵌套视图组件,使得页面布局更加清晰,易于维护。 - **自动组件绑定**:在 JSF 2.0 中,表单字段可以自动绑定到模型对象的属性,无需显式编写 EL 表达式或 setter/getter ...
JSF 2.0支持AJAX,允许部分页面更新,提升了用户体验。通过使用f:ajax标签或PrimeFaces等库,可以轻松实现异步交互。 10. **会话和状态管理** JSF管理会话状态,确保用户在会话期间保持一致的体验。JSF 2.0提供了...
- JSF2.0引入了Facelets作为默认的视图描述语言,替代了JSP,使页面结构更加清晰,代码更易于维护。 - 新增了Managed Bean的注解支持,如`@ManagedBean`和`@ViewScoped`,提高了开发效率。 2. **环境搭建** - ...
3. **异步处理**:JSF 2.0引入了AJAX支持,允许部分页面更新,提高用户体验。通过`<f:ajax>`标签或PrimeFaces等第三方库,可以轻松实现异步请求。 4. **导航系统**:JSF 2.0的导航系统更加灵活,支持基于表达式的...
在创建新项目时,选择"Java Web"类别下的"JSF 2.0"应用模板。接着,设置项目名称和位置,Netbeans将自动为你创建所需的文件结构。项目创建后,你可以通过添加新的JSF页面(通常扩展名为.xhtml)开始构建视图层。 ...
4. **国际化**:JSF 2.0支持多语言资源包,方便实现全球化应用。 5. **错误处理**:统一的错误和警告处理机制,提供更好的用户体验。 总的来说,JSF 2.0 API为Java Web开发带来了强大的工具集,使得开发人员能够更...
JSF 2.0是基于组件的框架,它提供了一系列预先定义的UI组件,如按钮、表单、文本框等,开发者可以通过声明式方式在页面上使用这些组件。每个组件都与后台Bean的属性绑定,允许数据的双向传递。此外,JSF 2.0支持...
这个"JSF2.0-hello-world-example-2.1.7.zip"是一个示例项目,用于帮助开发者了解如何在JSF 2.0环境中创建一个简单的“Hello World”应用程序。** 首先,让我们深入了解一下JSF的核心概念: 1. **组件模型**:JSF...
全面介绍JSF2.0、详述如何使用Ajax,以及按照JSF2.0、的方式构建组件、快速理解众多可以直接运行的代码示例。 作者 作者:(美国)伯恩斯 (Ed Burns) (美国)沙尔克 (Chris Schalk) (美国)格里芬 (Neil Griffin) 译者...
全面介绍JSF2.0、详述如何使用Ajax,以及按照JSF2.0、的方式构建组件、快速理解众多可以直接运行的代码示例。 作者 作者:(美国)伯恩斯 (Ed Burns) (美国)沙尔克 (Chris Schalk) (美国)格里芬 (Neil Griffin) 译者...
使用EL表达式(Expression Language)访问managed bean中的皮肤属性,然后在页面模板中插入对应的CSS资源。 5. **整合Dojo**:Dojo提供了一些强大的DOM操作工具,可以方便地与JSF集成。例如,我们可以使用dojo/on...
- **JSF 2.0 的优势**:相比早期版本,JSF 2.0 引入了 Facelets 视图技术,使得模板化更加容易;引入了内联表达式语言(EL),减少了页面中的脚本代码;增强了组件模型,使得自定义组件更加简单;提供了更强大的事件...
- Facelets取代了JSP成为JSF 2.0的默认视图技术,提供更清晰、模块化的页面结构,支持XML语法,使得代码更易于维护。 - Facelets允许使用模板和组件库,简化了页面布局和重用。 2. **依赖注入(Dependency ...
Facelets提供了更清晰、更可维护的视图结构,支持模板和包含,使得页面布局更为灵活。 2. **Component Model**:JSF的核心是组件模型,它允许开发者通过拖拽和配置UI组件来构建界面。JSF 2.0引入了更多的内置组件,...
Facelets提供了更简洁、更易于维护的XML语法,支持组件化和模板化开发。 2. **全双工通信**:JSF 2.0引入了Partial State Saving(部分状态保存)机制,优化了页面回发过程,减少了服务器负担。同时,通过AJAX支持...
本资源集合包括JSF 1.1, 1.2 和 2.0 的API文档,是深入理解和学习JSF的重要参考资料。 ### JSF 1.1 API JSF 1.1 是JSF的第一个正式版本,发布于2004年。这个版本的核心特性包括: 1. **组件模型**:JSF提供了一种...