跳转到主要内容

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

当您初次登录到 developerWorks 时,将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人,但您可以随时修改这些信息的显示状态。您的姓名(除非选择隐藏)和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

  • 关闭 [x]

当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

所有提交的信息确保安全。

  • 关闭 [x]

使用 Richfaces/Ajax4Jsf 创建 Web 应用

周 进光 (zhoujinguang@yahoo.com.cn), 软件工程师, 舜联软件科技
周进光,拥有多年的 Java 应用经验,现在 moto 从事手机配置网站的开发。对 Java 的 Web 应用开发比较感兴趣。

简介: 本文简要介绍如何运用 Richfaces/A4J 来构建 JSF 应用,包括如何定义配置文件、控件使用等。

发布日期: 2007 年 11 月 30 日
级别: 初级
访问情况 : 2819 次浏览
评论: 


概念介绍

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

请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

RSS 订阅 Ajax 相关文章和教程的 RSS 提要

样例

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


图 1. 样例
图 1. 样例

Jar 包

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


图 2. Jar 包清单
图 2. Jar 包清单

类图

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


图 3. 类图
图 3. 类图

配置文件

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

web.xml 文件


图 4. web.xml 配置
图 4. web.xml 配置

faces-config.xml 文件

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


图 5. 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.zip10KBHTTP

关于下载方法的信息


参考资料

关于作者

周进光,拥有多年的 Java 应用经验,现在 moto 从事手机配置网站的开发。对 Java 的 Web 应用开发比较感兴趣。

关于报告滥用的帮助

报告滥用

谢谢! 此内容已经标识给管理员注意。


关于报告滥用的帮助

报告滥用

报告滥用提交失败。 请稍后重试。


developerWorks:登录


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 使用条款

 


当您初次登录到 developerWorks 时,将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人,但您可以随时修改这些信息的显示状态。您的姓名(除非选择隐藏)和昵称将和您在 developerWorks 发布的内容一同显示。

请选择您的昵称:

当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

(长度在 3 至 31 个字符之间)


单击提交则表示您同意developerWorks 的条款和条件。 使用条款.

 


为本文评分

评论

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, Java technology
ArticleID=271489
ArticleTitle=使用 Richfaces/Ajax4Jsf 创建 Web 应用
publish-date=11302007
author1-email=zhoujinguang@yahoo.com.cn
author1-email-cc=

标签

Help
使用 搜索 文本框在 My developerWorks 中查找包含该标签的所有内容。

使用 滑动条 调节标签的数量。

热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。

我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。

使用搜索文本框在 My developerWorks 中查找包含该标签的所有内容。热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。