Max Katz heads Developer Relations for, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 82 posts at DZone. You can read more from them at their website. View Full User Profile

An Introduction To JBoss RichFaces

  • submit to reddit

This tutorial article will give a very quick introduction to JBoss RichFaces. Instead of just listing features, we are going to briefly define RichFaces and then dive right into an actual step-by-step example. In this example, we are going to go beyond the standard “Hello World” type of example. We will come back to this in just a moment.

JBoss RichFaces

If you know what RichFaces is already, then you can probably skip this section. For those of you who don't, here is what you need to know (the most important parts). JBoss RichFaces is a rich component library for JSF. RichFaces doesn't replace standard JSF, so you use RichFaces with either the Mojara JSF (Sun RI) implementation or the MyFaces implementation. RichFaces simply provides ready-to-use Ajax components to enable building Ajax-based applications. Another way to look at it is as just lots of extra JSF components beyond what the standard JSF provides. These components include all the necessary JavaScript coding, so you almost never have to work with JavaScript directly.

OK, this is the only place where I'm probably going to create some confusion, but I'm allowed to do it just once. RichFaces is not just a set of plug-ins, but actually a framework. One of its major features is its rich components. The components are divided into tag libraries. In addition, RichFaces provides a skinability (themes) features along with the Ajax4jsf CDK (Component Development Kit). For this article, I'm only mentioning CDK, so you are aware that it exists.

Two Tag Libraries

While the product is called RichFaces, it still has two different tag libraries. One tag library is called a4j: and the other is called rich:. The a4j: tag library provides page-level AJAX support. It basically provides foundation-like controls where you decide how to send a request, what to send to the server, and what to update. This approach gives you a lot of power and flexibility. The rich: tag library provides component-level AJAX support. Components from this library provide all their functionality out-of-the-box. In other words, you don’t need to decide how to send a request and what to update.


Another major feature is skinability (or themes). Any number of skins (defined via a property file) can be created with different color schemes. When a particular skin is set, component renderers will refer to that skin and generate colors, images, styles, and stylesheets based on that skin. What this means is that you can easily change the look and feel of the whole application by simply switching to a different skin. I have dedicated a complete section to this topic.

We're done. That's all you need to know for now.

Beyond “Hello World”

I'm pretty sure you are somewhat tired of “Hello World” examples. While they are very useful (at the beginning), they are not very practical in the real world. So, this time, let's go beyond “Hello World.” In this example, we will display a list of users in a table. Each row will have an “Edit” button. When this button is clicked, the application will open up a modal panel where that selected user can be edited. When changes are saved, only that particular row in the table will be updated, not the entire table.

Let's get started. We will start with the required software. You might already have the required software, so it's really your choice if you want to use your existing setup or continue with my setup. Our final application will look like this:

Article Resources: 
Published at DZone with permission of Max Katz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Yeray Rodriguez replied on Mon, 2009/07/06 - 7:53am


I'm using this code on a seam project and it work properly, but, it doesn't work when the table datatable is sorted. I don't know how to get the row id after user has sorted the table. Now I use the position inside the List of elements I pass to the datatable.

thanks in advance

    private Set <Integer>rowsToUpdate;
public Set <Integer>getRowsToUpdate() {
if (rowsToUpdate == null)rowsToUpdate = new HashSet<Integer>();
return rowsToUpdate;

public void cambiarFavorito (CartItem cartItem) {

if (rowsToUpdate == null)rowsToUpdate = new HashSet<Integer>();
int i = 0;
for (i = 0; i<resultList.size(); i++)
if (cartItem == resultList.get(i)){
//CartItem cartItem = resultList.get(0);
if (cartItem.getFavorito()==true) cartItem.setFavorito(false);
else cartItem.setFavorito(true);



id="listaArticulos" value="#{catalogoVenta.resultList}"
var="articulo" style="width:100%;" ajaxKeys="#{catalogoVenta.rowsToUpdate}" >

<rich:column id='marca' sortBy="#{articulo.marca}">
<f:facet name="header">
<h:outputText value="Marca" />
<h:outputText value="#{articulo.marca}" />
                <rich:column width="15px" style="width:15px;">
<f:facet name="header">
<h:graphicImage value="/img/extra/noheart.png" rendered="#{!articulo.favorito}" title="Artículo no favorito" alt="Artículo no favorito" />
<h:graphicImage value="/img/extra/heart.png" rendered="#{articulo.favorito}" title="Artículo favorito" alt="Artículo favorito" />
<h:graphicImage value="/img/extra/noheart.png" rendered="#{!articulo.favorito}" title="Artículo no favorito" alt="Artículo no favorito" />



sarah mark replied on Thu, 2009/08/13 - 4:57am

I must say great website. I have just googled it nice info out there.

James Bondy replied on Fri, 2009/08/28 - 2:43am in response to: Brian ray

It doesn't work to me too, can you upload this files again?



Edwin William replied on Mon, 2009/09/07 - 2:16pm


nabil esseme7 replied on Thu, 2009/10/01 - 10:24am

hi maxkatz and thank toy for your wonderful example,

i tried your code and this works fine until i want to add the modal panel and the save and close codes to the user.jsp page

i got this exception when i do that:

org.apache.jasper.JasperException: /user.jsp(22,4) The function component cannot be located with 
the specified prefix

 the content of my user.jsp is :


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
<%@ taglib prefix="f" uri=""%>
<%@ taglib prefix="h" uri=""%>
<%@ taglib prefix="rich" uri=""%>
<%@ taglib prefix="a4j" uri=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Gérer les salons de chat sms</title>
<rich:panel style="width:350px ;border:1; border-color:red">
<f:facet name="header">
Just some users
<rich:dataTable value="#{userBean.users}" var="user">
<a4j:commandButton value="Edit" oncomplete="#{rich:component('useredit')}.show()"
<f:setPropertyActionListener value="#{user}"
target="#{userBean.selectedUser}" />
<h:outputText id="name" value="#{}" />
<h:outputText id="email" value="#{user.password}" />

<rich:modalPanel id="useredit">

<f:facet name="header"> User </f:facet>
<h:panelGrid id="userinfo">
<h:outputLabel for="nameInput" value="Name:" />
<h:inputText id="nameInput" value="#{}" />
<h:outputLabel for="emailInput" value="Email:" />
<h:inputText id="emailInput"
value="#{userBean.selectedUser.password}" />
<h:panelGrid columns="2">
<a href="#" onclick="#{rich:component('useredit')}.hide();return false">Close </a>
<a4j:commandLink oncomplete="#{rich:component('useredit')}.hide();return false"> Save </a4j:commandLink>


any ideas?

thans in advance

Ken Kham replied on Fri, 2009/10/02 - 6:53am

Hello, I just bought the "Practical RichFaces" hoping to learn Richfaces using "JBOSS Developer Studio 2.0.0GA. I downloaded the, unzip, and copy the contents (ie the lib and template directories) to the (..\studio\eclipse\plugins\ directories. Everyting went as outlined in the book, even the warning that some files will be overwritten. I then follow the instructions on page 14 to create a new JSF project. But I tried to select the JSF environment, I could not see Richfaces anywhere??? Please let me know how I can get started on using Richfaces on "JBOSS Developer Studio", which, I would expect to support Richfaces out of the box:( Thank You

Max Katz replied on Thu, 2009/10/08 - 10:23pm in response to: Ken Kham

Did you create a new workspace after copying the templates?

Max Katz replied on Thu, 2009/10/08 - 10:23pm in response to: nabil esseme7

I can't tell you what the problem is, I only ran this application with Facelets.

john green green replied on Mon, 2009/10/26 - 3:28am

There is currently no option to time out keepAlive objects. nike shoes russiaYou can try do to it programmatically, it's an attribute of UIViewRoot. Seam converstations would be a better solution.

Dragan Mijailovic replied on Wed, 2009/10/28 - 8:07am

Can I use "keepAlive bean" for the <rich:tree/> component? For example:

<a4j:keepAlive name="someForm"/>

<rich:tree value="#{}">

Max Katz replied on Wed, 2009/10/28 - 10:20pm in response to: Dragan Mijailovic

a4j:keepAlive is not dependent on any component, you can use it with any bean. You are basically getting page scope when using this tag.

Dragan Mijailovic replied on Thu, 2009/10/29 - 8:41am

Thanks a lot. The "keepAlive bean" or bean with page scope should implement the interface and because of that I asked about "keepAlive bean" and rich:tree component. I see that org.richfaces.model.TreeNode implements interface.

Now, my example with rich:tree is good except I can't know when a node is collapsed. I use this example

but state.isExpanded(key) is always true! 


ely towers replied on Tue, 2009/11/10 - 9:46pm

Im having problems with the  save button its saying that it cannot find save method on bean file

Nov 10, 2009 8:32:37 PM org.ajax4jsf.component.AjaxViewRoot processEvents
SEVERE: Error processing faces event for the component j_id11:j_id16
javax.faces.event.AbortProcessingException: /user.xhtml @50,36 actionListener="#{}": Method not found:
at javax.faces.event.MethodExpressionActionListener.processAction(
at javax.faces.event.ActionEvent.processListener(
at javax.faces.component.UIComponentBase.broadcast(
at javax.faces.component.UICommand.broadcast(
at org.ajax4jsf.component.AjaxActionComponent.broadcast(
at org.ajax4jsf.component.AjaxViewRoot.processEvents(
at org.ajax4jsf.component.AjaxViewRoot.broadcastEvents(
at org.ajax4jsf.component.AjaxViewRoot.processPhase(
at org.ajax4jsf.component.AjaxViewRoot.processApplication(
at com.sun.faces.lifecycle.InvokeApplicationPhase.execute(
at com.sun.faces.lifecycle.Phase.doPhase(
at com.sun.faces.lifecycle.LifecycleImpl.execute(
at javax.faces.webapp.FacesServlet.service(
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(
at org.apache.catalina.core.ApplicationFilterChain.doFilter(
at org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(
at org.ajax4jsf.webapp.BaseFilter.handleRequest(
at org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(
at org.ajax4jsf.webapp.BaseFilter.doFilter(
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(
at org.apache.catalina.core.ApplicationFilterChain.doFilter(
at org.apache.catalina.core.StandardWrapperValve.invoke(
at org.apache.catalina.core.StandardContextValve.invoke(
at org.apache.catalina.core.StandardHostValve.invoke(
at org.apache.catalina.valves.ErrorReportValve.invoke(
at org.apache.catalina.core.StandardEngineValve.invoke(
at org.apache.catalina.connector.CoyoteAdapter.service(
at org.apache.coyote.http11.Http11Processor.process(
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(
Caused by: javax.el.MethodNotFoundException: /user.xhtml @50,36 actionListener="#{}": Method not found:
at com.sun.facelets.el.TagMethodExpression.invoke(
at javax.faces.event.MethodExpressionActionListener.processAction(
... 30 more

 here is user.xhtml

<rich:panel style="width:500px" >
<f:facet name="header">
Solo unos usuarios
<rich:dataTable value="#{Usuario.users}" var="user" ajaxKeys="#{Usuario.rowsToUpdate}" >
<h:column> <h:outputText value="#{}" id="name" />
<h:column> <h:outputText value="#{}" id="email" />
<h:column >
<a4j:commandButton value="Edit"
<f:setPropertyActionListener value="#{user}" target="#{Usuario.selectedUser}"/>
<a4j:keepAlive beanName="Usuario"/>
<rich:modalPanel id="useredit">
<f:facet name="header">
<h:form >
<h:panelGrid id="UserInfo">
<h:outputLabel value="Nombresito:" for="nameImput" />
<h:inputText id="nameImput" value="#{}"/>
<h:outputLabel value="Email" for="emailImput" />
<h:inputText id="emailImput" value="#{}"/>
<h:panelGrid columns="2">
<a href="#" onclick="#{rich:component('useredit')}.hide(); return false">
<a4j:keepAlive beanName="Usuario"/>
<a4j:commandLink actionListener="#{}"
and here is the bean
package example.beans;

import java.awt.event.ActionEvent;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import javax.annotation.PostConstruct;
import example.model.User;

public class UserBean {

private List<User>users;
private User selectedUser;
private Set<Integer>rowsToUpdate;

public Set<Integer> getRowsToUpdate() {
return rowsToUpdate;

public void save (ActionEvent event){

public List<User>getUsers(){
return users;

public User getSelectedUser() {
return selectedUser;

public void setSelectedUser(User selectedUser) {
this.selectedUser = selectedUser;

public void init(){
users=new ArrayList<User>();
users.add(new User("Joe", ""));
users.add(new User("Charley", ""));
users.add(new User("Jesus", ""));
users.add(new User("fatim", ""));
users.add(new User("Cris", ""));
rowsToUpdate = new HashSet<Integer>();

 any ideas ?? thanks in advance :_)

Eskendir Mulu replied on Mon, 2009/11/16 - 2:18pm

Is there an out of the box solution to filter tree objects, just like <rich:dtatTable>? if there is none, how would you go about implementing this fuctionality. I'm trying to implement help page.



Eskendir Mulu replied on Mon, 2009/11/16 - 2:35pm

Is there an out of the box solution to filter tree objects, just like <rich:dtatTable>? if there is none, how would you go about implementing this fuctionality. I'm trying to implement help page.

Chhavi Jain replied on Fri, 2010/01/29 - 5:06am

What are the two themes which we can use in<rich:editor>?

 If i use advanced theme then it displays buttons which i have not specified in configuration file,else it doesnt display specified buttons.Please tell me y?

Sami Meddeb replied on Wed, 2010/03/10 - 1:53pm in response to: marius batrinu

pleaseeeeee can some one help me to edit a row in my rich:dataTable?? i applied this work of xadel, but doesn't work for me !!! i am blocked in my studie project. Thanks in advence

Shilpa Reddy replied on Mon, 2010/12/06 - 5:51pm

I was trying to test this sample application and ran into several issues:
1. When I click edit in the dataTable the Model Panel pops up but it not populated .
2. It throws an on the below line in the modal Panel
h:inputText id="nameInput" value="#{}"
javax.el.PropertyNotFoundException: /user.xhtml @55,81 value="#{}": Target Unreachable, 'selectedUser' returned null
Any help is much appreciated.

Sarwo Edi Wibowo replied on Tue, 2010/12/28 - 11:14pm

Hi Max, I'm trying your tutorial, really good stuff. Anyway, how to manage so can running on IE 8? Anyway, if you don't mind, give me your strategy to be master like you now. :) Thanks Max.

Peter Sule replied on Wed, 2011/01/05 - 8:26am

Hi all! I also had the problem with the save button on the modal panel. The solution for me was to replace the import java.awt.event.ActionEvent; to import javax.faces.event.ActionEvent; in the clas. After saving everything and restarting the server, everything is working fine. Hope it helps! Peter

Max Katz replied on Thu, 2011/01/27 - 12:39pm in response to: Sarwo Edi Wibowo

It should work in IE8 - there is nothing special you need to do.

Max Katz replied on Thu, 2011/01/27 - 12:40pm in response to: Peter Sule

javax.faces.event.ActionEvent - is the correct class to use. It will not work with the Swing class (java.awt.*)

ezd ass replied on Thu, 2011/02/17 - 9:40am

hi, i couldn’t find file hierarchy which is similar to "\plugins\ " there is no package so i couldn't insert the template in file which specified in the tutorial what shall i do? i followed each instruction in tutorial i found the expected result except project template step-3.

David May replied on Mon, 2011/04/11 - 11:33pm in response to: ezd ass

The problem may be with where the JBoss Tools unzipped. On a Mac it creates a separate eclipse directory (eclipse2) instead of adding the files to the existing eclipse directory.

David May replied on Mon, 2011/04/11 - 11:49pm in response to: Max Katz

Note I am having the same problem. JSF Project is not an option that shows up. Checking the Eclipse help, they say to create a JSF Project, one should create a New Dynamic Web Project. Is this a change perhaps since the book was published?

Max Katz replied on Mon, 2011/04/18 - 12:21pm in response to: David May

Make sure you have JBoss Tools installed. The option to create and export a JSF project is still there.

Majid Lotfi replied on Thu, 2011/05/12 - 1:38pm


I downloaded eclipse but could not find the directory :

under plugins


can you please help.


Pat Meig replied on Thu, 2013/12/12 - 3:39pm

 I'm developing an application similar to this using a popup panel inplace of the modal panel.  After I click the Edit Button beside Joe the popuppanel is rendered before the query can complete and the name field is displayed as a blank.  If I close the popup and click the edit button for Bob the first name (Joe) is displayed.  It seems like the popup is rendered before the setItem can complete.  BTW setItem performs a several database queries which do not complete immediately.  Any hints how I can get the popup to wait until after the query completes?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.