An Introduction To JBoss RichFaces
Specific row update
Updating the whole table is rather simple. How do we update only the row that has been edited? All data components in RichFaces (including a4j:repeat) come with a feature that allows updating only a subset of rows. All such components expose an ajaxKeys attribute that points to the row or rows that need to be updated.
Let's first go over the changes we need to make on the page.
First, we need to set the ajaxKeys attribute on rich:dataTable (changes shown in bold):
<rich:dataTable value="#{userBean.users}" var="user"
ajaxKeys="#{userBean.rowsToUpdate}">That's all we need to do with the table.
Next we need to call a save method from the modal panel when we make changes to the user information. The updated Save link will look like this:
<a4j:commandLink actionListener="#{userBean.save}"
oncomplete="#{rich:component('useredit')}.hide()"
reRender="name, email">
Save
</a4j:commandLink>
The actionListener points to a listener inside the managed bean which we are going to create next. We also have the reRender attribute pointing to columns in the table. Basically, to achieve partial table update, we need to specify two things. First, which columns to update. In our case we are updating the name and email columns. Second, we need to specify which rows to update. This is done via the ajaxKeys attribute which is bound to a Set object that holds row numbers to update.
Let's see what changes are need in the managed bean.
First, we need to create the Set object to hold rows to update:
private Set <Integer>rowsToUpdate;
public Set <Integer>getRowsToUpdate() {
return rowsToUpdate;
}
Only a getter is needed for this property as this property will never be set from the page.
Next, we need the save() listener.
public void save (ActionEvent event) {
rowsToUpdate.clear();
rowsToUpdate.add(users.indexOf(selectedUser));
}
In the save listener, all we need is to save the row number of the user we are editing.
Finally, we need to initialize rowsToUpdate property inside the init() method, right after we create the users:
rowsToUpdate = new HashSet<Integer>();
The only other change we need is to add an a4j:keepAlive tag to the page. This is poor's man conversation scope (like in Seam). Basically, we need to keep the list of users alive for longer than a request and so a4j:keepAlive does just that. Right before the modal panel, add the following:
<a4j:keepAlive beanName="userBean"/>
Make sure everything is saved, redeploy, and run the application. You should now be able to open a modal panel, edit user information, and save the changes. When the changes are saved, only that particular row is updated.
Summary
I'm hoping this example showed you a little bit more than just Hello World. We have used a table component together with a modal panel. These are two components that very often used in real applications. I have also showed you how to edit a particular record inside a table via the modal panel and then only update that particular row. Of course, updating just a specific row is a feature of RichFaces data components.
To point out another thing, when we created an AJAX-based application here, we didn't have to deal with any JavaScript (well, besides the very simple client-side function available in RichFaces). RichFaces takes care of generating all the necessary (and usually quite complicated) JavaScript.
With RichFaces, you can continue using a JSF component-based approach, but with a large set of extra components to build applications with a rich user interface.
About the Author
Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past three years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of Practical RichFaces book (Apress). Max holds a BS in computer science from the University of California, Davis.
(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