Welcome!

Java Authors: Tad Anderson, Yakov Fain, Pat Romanski, Colin Walker, Hovhannes Avoyan

Related Topics: Java

Java: Blog Feed Post

RichFaces – Wizard Inside Modal Panel

5-Minute Guide
By Max Katz
Article Rating:
June 10, 2010 07:34 PM EDT
Reads:
 5,775

This is a 5-minute guide to creating a wizard inside a modal panel. We are going to use a4j:include together with rich:modalPanel.

Start page (start.xhtml):

<h:form>
<a4j:commandLink oncomplete="#{rich:component('panel')}.show();"
	 value="Open"
	 reRender="panel"/>
</h:form>
 
<h:panelGrid id="result">
   <h:outputText value="#{bean.color}" />
   <h:outputText value="#{bean.number}" style="COLOR: #{bean.color}"/>
</h:panelGrid>
 
<rich:modalPanel id="panel">
   <f:facet name="header">Wizard</f:facet>
   <f:facet name="controls">
	<a href="#" onclick="#{rich:component('panel')}.hide();">Close</a>
   </f:facet>
   <h:form id="form">
	<h:panelGrid>
		<a4j:include viewId="#{bean.view}" />
	</h:panelGrid>
   </h:form>
</rich:modalPanel>

First wizard page (/wizard/page1.xhtml):

<h:panelGrid xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:a4j="http://richfaces.org/a4j"
     xmlns:rich="http://richfaces.org/rich"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets">
 
   <h:selectOneRadio value="#{bean.color}" >
	<f:selectItem itemLabel="Red" itemValue="Red"/>
	<f:selectItem itemLabel="Green" itemValue="Green"/>
	<f:selectItem itemLabel="Orange" itemValue="Orange"/>
   </h:selectOneRadio>
   <a4j:commandLink value="Next page" action="next"/>
</h:panelGrid>

Second wizard page (/wizard/page2.xhtml):

<h:panelGrid xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 
   <rich:inputNumberSlider value="#{bean.number}"
	 minValue="0" maxValue="100"
	 enableManualInput="false"/>
   <a4j:commandLink value="Close and Save" 
	onclick="#{rich:component('panel')}.hide();"
	action="#{bean.reset}"
	reRender="result"/>
</h:panelGrid>

JSF configuration file:

<managed-bean>
  <managed-bean-name>bean</managed-bean-name>
  <managed-bean-class>test.Bean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
 </managed-bean>
 <navigation-rule>
  <from-view-id>/wizard/page1.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/wizard/page2.xhtml</to-view-id>
  </navigation-case>
</navigation-rule>

Managed bean:

@KeepAlive
public class Bean {
   private String view = "/wizard/page1.xhtml";
   private Integer number;
   private String color;
 
   // getters and setters for each property
 
   public void reset (){
	this.view = "/wizard/page1.xhtml";
   }
}

First page inside modal panel:

Second page inside modal panel:

Result (after closing the modal panel):

Read the original blog entry...

Published June 10, 2010 – Reads 5,775
Copyright © 2010 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By Max Katz

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 four 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.