使用 Richfaces/Ajax4Jsf 创建 Web 应用

概念介绍

JSF 和 Ajax 概念大家一定不陌生,二者结合起来衍生出 A4J(Ajax4JSF)。其目的就是将 Ajax 的功能集成到 JSF 组件中去。后来 JBoss 收购 A4J 后,又将其集成到 RichFaces 中,不但丰富了控件库和还添加了新功能。现在 RichFaces 已经是一个具有 Ajax 和 JSF 特性 的 Web 框架。对开发人员来说,只要按照 JSF 的组件规范来组织页面,免去了书写或调用庞杂的 JavaScript 代码或库,就能达到梦寐以求的 Ajax 效果 ---- 可以只更新局部内容而不用刷新整个页面,增强了用户体验。

样例

下面就举一个简单的例子来说明如何使用 Richfaces。该例是一个对列表的编辑,实现对数据的修改/删除/添加,主要用到了 rich:dataTable 控件。如下图示:


图 1. 样例
使用 Richfaces/Ajax4Jsf 创建 Web 应用

Jar 包

开发 RichFaces 应用,除了 RichFaces 的 Jar 文件外,还需用到 Jsf,jakatar-commons 以及 log4j 等 Jar 包。本例中用到的 RichFaces 的版本为 3.1.0, Jsf 采用 Apache MyFaces 1.1.5。详细 Jar 包列表如下图:


图 2. Jar 包清单
使用 Richfaces/Ajax4Jsf 创建 Web 应用

类图

JSF 需要把页面数据和操作对象化,通过 component 来封装。这里有两个类,其中 Bean 为控制类,定义响应用户点击按钮的事件方法,并作为连接视图和数据层的桥梁。 Person 为数据类,用来封装页面数据。它们之间关系参见下图:


图 3. 类图
使用 Richfaces/Ajax4Jsf 创建 Web 应用

配置文件

Java 的 Web 运用一般通过 War 的形式发布,其中需要 web.xml 作为应用的配置文件。RichFaces 要求在该配置文件中除了通常的 JSF Servlet 定义外,再加上一个 RichFaces 的过滤器就行了。下面是样例配置说明。

web.xml 文件


图 4. web.xml 配置
使用 Richfaces/Ajax4Jsf 创建 Web 应用

faces-config.xml 文件

按照 JSF 要求,需要配置 faces-config.xml 文件,如下图所示:


图 5. faces-config.xml 配置
使用 Richfaces/Ajax4Jsf 创建 Web 应用

代码

这里着重介绍视图 JSP 页面的编码。首先申明所需的 taglib,如下:

使用 Richfaces/Ajax4Jsf 创建 Web 应用<%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<%@tagliburi="http://richfaces.org/a4j"prefix="a4j"%>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<%@tagliburi="http://richfaces.org/rich"prefix="rich"%>

f,h 用来引用 JSF 的控件,a4j 和 rich 用来引用 Ajax4JSF 和 RichFaces 控件。

先建立 a4j:form,并将 rich:dataTable 放在里面。dataTable 作为数据显示的载体。

使用 Richfaces/Ajax4Jsf 创建 Web 应用<rich:dataTableid="p"value="#{bean.people}"var="person"width="100%"
使用 Richfaces/Ajax4Jsf 创建 Web 应用binding
="#{bean.table}">
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<f:facetname="header">
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:columnGroup>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="name"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="agender"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="age"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="address"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="action"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:columnGroup>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</f:facet>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:columnGroup>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="#{person.name}"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="#{person.agender}"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:inputTextid="age"value="#{person.age}"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="#{person.address}"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<a4j:commandLinkonclick="checkDel()"value="delete"
使用 Richfaces/Ajax4Jsf 创建 Web 应用action
="#{bean.del}"reRender="p">
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<a4j:actionparamname="rowIndex"value="#{bean.table.rowIndex}"
使用 Richfaces/Ajax4Jsf 创建 Web 应用assignTo
="#{bean.curRow}"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</a4j:commandLink>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:columnGroup>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<f:facetname="footer">
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:columnGroup>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<rich:columncolspan="5">
使用 Richfaces/Ajax4Jsf 创建 Web 应用
<h:outputTextvalue="totalis#{bean.table.rowCount}items"/>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:column>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:columnGroup>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</f:facet>
使用 Richfaces/Ajax4Jsf 创建 Web 应用
使用 Richfaces/Ajax4Jsf 创建 Web 应用
</rich:dataTable>

请注意 delete 按钮,它的 Action 绑定到 Bean 的方法 del()。最神奇的地方是通过 reRender 属性来把动作执行的结果来刷新整个 dataTable。这就是 richfaces 体现 ajax 特性的地方。当删除一行时,页面没有感觉刷新,但表格发生了变化。

下载

描述 名字 大小 下载方法
本文用到的样例程序 Eclipse 工程压缩包,内附 Ant 文件 myweb.zip 10KB HTTP
使用 Richfaces/Ajax4Jsf 创建 Web 应用
使用 Richfaces/Ajax4Jsf 创建 Web 应用 关于下载方法的信息 使用 Richfaces/Ajax4Jsf 创建 Web 应用


参考资料