RichFaces – wizard inside modal panel

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):






   
   



   Wizard
   
	Close
   
   
	
		
	
   

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



   
	
	
	
   
   

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



   
   

JSF configuration file:


  bean
  test.Bean
  request
 
 
  /wizard/page1.xhtml
  
   next
   /wizard/page2.xhtml
  

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):

15 thoughts on “RichFaces – wizard inside modal panel

  1. Hi Max, thanks for your modal panel tutorial it was really helpful. I was wondering if you have experience the problem I have with richface 3.1.5 JSF 1.1_1

    my cause my web page to hang. The status bar at the bottom of the browser just says waiting for http://localhost:8080/ and my page is already rendered with no exception thrown and no error log. This only happens in IE not FireFox. When this happens, my a4j buttons is useless but my h buttons still works fine.

    I really hope you can shed some light on this issue for me. My app is all complete but this issue to resolve.

    Thank you

  2. @Davie: I don’t know why it’s happening, both RichFaces 3.1.5 and JSF 1.1.1 are rather old so it could be anything. The fact that it’s only reproducible in IE could mean that it’s a browser specific issue. I only tested my example with RichFaces 3.3.3 and JSF 1.2.

  3. —————-check my problem———-
    hey i m getting some problem with modal panels
    my code is
    thats the part of my first page….which consists of the modal panel code

    Here is tab #3

    now the file i m including i.e the test.xhtml is

    I have navigation rules for test.xhtml on the outcome of first and second
    code for my bean1 class is

    public class bean1 {

    String msg1;
    /** Creates a new instance of bean1 */
    public bean1() {
    msg1=”select something”;
    }

    public String getMsg1() {
    return msg1;
    }

    public void setMsg1(String msg1) {
    this.msg1 = msg1;
    }

    public String test()
    {
    if(msg1.equalsIgnoreCase(“first”))
    {
    System.out.println(“in first”);
    return “first”;
    }
    else
    {
    System.out.println(“in second”);
    return “second”;
    }

    }
    }

    when i am using it normally means without modal pane it is working fine but with modal pane it is not including the pages..
    please help

  4. hey i m getting some problem with modal panels
    my code is
    thats the part of my first page….which consists of the modal panel code

    Here is tab #3

    now the file i m including i.e the test.xhtml is

    I have navigation rules for test.xhtml on the outcome of first and second
    code for my bean1 class is

    public class bean1 {

    String msg1;
    /** Creates a new instance of bean1 */
    public bean1() {
    msg1=”select something”;
    }

    public String getMsg1() {
    return msg1;
    }

    public void setMsg1(String msg1) {
    this.msg1 = msg1;
    }

    public String test()
    {
    if(msg1.equalsIgnoreCase(“first”))
    {
    System.out.println(“in first”);
    return “first”;
    }
    else
    {
    System.out.println(“in second”);
    return “second”;
    }

    }
    }

    when i am using it normally means without modal pane it is working fine but with modal pane it is not including the pages..
    please help

  5. i am unable to post the Xhtml code so my problem is ,i want to change the page on the change event of selectonemenu.
    i am using a4j support to do this

    in simple page it is working but in modal pane it is not giving any output
    but the request is going (i checked it through firebug)

  6. one thing i missed i am using this include tag in tabbed panel i.e
    i have a modal panel in that i have a tabbed pane and in one of the tab
    i want to use the wizard feature..
    so plz help….

  7. How would you convert this to Seam ? Is it just a case of adding the navigation rules into faces-config.xml ? or can they be added to pages.xml ?

    Thanks,

  8. Hi Max , i have a problem the wizard opens fine but as soon as i press the link to go to another page , the modal panel unexpectedly closes as if i had invoked a close operation. I am working with code that is similar to yours , what can i do to keep the panel open ?

  9. Thanks Max , I am using a a4j:commandButton to invoke the modal panel which holds the wizard. Each page to be displayed has a navigate link to the following page , as in the example above . First page is fine as the wizard opens displaying page1.xhtml , but going to the next one closes the wizard.

    1. I don’t know why it’s happening, it should work. The example I have is using RichFaces 3.3.x. What version do you use?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s