JBoss RichFaces with Spring

page3.xhtml

<h:form xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">   
    <rich:panel>
        <h:panelGrid>
        <h:panelGrid columns="2">
            <h:outputLabel value="Category:" for="want" />
            <rich:inplaceSelect id="want" value="#{wizardBean.drinkCategorySelected}"
            valueChangeListener="#{wizardBean.changeDrink}">
                <f:selectItems value="#{wizardBean.drinkCategory}"/>
                <a4j:support event="onviewactivated" ajaxSingle="true" reRender="drink"/>
            </rich:inplaceSelect>
           
            <h:outputLabel value="Drink:" for="drink" />
            <rich:inplaceSelect id="drink" value="#{wizardBean.drink}" >
                <f:selectItems value="#{wizardBean.drinkList}"/>
            </rich:inplaceSelect>
           
        </h:panelGrid>
            <h:panelGroup>
                <a4j:commandButton value="Previous" action="prev" />
                <a4j:commandButton value="Next" action="next" />
            </h:panelGroup>
        </h:panelGrid>
    </rich:panel>
</h:form>

The third screen in the wizard uses two rich:inplaceSelect components. The first one allows you to select a drink category. Once a category is selected, drinks that belong to that category are loaded in the second select via AJAX. Value change listener wizardBean.changeDrink is called and loads the drinks associated with selected category. Using a4j:support tag we attached an onchange event to rich:inplaceSelect UI component to be fired when value changes. When the event is fired, an AJAX request is sent. ajaxSingle="true" means we only want to process that UI component on the server. Finally, reRender points to the second list we are rendering back now with a list of drinks.

page4.xhtml

<h:form xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">
    <rich:panel>
        <h:panelGrid>
            <h:outputLabel value="Anything else?" for="comments" />
            <rich:editor id="comments" autoResize="true"
                            value="#{wizardBean.comments}">
            </rich:editor>

            <h:panelGroup>
                <a4j:commandButton value="Previous" action="prev" />
                <a4j:commandButton value="Next" action="next" />
            </h:panelGroup>
        </h:panelGrid>
    </rich:panel>
</h:form>

This page uses one of the new UI components introduced in RichFaces 3.3.0 – a rich editor. rich:editor is based on tinyMCE widget. Rich:editor can be configured in many different ways, here we are using a very simple configuration. You can check out another example here.

summary.xhtml

<h:form xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">

    <rich:panel>
        <h:panelGrid columns="2">
            <f:facet name="header">Summary</f:facet>

            <h:outputText value="Name" />
            <h:outputText value="#{wizardBean.name}" />

            <h:outputText value="Email:" />
            <h:outputText value="#{wizardBean.email}" />

            <h:outputText value="Drink ordered:" />
            <h:outputText value="#{wizardBean.drink}" />

           
            <h:outputText value="Comments:" />
            <h:outputText value="#{wizardBean.comments}" escape="false"/>

        </h:panelGrid>
        <h:panelGrid columns="2">
            <a4j:commandButton value="Wait.. Go back" action="prev" />
            <a4j:commandButton value="Place Order"
                        action="#{wizardBean.save}"
                        oncomplete="#{rich:component('wizard')}.hide()"
                        reRender="orders, wizard"/>
        </h:panelGrid>
    </rich:panel>
</h:form>

The last page is just a summary page. If any corrections are needed, it's possible to click the back button. The Place Order button is bound to a save method and once the action is completed we close the modal panel and re render the table – to update the orders.

Creating Navigation

We won't be able to navigation inside the wizard without defining navigation rules. Navigation rules are defined in JSF configuration file and look like this:

<navigation-rule>
  <from-view-id>/page1.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/page2.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>
 <navigation-rule>
  <from-view-id>/page2.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/page3.xhtml</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-outcome>prev</from-outcome>
   <to-view-id>/page1.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>
 <navigation-rule>
  <from-view-id>/page3.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/page4.xhtml</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-outcome>prev</from-outcome>
   <to-view-id>/page2.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>
 <navigation-rule>
  <from-view-id>/summary.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>prev</from-outcome>
   <to-view-id>/page3.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>
 <navigation-rule>
  <from-view-id>/page4.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/summary.xhtml</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-outcome>prev</from-outcome>
   <to-view-id>/page3.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>

Attachment	Size
richfaces-spring-wizard.zip	11.15 MB

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

Comments

Aleksandar Vidakovic replied on Mon, 2009/02/16 - 6:04pm

Salut Max,

interesting article. I've been experimenting with Richfaces and Spring for a while and would be extremely interested in the SpringWebflow integration...

Cheers,

Aleks

Frederic Chopard replied on Tue, 2009/02/17 - 9:57am

Hello Max,

I'm trying to build my richbar application but when I click on the next button of the first wizard page, nothing happens. So I'd like to check your project but I can't find any link in your article. Where can I download your project files ?

Thanks !

Wis

Nitin Bharti replied on Tue, 2009/02/17 - 10:19am in response to: Frederic Chopard

Hi Wis,

I believe you can download the project template from here -- http://drop.io/usoalrd

I will add this to the main article as well. Sorry about that.

Thanks,

Nitin

Gene De Lisa replied on Wed, 2009/02/25 - 9:08am

"In the “real” world, you would probably use Maven 2, but, to keep things simple and concentrate on RichFaces and Spring, we are going to use a ready-made project."

maven projects are "ready-made" and they don't have the disadvantages of the approach you have taken.

Other than that this is nothing more a mediocre do this do that tutorial.

Omar Palomino S... replied on Sun, 2009/03/08 - 10:28pm in response to: Aleksandar Vidakovic

Hi Max and Aleksandar,

I'm also interesting in Spring Webflow integration [navigation rules are cumbersome :s]. I have a couple of implementations with both RichFaces, Spring and Jpa, and it's fun and easy to develop this way. Webflow would be a nice addition to this project acthitecture.

Tao Dong replied on Fri, 2009/03/13 - 2:34pm

Excellent Article. In case someone want to try it through Maven. Hope the following dependecy setting will save you some time.

        <dependency>
            <groupId>org.richfaces.ui</groupId>
            <artifactId>richfaces-ui</artifactId>
            <version>3.3.0.GA</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>org.richfaces.framework</groupId>
            <artifactId>richfaces-api</artifactId>
            <version>3.3.0.GA</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>org.richfaces.framework</groupId>
            <artifactId>richfaces-impl</artifactId>
            <version>3.3.0.GA</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>org.richfaces.samples</groupId>
            <artifactId>laguna</artifactId>
            <version>3.3.0.GA</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.8.0</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>commons-collections</groupId>
            <artifactId>commons-collections</artifactId>
            <version>3.2.1</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>commons-digester</groupId>
            <artifactId>commons-digester</artifactId>
            <version>2.0</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.1.1</version>
            <scope>compile</scope>
        </dependency>

<repository>
           <releases>
               <enabled>true</enabled>
          </releases>
          <snapshots>
               <enabled>false</enabled>
               <updatePolicy>never</updatePolicy>
          </snapshots>
          <id>repository.jboss.com</id>
          <name>Jboss Repository for Maven</name>
          <url>
               http://repository.jboss.com/maven2/
          </url>
          <layout>default</layout>
       </repository>

Max Katz replied on Mon, 2009/03/16 - 10:53am in response to: Tao Dong

Thanks taod!

ben salem replied on Tue, 2009/03/17 - 6:44pm

First, thanks for the great work :)

but

<cite> (Note - The Project Template for this article can be downloaded from http://drop.io/usoalrd) </cite>

what is the pass for download ?

thanks in advance!

Anderson Santos replied on Wed, 2009/03/18 - 9:28am

Hi Buddy,

This article is just great, I have been looking for a steb by step like this one, for at least a month.

I just couldn't download the template for this project, could you please send it by e-mail to me, that link where you say to click for download is broken and the one in the first page os this article, I just couldn't use...

thanks,

Anderson

ander.dev@gmail.com

Jean Chastain replied on Wed, 2009/03/18 - 4:27pm

I would like to download the code, too. I've done everything you said to do and can't get it to deploy to JBoss and was wondering if you had some configuration you didn't tell us about.

sam set replied on Sat, 2009/03/21 - 12:01pm in response to: Jean Chastain

hi, it's been quite some time i am trying to make richfaces 3.3 work with spring 2.0 webflow. Can somebody tell me how to download the source code. I visited http://drop.io/usoalrd, it's asking for password. What am i suppose to enter there ?

or, can you send me through email ?

Appreciate your help!

Aseem Monga replied on Tue, 2009/03/31 - 7:59am

A very good introduction. Can someone provide the password for downloading the project template?

Juan Gonzales replied on Wed, 2009/04/01 - 7:03pm

A very good ...could you please send it by e-mail to me password

thanks

juanjogoa24@gmail.com

Max Katz replied on Sat, 2009/04/11 - 11:47am

Link to download project template has been updated.

Davut Uysal replied on Fri, 2009/04/17 - 9:48am

Thanks Max. It was great article!

shantanu banerjee replied on Sat, 2009/04/25 - 1:36am

Hi Max, I am going through your article as we speak. You writing is always so to-the-point. I like it very much. However the zip file is not working. Can you check if you get the opportunity? Shantanu

Donovan Makund replied on Sun, 2009/04/26 - 3:11pm in response to: Max Katz

The zip file cannot be extracted once downloaded.

shantanu banerjee replied on Thu, 2009/04/30 - 1:57am

As Donovan has pointed out, the zip file can not be extracted once downloaded. Can anyone please send the proper template zip to shanroam@yahoo.com. I would be immensely greatful.

Max Katz replied on Tue, 2009/05/05 - 1:45pm

Let's try this file. Here is what you need to do:

Download the template.

In Eclipse:

Select File/Import/General/Existing Project into Workspase
Click Next
Check 'Select arhcive file' option and browse to downloaded file
Follow the wizards steps

shantanu banerjee replied on Thu, 2009/05/07 - 8:08am

I somehow cannot download the file from the link that Max provided in the last post. Any help would be greatly appreciated.

Max Katz replied on Tue, 2009/05/19 - 6:05pm in response to: shantanu banerjee

I'm not sure why the link is not working. Try this one: http://www.filedropper.com/richfaces-spring

Donovan Makund replied on Sat, 2009/06/06 - 11:48am

Hello Max, I was able to implement a prototype using Richfaces 3.3.1, Spring 2.5.5, JSF 1.2 with Spring managing all the beans. I am now trying to add Facelets 1.1.14 into the mix for template features. Have you tried this combination before?

Max Katz replied on Fri, 2009/06/12 - 11:18am in response to: Donovan Makund

If you look in my template, I used Facelets. So yes, you can (and should) use Facelets.

Mohsin Khan replied on Tue, 2009/06/16 - 2:30pm

Hi i am not able to run the application.Getting following exception javax.faces.FacesException: UIInclude component j_id10 could't include page with path at org.ajax4jsf.taglib.html.facelets.IncludeHandler.applyNextHandler(IncludeHandler.java:83) at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:169) at com.sun.facelets.tag.jsf.ComponentHandler.applyNextHandler(ComponentHandler.java:314) at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:169) at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47) at com.sun.facelets.tag.jsf.ComponentHandler.applyNextHandler(ComponentHandler.java Please help me Mohsin

Martin Haas replied on Mon, 2009/06/22 - 5:50am

None of the links above is working. Another source where I can download the project? The linked project is corrupt and all other links in the comments are broken.

Max Katz replied on Mon, 2009/06/22 - 3:26pm in response to: Mohsin Khan

Is this the full stack trace?

Max Katz replied on Mon, 2009/06/22 - 3:29pm in response to: Martin Haas

Let's try one more time: http://drop.io/pnbhzls

stu bilton replied on Thu, 2009/07/16 - 10:26am

Hi Max,

Firstly thanks for this article it's good to have a straigthforward example of using these frameworks together.

I do have a problem running this on a was 6.1 instance. (However I don't think this is the issue here). I've placed the code into an existing webb app project to prove the spring framework can run in an existing richfaces / facelets implementation

My stack trace on requesting http://localhost:9080/MyProjectName/start.jsf is as follows

java.io.NotSerializableException: bar.service.OrderService
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1113)
	at java.io.ObjectOutputStream.defaultWriteFields(ObjectOutputStream.java:1467)
	at java.io.ObjectOutputStream.writeSerialData(ObjectOutputStream.java:1439)
	at java.io.ObjectOutputStream.writeOrdinaryObject(ObjectOutputStream.java:1382)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1111)
	at java.io.ObjectOutputStream.writeObject(ObjectOutputStream.java:325)
	at java.util.HashMap.writeObject(HashMap.java:1290)
	at sun.reflect.GeneratedMethodAccessor13.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:618)
	at java.io.ObjectStreamClass.invokeWriteObject(ObjectStreamClass.java:973)
	at java.io.ObjectOutputStream.writeSerialData(ObjectOutputStream.java:1431)
	at java.io.ObjectOutputStream.writeOrdinaryObject(ObjectOutputStream.java:1382)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1111)
	at java.io.ObjectOutputStream.writeArray(ObjectOutputStream.java:1343)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1107)
	at java.io.ObjectOutputStream.writeArray(ObjectOutputStream.java:1343)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1107)
	at java.io.ObjectOutputStream.writeArray(ObjectOutputStream.java:1343)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1107)
	at java.io.ObjectOutputStream.writeArray(ObjectOutputStream.java:1343)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1107)
	at java.io.ObjectOutputStream.writeArray(ObjectOutputStream.java:1343)
	at java.io.ObjectOutputStream.writeObject0(ObjectOutputStream.java:1107)
	at java.io.ObjectOutputStream.writeObject(ObjectOutputStream.java:325)
	at com.sun.faces.renderkit.ResponseStateManagerImpl.writeState(ResponseStateManagerImpl.java:269)
	at javax.faces.render.ResponseStateManager.writeState(ResponseStateManager.java:166)
	at org.ajax4jsf.application.AjaxStateManager.writeState(AjaxStateManager.java:294)
	at org.ajax4jsf.application.AjaxStateManager.writeState(AjaxStateManager.java:256)
	at com.sun.facelets.FaceletViewHandler.renderView(FaceletViewHandler.java:606)
	at org.ajax4jsf.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:100)
	at org.ajax4jsf.application.AjaxViewHandler.renderView(AjaxViewHandler.java:176)
	at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:110)
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
	at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:266)
	at com.ibm.ws.webcontainer.servlet.ServletWrapper.service(ServletWrapper.java:1103)
	at com.ibm.ws.webcontainer.servlet.ServletWrapper.service(ServletWrapper.java:1038)
	at com.ibm.ws.webcontainer.filter.WebAppFilterChain.doFilter(WebAppFilterChain.java:145)
	at org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:178)
	at org.ajax4jsf.webapp.BaseFilter.handleRequest(BaseFilter.java:290)
	at org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(BaseFilter.java:390)
	at org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:517)
	at com.ibm.ws.webcontainer.filter.FilterInstanceWrapper.doFilter(FilterInstanceWrapper.java:190)
	at com.ibm.ws.webcontainer.filter.WebAppFilterChain.doFilter(WebAppFilterChain.java:130)
	at com.ibm.ws.webcontainer.filter.WebAppFilterChain._doFilter(WebAppFilterChain.java:87)
	at com.ibm.ws.webcontainer.filter.WebAppFilterManager.doFilter(WebAppFilterManager.java:834)
	at com.ibm.ws.webcontainer.filter.WebAppFilterManager.doFilter(WebAppFilterManager.java:682)
	at com.ibm.ws.webcontainer.servlet.ServletWrapper.handleRequest(ServletWrapper.java:566)
	at com.ibm.ws.wswebcontainer.servlet.ServletWrapper.handleRequest(ServletWrapper.java:486)
	at com.ibm.ws.webcontainer.webapp.WebApp.handleRequest(WebApp.java:3440)
	at com.ibm.ws.webcontainer.webapp.WebGroup.handleRequest(WebGroup.java:267)
	at com.ibm.ws.webcontainer.WebContainer.handleRequest(WebContainer.java:815)
	at com.ibm.ws.wswebcontainer.WebContainer.handleRequest(WebContainer.java:1461)
	at com.ibm.ws.webcontainer.channel.WCChannelLink.ready(WCChannelLink.java:118)
	at com.ibm.ws.http.channel.inbound.impl.HttpInboundLink.handleDiscrimination(HttpInboundLink.java:458)
	at com.ibm.ws.http.channel.inbound.impl.HttpInboundLink.handleNewInformation(HttpInboundLink.java:387)
	at com.ibm.ws.http.channel.inbound.impl.HttpInboundLink.ready(HttpInboundLink.java:267)
	at com.ibm.ws.tcp.channel.impl.NewConnectionInitialReadCallback.sendToDiscriminators(NewConnectionInitialReadCallback.java:214)
	at com.ibm.ws.tcp.channel.impl.NewConnectionInitialReadCallback.complete(NewConnectionInitialReadCallback.java:113)
	at com.ibm.ws.tcp.channel.impl.AioReadCompletionListener.futureCompleted(AioReadCompletionListener.java:165)
	at com.ibm.io.async.AbstractAsyncFuture.invokeCallback(AbstractAsyncFuture.java:217)
	at com.ibm.io.async.AsyncChannelFuture.fireCompletionActions(AsyncChannelFuture.java:161)
	at com.ibm.io.async.AsyncFuture.completed(AsyncFuture.java:136)
	at com.ibm.io.async.ResultHandler.complete(ResultHandler.java:195)
	at com.ibm.io.async.ResultHandler.runEventProcessingLoop(ResultHandler.java:743)
	at com.ibm.io.async.ResultHandler$2.run(ResultHandler.java:873)
	at com.ibm.ws.util.ThreadPool$Worker.run(ThreadPool.java:1473)

Do you have any idea why I'm getting a NotSerializeableException thrown when trying to instantiate this bean? (presumeably through Spring DI ?(I'm a newbie when it comes to jsf and spring))

Thanks

Stuart

Max Katz replied on Thu, 2009/07/16 - 10:47am

Not sure why you get this exception, the server is trying to save/restore the class from somewhere. Try adding implements java.io.Serializable to the class.

stu bilton replied on Thu, 2009/07/16 - 11:00am in response to: Max Katz

Thanks Max.

I thought that might (and did) do the trick. As a newbie just wondered if the stack trace might shed any light on why the exception was throwing.

Keep the articles coming . Thanks again