An Introduction To JBoss RichFaces
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.
Skinability
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:


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






Comments
Yeray Rodriguez replied on Mon, 2009/07/06 - 7:53am
Hi,
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
sarah mark replied on Thu, 2009/08/13 - 4:57am
I must say great website. I have just googled it nice info out there.
Thanks,
Acne
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?
Thanks,
Levitra
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:
the content of my user.jsp is :
any ideas?
thans in advance
Ken Kham replied on Fri, 2009/10/02 - 6:53am
Max Katz replied on Thu, 2009/10/08 - 10:23pm
in response to:
Ken Kham
Max Katz replied on Thu, 2009/10/08 - 10:23pm
in response to:
nabil esseme7
john green green replied on Mon, 2009/10/26 - 3:28am
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="#{someForm.data}">
Max Katz replied on Wed, 2009/10/28 - 10:20pm
in response to:
Dragan Mijailovic
Dragan Mijailovic replied on Thu, 2009/10/29 - 8:41am
Thanks a lot. The "keepAlive bean" or bean with page scope should implement the java.io.Serializable interface and because of that I asked about "keepAlive bean" and rich:tree component. I see that org.richfaces.model.TreeNode implements java.io.Serializable interface.
Now, my example with rich:tree is good except I can't know when a node is collapsed. I use this example http://stackoverflow.com/questions/1509962/is-there-an-event-for-collapsing-a-richtree-node
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
here is user.xhtml
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.
thanks
Eskendir Mulu replied on Mon, 2009/11/16 - 2:35pm
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
Shilpa Reddy replied on Mon, 2010/12/06 - 5:51pm
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="#{userBean.selectedUser.name}"
Error:
javax.el.PropertyNotFoundException: /user.xhtml @55,81 value="#{userBean.selectedUser.name}": Target Unreachable, 'selectedUser' returned null
.....
Any help is much appreciated.
Thanks!
Sarwo Edi Wibowo replied on Tue, 2010/12/28 - 11:14pm
Peter Sule replied on Wed, 2011/01/05 - 8:26am
Max Katz replied on Thu, 2011/01/27 - 12:39pm
in response to:
Sarwo Edi Wibowo
Max Katz replied on Thu, 2011/01/27 - 12:40pm
in response to:
Peter Sule
ezd ass replied on Thu, 2011/02/17 - 9:40am
David May replied on Mon, 2011/04/11 - 11:33pm
in response to:
ezd ass
David May replied on Mon, 2011/04/11 - 11:49pm
in response to:
Max Katz
Max Katz replied on Mon, 2011/04/18 - 12:21pm
in response to:
David May
Majid Lotfi replied on Thu, 2011/05/12 - 1:38pm
Hi,
I downloaded eclipse but could not find the directory :
org.jboss.tools.common.projecttemplates_X.X.X
under plugins
can you please help.
thanks