使用 Richfaces/Ajax4Jsf 创建 Web 应用

概念介绍

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

样例

下面就举一个简单的例子来说明如何使用 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 特性的地方。当删除一行时，页面没有感觉刷新，但表格发生了变化。

下载

描述	名字	大小	下载方法
本文用到的样例程序 Eclipse 工程压缩包，内附 Ant 文件	myweb.zip	10KB	HTTP

	关于下载方法的信息

参考资料

• RichFaces 的官方网站：有在线实例，论坛，工具下载等。
  
  
• Apache MyFaces 网站：能通过 wiki，在线文档等学习 JSF。
  
  
• developerWorks Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
  
  
• 订阅 Ajax 相关文章和教程 的 RSS 提要：获得即将发表的 Ajax 相关文章和教程的通知（查看 developerWorks 内容 RSS 提要 了解更多的信息）。