RichFaces – wizard inside modal panel

June 10, 2010

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 responses to “RichFaces – wizard inside modal panel”

Davie

June 22, 2010 at 3:30 pm

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

Reply
max

June 22, 2010 at 3:43 pm

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

Reply
Flo

August 13, 2010 at 12:01 am

Hi Davie,

IE hangs if you got Tags inside your a4j:include’ed wizard pages.
The is already defined in the start.xhtml

greets,
Flo

Reply
Flo

August 13, 2010 at 12:02 am

I mean if you got h:form Tags in your wizard pages .. got filtered out of the last comment

Reply
abhijit singh

September 22, 2010 at 2:18 am

—————-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

Reply
abhijit singh

September 22, 2010 at 2:20 am

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

Reply
abhijit singh

September 22, 2010 at 2:24 am

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)

Reply
abhijit singh

September 22, 2010 at 2:40 am

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

Reply
Paul Keogh

December 2, 2010 at 10:21 am

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,

Reply
max

December 2, 2010 at 12:25 pm

@Paul: it should work if you put the navigation rules in pages.xml. Should also work if you keep them in faces-config.xml.

Reply
Marcel

April 30, 2012 at 8:13 am

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 ?

Reply
max

April 30, 2012 at 9:13 am

@Marcel: where is the link? Inside the modal panel or outside?

Reply
Marcel

May 2, 2012 at 7:14 am

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.

Reply
1. max
  
  May 2, 2012 at 9:07 am
  
  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?
  
  Reply
Andy

December 28, 2013 at 1:14 am

HI
I want to open a modal panel after loading homepage soon after login. Can i add modal panel also in pages.xml?

Reply

RichFaces – wizard inside modal panel

15 responses to “RichFaces – wizard inside modal panel”

Leave a reply to Andy Cancel reply