Use richfaces/ajax4jsf to create a web application

Zhou Jinguang (zhoujinguang@yahoo.com.cn), software engineer, shunlian Software Technology

November 30, 2007

This article briefly introduces how to use richfaces/a4j to build JSF applications, including how to define configuration files and controls.

Concepts

JSF
And Ajax concepts, which are derived from ajax4jsf ). The purpose is to integrate Ajax functions into JSF components. Later
After JBoss acquired a4j, it was integrated into richfaces, which enriched the control library and added new functions. Richfaces is already
Web framework with Ajax and JSF features. For developers, as long as they organize pages according to the JSF component specifications, they do not need to write or call complex
JavaScript code or library can achieve the desired Ajax effect-you can update only partial content without refreshing the entire page, enhancing the user experience.

Visit the Ajax technical resource center, an all-in-one center for Ajax programming model information, including many documents, tutorials, forums, blogs, wikis, and news. Any new Ajax information can be found here. Subscribe to RSS feeds for Ajax-related articles and tutorials

Example

The following is a simple example to illustrate how to use richfaces. In this example, you can edit the list to modify, delete, or add data. The rich: able control is used. As shown in:

Figure 1. Example

Jar package

Open
In addition to the richfaces JAR file, the richfaces application also needs JSF, jakatar-commons, and log4j.
And other jar packages. In this example, the richfaces version is 3.1.0, and JSF uses Apache MyFaces 1.1.5. Detailed jar
The package list is as follows:

Figure 2. jar package list

Class Diagram

JSF needs to visualize page data and operations and encapsulate them through component. Here there are two classes, bean is the control class, define the event Method to respond to the user click button, and serve as a bridge connecting the view and data layer. Person is a data class used to encapsulate page data. For the relationship between them, see:

Figure 3. Class Diagram

Configuration File

Java Web applications are generally published in the form of war, where web. XML is used as the application configuration file. Richfaces requires that you add a richfaces filter in addition to the normal JSF servlet definition in the configuration file. The following is a sample configuration description.

Web. xml file

Figure 4. Web. xml configuration

Faces-config.xml files

As required by JSF, You need to configure the faces-config.xml file, as shown in:

Figure 5. faces-config.xml Configuration

Code

This section focuses on the view JSP page encoding. Declare the required taglib as follows:

<%@ 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 and H are used to reference JSF controls. a4j and rich are used to reference ajax4jsf and richfaces controls.

Create a4j: form first, and put rich: able in it. Datatable is used as a carrier for data display.

<rich:dataTable id="p" value="#{bean.people}" var="person" width="100%" binding="#{bean.table}"> <f:facet name="header"> <rich:columnGroup> <rich:column> </rich:column> <rich:column> </rich:column> <rich:column> </rich:column> <rich:column> </rich:column> <rich:column> </rich:column> </rich:columnGroup> </f:facet> <rich:columnGroup> <rich:column> </rich:column> <rich:column> </rich:column> <rich:column> </rich:column> <rich:column> </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"> </rich:column> </rich:columnGroup> </f:facet> </rich:dataTable>

Please
Note the delete button. Its action is bound to the bean method del (). The most amazing thing is through rerender
Attribute to refresh the entire able. This is how richfaces embodies Ajax.
Feature. When a row is deleted, the page does not feel refreshed, but the table changes.

Back to Top

Download

Description	Name	Size	Download Method
The sample program Eclipse project compressed package used in this article contains the ant File	Myweb.zip	10kb	HTTP

	Information about the Download Method

References

• Richfaces Official Website: includes online instances, forums, and tool downloads.

• Apache MyFaces Website: Learning JSF through Wiki and online documents.

• Developerworks Ajax technical resource center: all questions about Ajax on developerworks can be found here.

• Subscribe to RSS feeds for Ajax-related articles and Tutorials: Get notifications about upcoming Ajax-related articles and tutorials (see the RSS feeds on developerworks for more information ).

About the author

		Zhou Jinguang has many years of Java application experience. Now, Moto is engaged in the development of mobile phone configuration websites. Interested in Java Web application development. From: http://www.ibm.com/developerworks/cn/web/wa-lo-aj-richfaces/