使用 Richfaces/Ajax4Jsf 创建 Web 应用
来源:互联网 发布:知世图片 编辑:程序博客网 时间:2024/05/22 17:41
周 进光 (zhoujinguang@yahoo.com.cn), 软件工程师, 舜联软件科技
2007 年 11 月 30 日
本文简要介绍如何运用 Richfaces/A4J 来构建 JSF 应用,包括如何定义配置文件、控件使用等。
概念介绍
JSF和 Ajax 概念大家一定不陌生,二者结合起来衍生出 A4J(Ajax4JSF)。其目的就是将 Ajax 的功能集成到 JSF 组件中去。后来JBoss 收购 A4J 后,又将其集成到 RichFaces 中,不但丰富了控件库和还添加了新功能。现在 RichFaces 已经是一个具有Ajax 和 JSF 特性 的 Web 框架。对开发人员来说,只要按照 JSF 的组件规范来组织页面,免去了书写或调用庞杂的JavaScript 代码或库,就能达到梦寐以求的 Ajax 效果 ---- 可以只更新局部内容而不用刷新整个页面,增强了用户体验。
请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
订阅 Ajax 相关文章和教程的 RSS 提要样例
下面就举一个简单的例子来说明如何使用 Richfaces。该例是一个对列表的编辑,实现对数据的修改/删除/添加,主要用到了 rich:dataTable 控件。如下图示:
图 1. 样例
Jar 包
开发 RichFaces 应用,除了 RichFaces 的 Jar 文件外,还需用到 Jsf,jakatar-commons 以及 log4j等 Jar 包。本例中用到的 RichFaces 的版本为 3.1.0, Jsf 采用 Apache MyFaces 1.1.5。详细 Jar包列表如下图:
图 2. Jar 包清单
类图
JSF 需要把页面数据和操作对象化,通过 component 来封装。这里有两个类,其中 Bean 为控制类,定义响应用户点击按钮的事件方法,并作为连接视图和数据层的桥梁。 Person 为数据类,用来封装页面数据。它们之间关系参见下图:
图 3. 类图
配置文件
Java 的 Web 运用一般通过 War 的形式发布,其中需要 web.xml 作为应用的配置文件。RichFaces 要求在该配置文件中除了通常的 JSF Servlet 定义外,再加上一个 RichFaces 的过滤器就行了。下面是样例配置说明。
web.xml 文件
图 4. web.xml 配置
faces-config.xml 文件
按照 JSF 要求,需要配置 faces-config.xml 文件,如下图所示:
图 5. faces-config.xml 配置
代码
这里着重介绍视图 JSP 页面的编码。首先申明所需的 taglib,如下:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
f,h 用来引用 JSF 的控件,a4j 和 rich 用来引用 Ajax4JSF 和 RichFaces 控件。
先建立 a4j:form,并将 rich:dataTable 放在里面。dataTable 作为数据显示的载体。
<rich:dataTable id="p" value="#{bean.people}" var="person" width="100%"
binding="#{bean.table}">
<f:facet name="header">
<rich:columnGroup>
<rich:column>
<h:outputText value="name"/>
</rich:column>
<rich:column>
<h:outputText value="agender"/>
</rich:column>
<rich:column>
<h:outputText value="age"/>
</rich:column>
<rich:column>
<h:outputText value="address"/>
</rich:column>
<rich:column>
<h:outputText value="action"/>
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:columnGroup>
<rich:column>
<h:outputText value="#{person.name}"/>
</rich:column>
<rich:column>
<h:outputText value="#{person.agender}"/>
</rich:column>
<rich:column>
<h:inputText id="age" value="#{person.age}"/>
</rich:column>
<rich:column>
<h:outputText value="#{person.address}"/>
</rich:column>
<rich:column>
<a4j:commandLink onclick="checkDel()" value="delete"
action="#{bean.del}" reRender="p">
<a4j:actionparam name="rowIndex" value="#{bean.table.rowIndex}"
assignTo="#{bean.curRow}"/>
</a4j:commandLink>
</rich:column>
</rich:columnGroup>
<f:facet name="footer">
<rich:columnGroup>
<rich:column colspan="5">
<h:outputText value="total is #{bean.table.rowCount} items"/>
</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
请注意 delete 按钮,它的 Action 绑定到 Bean 的方法 del()。最神奇的地方是通过 reRender属性来把动作执行的结果来刷新整个 dataTable。这就是 richfaces 体现 ajax特性的地方。当删除一行时,页面没有感觉刷新,但表格发生了变化。
回页首
下载
参考资料
- RichFaces 的官方网站:有在线实例,论坛,工具下载等。
- Apache MyFaces 网站:能通过 wiki,在线文档等学习 JSF。
- developerWorks Ajax 技术资源中心:developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
- 订阅 Ajax 相关文章和教程 的 RSS 提要:获得即将发表的 Ajax 相关文章和教程的通知(查看 developerWorks 内容 RSS 提要 了解更多的信息)。
关于作者
周进光,拥有多年的 Java 应用经验,现在 moto 从事手机配置网站的开发。对 Java 的 Web 应用开发比较感兴趣。
转自:http://www.ibm.com/developerworks/cn/web/wa-lo-aj-richfaces/
- 使用 Richfaces/Ajax4Jsf 创建 Web 应用
- 使用 Richfaces/Ajax4Jsf 创建 Web 应用
- Ajax4jsf
- Ajax4jsf
- Ajax4jsf
- ajax4jsf
- Richfaces应用--actionparam传值
- ajax4jsf常用标签的使用
- ajax4jsf常用标签的使用
- ajax4jsf常用标签的使用
- richfaces组件的使用
- richfaces组件使用补充
- RichFaces组件listShuttle使用
- 使用GO语言创建一个Web应用
- 使用SAPUI5来创建Web应用UI
- 使用Web Worker创建多线程应用
- Ajax4jsf使用a4j:poll实现定时刷新
- 使用ajax4jsf给jsf增加动态效果
- JPA 批注6
- JPA 批注5
- 替换js中函数的参数
- JPA 批注4
- 〖天涯头条〗《失业七个月,面试六十家公司》的深圳体验
- 使用 Richfaces/Ajax4Jsf 创建 Web 应用
- asp.net(c#)常用正则表达式实例
- 从ZipInputStream找出给定文件夹下的所有文件,存放在Map中,key=filename ,value=file content string
- I saw your tear(拜伦,Terry译)
- Struts2使用validator验证框架的问题
- vb中line的用法
- 测试人员的职业发展
- 系统重装后 Endnote 不能和Word联用的解决方法
- frmGInfoManage.cs