An Introduction To JBoss RichFaces
Recommended Links
JBoss RichFaces
RedHat
JBoss.org
Enter the JBoss Matrix
Blog: In Relation To...
This section sponsored by:
One thing you probably noticed is that you have a blue color schema while my screen shots have red color schema. I'm using a different skin. If you would like to change the skin, that's very easy to do. Open WEB-INF/web.xml file and change the skin parameter to ruby:
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>ruby</param-value>
</context-param>
Save and restart the server.
One thing that's still different is the font size. If you also want to change that, check out this blog entry.
Adding a modal panel
We will first create the modal panel. The modal panel has to be placed outside the original form, because it must have its own form:
<rich:modalPanel id="useredit">
<f:facet name="header">
User
</f:facet>
<h:form>
<h:panelGrid id="userinfo">
<h:outputLabel for="nameInput" value="Name:"/>
<h:inputText id="nameInput" value="#{userBean.selectedUser.name}"/>
<h:outputLabel for="emailInput" value="Email:"/>
<h:inputText id="emailInput" value="#{userBean.selectedUser.email}"/>
<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>
</h:panelGrid>
</h:panelGrid>
</h:form>
</rich:modalPanel>
The code is rather simple, I will talk about the Close and Save links shortly.
Next, we need to open the popup. To do that, we are going to add another column to the table. The column will contain a button to open the popup. We will make this column first. The coding looks like this:
...
<h:column>
<a4j:commandButton value="Edit"
oncomplete="#{rich:component('useredit')}.show()"
reRender="userinfo">
<f:setPropertyActionListener value="#{user}"
target="#{userBean.selectedUser}" />
</a4j:commandButton>
</h:column>
...
For both showing and hiding the modal panel, we use the RichFaces client-side function called #{rich:component('id')} to get a reference to the component (in our case, it’s the modal panel). Once we have a reference, we call the JavaScript API on that component. In our case, it is show() to open and hide() to close the modal panel. Later, we will be calling a save method when the Save button is clicked in the modal panel.
How do we know which row was selected which corresponds to the user we would like to edit. To accomplish that we use a standard JSF tag called f:setPropertyActionListener. It's basically a listener that will take the object in the current row and assign it to userBean.selectedUser property inside the managed bean. We don't yet have this property, so let's add it.
private User selectedUser;
public User getSelectedUser() {
return selectedUser;
}
public void setSelectedUser(User selectedUser) {
this.selectedUser = selectedUser;
}
Before we test this, there is one more thing to mention. Notice that the Edit button’s definition has a reRender attribute set to "userinfo". This is needed in order to rerender the selected user information. We first pass the selected user to the server. When the page is rendered back to the browser, we would like to rerender that property (userSelected) in order to display the selected user.
Go ahead and run the application as we did before. Before you run, make sure everything is saved and all the changes have been deployed. Your page should look like this:
We are now able to click on a particular row and display the user information in the modal panel. What we ultimately want to do is be able to edit user information, but only update the particular row for that user, instead of updating the whole table.
- Login or register to post comments
- 166692 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
billzbub replied on Tue, 2008/08/26 - 2:22pm
Cant Download richfaces-template.zip invalid file.
Need that to try to make out the details that the writer elected to omit. Dont show me images that are not accurate. Dont make me down load plug ins that may or may-nit work as described.
maxkatz replied on Tue, 2008/08/26 - 3:33pm
I just clicked on the template file and was able to download. What kind of message are you getting?
Please tell me what details are missing.
Please provide more details. If you are talking about the colors, I will update the article so you can try the same skin I'm using. Sorry about that.
billzbub replied on Tue, 2008/08/26 - 4:53pm
in response to: billzbub
Once I get the file, Upon trying to unzip it I recieve "Cannot open file: it does not appear to be a valid archive. If you downloaded this file, try downloading the file again." I have tried to get it several times.
The image problem was on page 4 where it showed the table with the "edit" buttons already there. It appears to have been corrected or I was looking at the wrong image. While going through this I was trying to figure out how those buttons got there. But then on the next page it explained how to add them into their own col.
The part I mentioned about down loading was because I had no way to look at your "faces-config.xml" cause you let the plug-in build it for you. This is also the part where I considered it an ommison to not show me your config file. Colors are pretty self explanitory with the skins that wasn't a problem.
maxkatz replied on Tue, 2008/08/26 - 5:38pm
in response to: billzbub
I don't know why you get that error message. Slightly different setup steps, but you can try using a template in this posting: http://mkblog.exadel.com/?p=119
I submitted all other changes (image, managed bean configuration, skin setup). The changes should be up shortly.
billzbub replied on Wed, 2008/08/27 - 9:13am
in response to: maxkatz
End-of-central-directory signature not found. Either this file is not a Zip file, or it constitutes one disk of a multi-part Zip file.
"
I will try again from a different machine to see if it is just black magik that thwarts my efforts.
maxkatz replied on Wed, 2008/08/27 - 3:48pm
in response to: billzbub
glmarsh replied on Fri, 2008/08/29 - 4:15pm
Hi;
I also tried to download and unzip your articles richfaces-template.zip file and was unable to open it. It turns out to the content is binary an un-decipherable. Your alternate zip file is good.
Regards,
glmarsh
Angelo Quaglia replied on Sat, 2008/08/30 - 5:04am
Small typo on page 3:
To make this bean a managed bean, we need to register it in a JSF configuration file.
- Keep the scope request
- For Class, enter the bean’s full Java class name, sample.beans.UserBean -> example.beans.UserBean
Angelo Quaglia replied on Sat, 2008/08/30 - 12:41pm
When clicking on Save I get:
Apache Tomcat/6.0.18 - Error report
HTTP Status 500 -type Exception report
message
description The server encountered an internal error () that prevented it from fulfilling this request.
exception
javax.servlet.ServletException: /user.xhtml @69,30 actionListener="#{userBean.save}": java.lang.NullPointerException javax.faces.webapp.FacesServlet.service(FacesServlet.java:277) org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:147) org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:276) org.ajax4jsf.Filter.doFilter(Filter.java:175)root cause
javax.faces.el.EvaluationException: /user.xhtml @69,30 actionListener="#{userBean.save}": java.lang.NullPointerException com.sun.facelets.el.LegacyMethodBinding.invoke(LegacyMethodBinding.java:73) javax.faces.component.UICommand.broadcast(UICommand.java:380) org.ajax4jsf.component.AjaxActionComponent.broadcast(AjaxActionComponent.java:55) org.ajax4jsf.component.AjaxViewRoot.processEvents(AjaxViewRoot.java:316) org.ajax4jsf.component.AjaxViewRoot.broadcastEvents(AjaxViewRoot.java:291) org.ajax4jsf.component.AjaxViewRoot.processPhase(AjaxViewRoot.java:248) org.ajax4jsf.component.AjaxViewRoot.processApplication(AjaxViewRoot.java:461) com.sun.faces.lifecycle.InvokeApplicationPhase.execute(InvokeApplicationPhase.java:82) com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100) com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118) javax.faces.webapp.FacesServlet.service(FacesServlet.java:265) org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:147) org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:276) org.ajax4jsf.Filter.doFilter(Filter.java:175)root cause
Angelo Quaglia replied on Sat, 2008/08/30 - 12:43pm
I had to initialize rowsToUpdate in the init() method to make it work.
@PostConstruct
public void init () {
users = new ArrayList <User>();
users.add (new User("Joe", "joe@gmail.com"));
users.add (new User("Charley", "charley@ymail.com"));
users.add (new User("John", "john@hotmail.com"));
users.add (new User("Greg", "greg@gmail.com"));
users.add (new User("Prescila", "prescila@aol.com"));
rowsToUpdate = new HashSet();
}
Did I make some mistake in the markup of the page?
maxkatz replied on Mon, 2008/09/01 - 12:22pm
in response to: aquaglia
Small typo on page 3:
To make this bean a managed bean, we need to register it in a JSF configuration file.
- Keep the scope request
- For Class, enter the bean’s full Java class name, sample.beans.UserBean -> example.beans.UserBean
[/quote]
Thanks, I'll update the code.
maxkatz replied on Mon, 2008/09/01 - 12:25pm
in response to: aquaglia
billzbub replied on Fri, 2008/09/12 - 9:15am
Max,
I forgot to mention earlier. Thanks for putting up the tutorial. It's easy for me to complain about the things that are wrong. But in doing so I must also show appreceation for your efforts. So Thanks!!
Angelo Quaglia replied on Fri, 2008/09/12 - 10:48am
Oh, yes! I agree.
Many thanks for this interesting and to-the-point tutorial.
alan.kubrick replied on Sat, 2008/09/20 - 12:22am
hi Max,
I bought the pdf version of your book "Practical Richfaces", before seing this example. I found it cause I was looking for a zip file mentioned in the book : rcbook-templates.zip ; after having been told by apress that the file is not available on their site, thank to google, I found it here.
This tutorial is very clear and helpful and I am using it as a start to do examples in the book. I am unable to make the the example about the worldwonders work: no way of seeing the dataOrderedList update after a change of the order of two element in the orderingList, and a submit. Is there anything missing in the submit button?
Is there any place where I can download the source code associated with the book? It would be great if it is a war file, with all examples mentioned in the book. Thanks
thetikigod replied on Thu, 2008/09/25 - 1:22pm
I followed these steps exactly, with the exception of using jboss-portal bundle 2.6.6. However, when I deploy the application I get an exception:
13:52:02,584 ERROR [[/example]] Exception sending context initialized event to listener instance of class org.jboss.web.jsf.integration.config.JBossJSFConfigureListener
java.lang.ClassCastException: com.sun.faces.config.WebConfiguration
at com.sun.faces.config.WebConfiguration.getInstance(WebConfiguration.java:154)
at com.sun.faces.config.ConfigureListener.contextInitialized(ConfigureListener.java:144)
I have tried reinstalling everything, an making sure I have the libs, and a few config options, but no luck.
Any ideas?
Thanks.
maxkatz replied on Thu, 2008/09/25 - 7:59pm
JBoss AS already ships with JSF runtime, at the same time, my template also has JSF runtime as I was running the application in Tomcat. The exception indicates a classloading conflict with existing libraries.
There is a detailed article on using RichFaces in a portal:
http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-1
http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-2
http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-3
Hope this helps.
Laurent4x replied on Tue, 2008/09/30 - 11:41am
in response to: maxkatz
Hi ! don't see the answer for the same question :
I bought your book's in the ebook preview format.
Where to find the rcbook-templates.zip ?? (and others stuff you have around that book ?!)
Thanks
Laurent4x replied on Tue, 2008/09/30 - 11:56am
in response to: Laurent4x
Sorry for not reading and looking more closely before posting here : I think we can just use this richfaces-template.zip as a remplacement for the infamous rcbook-templates.zip.
Well thanks Max and when you will got some time do put all things regarding this book on a repository somewhere so book readers will know where to search looking !
Cheers
maxkatz replied on Tue, 2008/09/30 - 12:01pm
Laurent4x replied on Wed, 2008/10/01 - 5:33am
in response to: maxkatz
max just one question please :
Do you got something introducing how to generate and use components from a java source code.
I see much Richfaces component got some Java manipulation section but no clue on how to use that ?
I've been looking around and nothing clear was found.
Do you got some tips or useful links ? Why I'm looking for this is for case where part of the UI will be mostly driven by what is stored in the database.
depending on this and this and that build me my UI like this.
Not always easily done because you don't have the infos before you must do it on runtime !!
In that case knowing how to build richfaces component from a java class will be pretty nice.
Thanks in advance if you got some hints.
maxkatz replied on Wed, 2008/10/01 - 7:01am
frankjbrown replied on Thu, 2008/10/16 - 2:21pm
Any thoughts on this?
Thanks
Frank
maxkatz replied on Fri, 2008/10/17 - 8:51am
Did you add the RichFaces template to JBoss Tools? If not, the steps are under Project Templates section.
alan.kubrick replied on Tue, 2008/10/21 - 9:35am
Hi Max,
I am experiencing the same problem :
Environment :
- richfaces 3.2.2
- facelets
- Mojara JSF (Sun RI)
Context :
- an orderinglist in a modal panel
- a4j:commandButton, oncomplete of which the modal panel is opened
As a result :
- the modalpanel is opened and the orderinglist displayed inside it
- BUT I am unable to select a row of the list by mouseClicking on it (there is no javascript error)
- even though using the keyboard to navigate from one row to another works well.
- when I close the modalPanel, and click on the same a4j:commandButton the SECOND TIME, everything work fine:
I can select a row by mouseclick as it should.
Observations :
- when I replace the modalPanel by simple richpanel, no such behaviour happens
- No javascript error is showned
- this behaviour is the same for internet explorer or firefox.
Any idea? Is there a way of, say, "activating" an orderingList?
Thanks a lot
alan.kubrick replied on Tue, 2008/10/21 - 9:38am
in response to: maxkatz
Sorry, I mean, I am experiencing the following problem :
Unability to select-click on a row of an orderinglist inside a modalPanel.
maxkatz replied on Tue, 2008/10/21 - 10:35am
Hi Alan,
I need to look at the source code (JSF page, bean) as this is outside the scope of the article. It's very difficult to say what could be the problem. Send me an email, I willl take a look at it.
Max
chrix64 replied on Sun, 2008/10/26 - 11:06am
Hello,
I used your example with success thanks. I was disapointed though, when I tried to use it with additionnal richfaces features like sortable columns.
When I modified the userlist datatable with rich:column instead of h:column, I could no get the table to be re-rendered after a modal dialog save. How could I achieve this obvious result ?
<rich:column sortBy="#{user.name}" sortOrder="ASCENDING"><f:facet name="header">
<h:outputText value="User Name"/>
</f:facet>
<h:outputText id="name" value="#{user.name}"/>
</rich:column>
<rich:column sortBy="#{user.email}">
<f:facet name="header">
<h:outputText value="User Email"/>
</f:facet>
<h:outputText id="email" value="#{user.email}" />
</rich:column>
maxkatz replied on Mon, 2008/10/27 - 10:12am
Try this:
<rich:column sortBy="#{user.name}" sortBy="#{user.name}">
<f:facet name="header">
<h:outputText value="User Name"/>
</f:facet>
<h:outputText id="name" value="#{user.name}"/>
</rich:column>
chrix64 replied on Mon, 2008/10/27 - 12:27pm
in response to: maxkatz
<rich:column sortBy="#{user.name}" sortBy="#{user.name}">
[/quote]
Thanks for your answer, but there is probably a mistake in the above line as the attribute "sortBy" is already specified for element "rich:column".