JBoss Development is brought to you in partnership with:

Max Katz heads Developer Relations for Appery.io, 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: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 84 posts at DZone. You can read more from them at their website. View Full User Profile

An Introduction To JBoss RichFaces

08.25.2008
| 430120 views |
  • 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.

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:

Legacy
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.)

Comments

Brian ray 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.

Max Katz 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? 

 Need that to try to make out the details that the writer elected to omit.

 Please tell me what details are missing. 

 Dont show me images that are not accurate

 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. 

Brian ray replied on Tue, 2008/08/26 - 4:53pm in response to: Brian ray

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.

 

Max Katz replied on Tue, 2008/08/26 - 5:38pm in response to: Brian ray

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. 

Brian ray replied on Wed, 2008/08/27 - 9:13am in response to: Max Katz

Went to the other blog and still cant get a valid zip. I have never had this problem before inside winzip it gives this message upon failure "

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.

Max Katz replied on Wed, 2008/08/27 - 3:48pm in response to: Brian ray

Let me know if that worked. If you are still not able to unzip, send me an email and we will get you the file some other way. My email is my name @exadel.com .

Gary Marsh 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.

  1. ...
  2. ...
  3. Select Managed Beans and click Add...
    - 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

java.lang.NullPointerException
	example.beans.UserBean.save(UserBean.java:34)
	sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	java.lang.reflect.Method.invoke(Unknown Source)
	org.apache.el.parser.AstValue.invoke(AstValue.java:172)
	org.apache.el.MethodExpressionImpl.invoke(MethodExpressionImpl.java:276)
	com.sun.facelets.el.TagMethodExpression.invoke(TagMethodExpression.java:68)
	com.sun.facelets.el.LegacyMethodBinding.invoke(LegacyMethodBinding.java:69)
	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)
 

 

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?

 

Max Katz replied on Mon, 2008/09/01 - 12:22pm in response to: Angelo Quaglia

[quote=aquaglia]

Small typo on page 3:

To make this bean a managed bean, we need to register it in a JSF configuration file.

  1. ...
  2. ...
  3. Select Managed Beans and click Add...
    - 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. 

Max Katz replied on Mon, 2008/09/01 - 12:25pm in response to: Angelo Quaglia

Thanks.. you are correct. That line is missing.

Brian ray 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

John Smith 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.

Max Katz 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. 

 

Laurent Lasalle replied on Tue, 2008/09/30 - 11:41am in response to: Max Katz

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 

Laurent Lasalle replied on Tue, 2008/09/30 - 11:56am in response to: Laurent Lasalle

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 

Max Katz replied on Tue, 2008/09/30 - 12:01pm

I was just about to post, but you beat me to it :). Yes, just use the template in this article for now. The publisher hasn't posted the template or the source code. It will, I just don't know when yet.

Laurent Lasalle replied on Wed, 2008/10/01 - 5:33am in response to: Max Katz

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.

Max Katz replied on Wed, 2008/10/01 - 7:01am

This should help: http://mkblog.exadel.com/?p=126 .

Frank Brown replied on Thu, 2008/10/16 - 2:21pm

Hi Max. Thanks for the informative article. I want to use Eclipse 3.4.1 (Ganymede) as my version of Eclipse. From what I can see on the JBoss community, this should work fine. I have followed along with your instructions, and everything seems to install fine. I can see 3 JBoss entries installed into the Eclipse plugins list. When I do the File-New-JSF Project, and select the JSF Environment, I do not see Richfaces as an option to be chosen, I have only these ( JSF 1.1.02 - Reference Implementation, JSF 1.2, JSF 1,2 with facelets, and Myfaces 1.1.4).
Any thoughts on this?
Thanks
Frank

Max Katz replied on Fri, 2008/10/17 - 8:51am

When I do the File-New-JSF Project, and select the JSF Environment, I do not see Richfaces as an option to be chosen, I have only these ( JSF 1.1.02 - Reference Implementation, JSF 1.2, JSF 1,2 with facelets, and Myfaces 1.1.4).

 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: Max Katz

Sorry, I mean, I am experiencing the following problem :
Unability to select-click on a row of an orderinglist inside a modalPanel.

Max Katz 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

Christian Lehmann 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>

 

 

Max Katz 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>

 

Christian Lehmann replied on Mon, 2008/10/27 - 12:27pm in response to: Max Katz

[quote=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".

 

Comment viewing options

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