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 82 posts at DZone. You can read more from them at their website. View Full User Profile

JBoss RichFaces with Spring

02.16.2009
| 187425 views |
  • submit to reddit
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>

AttachmentSize
richfaces-spring-wizard.zip11.15 MB
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

Gene De Lisa replied on Fri, 2009/07/31 - 9:45am

What exactly are you thinking by posting an 11 MB zip file that contains nothing but library jar files? Are you getting some perverse pleasure by wasting other people's time and bandwidth? Do you know the meaning of the word courtesy? Apparently not.

If you don't want to post your code don't post a zip. It's as simple as that.

Kushan Jayathilake replied on Fri, 2009/10/30 - 7:56am

Hi Max, Great work!..

i have a problem, i have added the validation conditions in managed bean of the JSF page

ie :

@NotEmpty(message = "Country Name must not be empty.")

@Pattern(regex = ".*[^\\s].*", message = "Spaces are not allowed.")

private String countryName;

 

i have several  <a4j:commandButton> and <a4j:commandLink> in the same page, validation fires each and every time i press a commandLink or Button,   iif that field is empty("countryName" as i specified here)

how can i control the validation to fire for the particular button or a link...?  (i need validation to be fired when only i clicked the save button)

please help me on this...

Max Katz replied on Thu, 2009/11/05 - 8:10pm in response to: Kushan Jayathilake

This article should help: http://java.dzone.com/news/richfaces-region-partial-jsf

Kushan Jayathilake replied on Fri, 2009/11/06 - 6:45am

Thx Max, It helped me to solve my problem,

I have another question,

I want to generate dynamic checkboxes depends on a collection, so i have written

<h:dataTable id="functionsGrid" value="# {functionManagedBean.collecOfFunctions}"                                                            var="function"  >
                                                                                   
<h:column>
      <h:selectBooleanCheckbox id="#{function.functionName}" value="#{functionManagedBean.checked}"/>
 
    <h:outputLabel for="" value="outputLabel"></h:outputLabel>

</h:column>                            
                                                                                   
</h:dataTable>



and finally this form contains an <a4j:commandButton> , in the managedBean side i want to get the selected checkboxes....(problem is checkboxes are generating dyamically, so how can assign their values for the different properties in the managedBean..

Thank you very much in advance.. :)

Tee Siong replied on Wed, 2010/04/07 - 5:40am

I have problem where the Next button could't go to next page . I am not using Facelets .But i use jsf . I have configure my faces-config.xml file properly .What is the possible root cause ? Can you share your working example ? email to me . monsiong@yahoo.com . Thanks

Thomas Strecker replied on Thu, 2010/05/27 - 3:36am in response to: Mohsin Khan

I encountered the same problem, but only after switching to Spring Annotations and Component Scan. The reason is rather simple: the WizardBean now no longer receives the value for the startPage (which was set to "/page1.xhtml" in the spring application context before) and now the renderer ends up in a endless loop.

So if you want to use the annotation based version, manually set the parameter in the bean.

Mohammad Shariq replied on Tue, 2010/06/15 - 2:50pm

Please email me the correct file. I am not able to open or download the source code. The one file from which I downloaded contained only jars and no significant java files or any other code. PLease email me as early as possible at 2008Shariq@gmail.com

Mehdi Ben Haj Abbes replied on Mon, 2010/07/19 - 2:18am in response to: stu bilton

Hi, For the NotSerializableException, I tried to implement Serializable but didn’t work and I had a Spring Exception : my backing bean has a bean injected through spring. The solution was to look for the bean through getBean(“beanName”) rather than injecting it.

Fabio Malheiro replied on Tue, 2010/09/28 - 8:26am

This was supposed to be a good tutorial right?

I was trying to implement your example... but I'm a little bit confused. Sometimes you "talk" about a bean orderService, and Service ... but where the fuck is the Service class?

Andres Botero replied on Wed, 2010/11/17 - 12:02pm

When i inyect a dependency into a bean it's null. For Example:

<bean id="wizardBean" class="bar.view.WizardBean" scope="request">
   <property name="orderService" >
    <ref bean="service" />
   </property>
</bean>

In that case the orderService is null, colud you tell me why is that?

A S M Russel replied on Fri, 2011/09/30 - 1:10am

After Migrating from XML configuration to Annotation based configurated i am getting the following error.

at com.sun.facelets.el.VariableMapperWrapper.resolveVariable(VariableMapperWrapper.java:60)

the error trace is too long thats why i am pasting it here.

I create the spring3 template project with STS and follow your instruction.

Its working well for xml configuration.But getting error when i am going to annotation based configuration 

Scott Duke replied on Tue, 2011/10/25 - 10:46pm

I came across this example and ran across a few problems and wanted to post the solutions once the project is imported. The project is using Tomcat 6.0 but I was using Tomcat 7.0. There were about 3 places in the project preferences I had to change from Tomcat 6.0 to Tomcat 7.0. Here were 3 of the places. Just look through the preferences. 1. preferences -> Java -> Compiler 2. preferences -> Server -> Runtime Environment 3. preferences -> Java Build Path Because I was using jdk 1.7.0, I had to update the facets on the project at: preferences -> Project Facets and change the Java to 1.7

Max Katz replied on Thu, 2011/10/27 - 4:48pm in response to: Scott Duke

Thanks for posting.

Nagy Andika replied on Fri, 2011/11/04 - 5:13am

Hi! Nice article. This is what I'm looking for but in an upgraded version. I wonder if you tried it with RichFaces4 and Spring3.0. Would it be as seamless as here? Andika

Comment viewing options

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