ext.ux.wizard.WizardWindow

[gslender]

Recent Update : 2008-12-08 added setShowWestImageContainer(boolean) & setPanelBackgroundColor(String)
Recent Update : 2008-08-09 refactored to allow button text etc to be changed
Recent Update : 2008-07-26 added progress bar and main image support
Recent Update : 2008-07-01 added Apache License, Version 2.0
Recent Update : 2008-06-29 updated css name to avoid conflicts

Thought I'd contribute back and offer up my first User Extension - WizardWindow (see screen shots attached).

Add the WizardWindow.jar to your lib and the following line to your gwt.xml

<inherits name='ext.ux.wizard.WizardWindow'/>

The code example below shows how to use it...

...enjoy,
Grant :D



package com.mycompany.gxt.client;

import java.util.ArrayList;

import com.google.gwt.core.client.EntryPoint;

import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.Validator;

import ext.ux.wizard.client.WizardCard;
import ext.ux.wizard.client.WizardWindow;

public class WizardTest implements EntryPoint {

public void onModuleLoad() {

// setup an array of WizardCards
ArrayList<WizardCard> cards = new ArrayList<WizardCard>();

// 1st card - a welcome
WizardCard wc = new WizardCard("Welcome");
wc.setHtmlText("Welcome to the example for <strong>ext.ux.WizardWindow</strong>, "
+ "a ExtGWT user extension for creating wizards.<br/><br/>"
+ "Please click the \"next\"-button and fill out all form values.");
cards.add(wc);

// 2nd card - a simple form
wc = new WizardCard("Your name");
wc.setHtmlText("Please enter your first- and your lastname. "
+ "You cannot leave these fields empty.");
FormPanel formpanel = new FormPanel();
TextField<String> firstnameFld = new TextField<String>();
firstnameFld.setFieldLabel("Firstname");
firstnameFld.setEmptyText("Your first name");
firstnameFld.setAllowBlank(false);
firstnameFld.setSelectOnFocus(true);
formpanel.add(firstnameFld);
TextField<String> lastnameFld = new TextField<String>();
lastnameFld.setFieldLabel("Lastname");
lastnameFld.setEmptyText("Your last name");
lastnameFld.setAllowBlank(false);
lastnameFld.setSelectOnFocus(true);
formpanel.add(lastnameFld);
wc.setFormPanel(formpanel);
cards.add(wc);

// 3rd card - a form with complex validation
wc = new WizardCard("Your email");
wc.setHtmlText("Please enter your email-address. "
+ "Only letters, numbers and special characters are allowed such that would it be a valid email address.");
formpanel = new FormPanel();
TextField<String> emailFld = new TextField<String>();
emailFld.setFieldLabel("Email");
emailFld.setSelectOnFocus(true);
emailFld.setValidator(new Validator<String, TextField<String>>() {
public String validate(TextField<String> field, String value) {
if (!value.toUpperCase().matches("[A-Z0-9._%+-][email protected][A-Z0-9.-]+\\.[A-Z]{2,4}")) return "This field must be a valid email address";
return null;
}
});
formpanel.add(emailFld);
wc.setFormPanel(formpanel);
cards.add(wc);

// 4th card - finished!
wc = new WizardCard("Finished!");
wc.setHtmlText("Thank you for testing this wizard.<br/><br/>"
+ "Clicking \"finish\" will close this wizard.");
wc.addFinishListener(new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
MessageBox.alert("Wizard Finished", "This event was called as part of wizard finish", null);
}
});
cards.add(wc);

WizardWindow wizwin = new WizardWindow(cards);
wizwin.setHeading("A simple example for a wizard");
wizwin.setHeaderTitle("Simple Wizard Example");

wizwin.show();
}
}

[mwaschkowski]

Hey Grant,

Very nice, I may be in need of such a thing, I'll be sure to let you know how it goes if I start using it.

Thanks very much!

Mark

[gslender]

updated to version 2008-06-29

[bmadams4]

Hi,

I'm a new user who want to utilize your Wizard class but when I attempt to download it I receive an error message stating that the file is corrupt. Please repost.

Thanks.

[mwaschkowski]

Well, I just tried it and worked fine for me...give it another try.

[karthick_3d]

Hi gslender,

I have tried using the Wizard last week it's very simple and easy to use. Thanks for the same.

But the icons at the side of datefield and the combobox is not displayed properly.

I am just wondering if this is a problem witht the card layout. Do you get the same behaviour?

I have posted in the other topic as well.
http://extjs.com/forum/showthread.php?t=40523

Thanks
Karthick

[gslender]

if you can post some sample code, showing what you are doing, I'll happily have a look

[karthick_3d]

Hi gslender,

Thanks for your effort, Please check your code I slightly changed.

Thanks
Karthick

import java.util.ArrayList;

import com.google.gwt.core.client.EntryPoint;

import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.Validator;

import ext.ux.wizard.client.WizardCard;
import ext.ux.wizard.client.WizardWindow;

public class WizardTest implements EntryPoint {

WizardWindow wizwin;

public WizardTest() {

// setup an array of WizardCards
ArrayList<WizardCard> cards = new ArrayList<WizardCard>();

// 1st card - a welcome
WizardCard wc = new WizardCard("Welcome");
wc.setHtmlText("Welcome to the example for <strong>ext.ux.WizardWindow</strong>, "
+ "a ExtGWT user extension for creating wizards.<br/><br/>"
+ "Please click the \"next\"-button and fill out all form values.");
cards.add(wc);

// 2nd card - a simple form
wc = new WizardCard("Your name");
wc.setHtmlText("Please enter your first- and your lastname. "
+ "You cannot leave these fields empty.");
FormPanel formpanel = new FormPanel();
TextField<String> firstnameFld = new TextField<String>();
firstnameFld.setFieldLabel("Firstname");
firstnameFld.setEmptyText("Your first name");
firstnameFld.setAllowBlank(false);
firstnameFld.setSelectOnFocus(true);
formpanel.add(firstnameFld);
TextField<String> lastnameFld = new TextField<String>();
lastnameFld.setFieldLabel("Lastname");
lastnameFld.setEmptyText("Your last name");
lastnameFld.setAllowBlank(false);
lastnameFld.setSelectOnFocus(true);
formpanel.add(lastnameFld);

DateField birthday =
new DateField();
birthday.setFieldLabel("Birthday");
birthday.setAllowBlank(false);
birthday.setAutoWidth(true);
birthday.setData("anchorSpec", "-50");
formpanel.add(birthday);

wc.setFormPanel(formpanel);
cards.add(wc);

// 3rd card - a form with complex validation
wc = new WizardCard("Your email");
wc.setHtmlText("Please enter your email-address. "
+ "Only letters, numbers and special characters are allowed such that would it be a valid email address.");
formpanel = new FormPanel();
TextField<String> emailFld = new TextField<String>();
emailFld.setFieldLabel("Email");
emailFld.setSelectOnFocus(true);
emailFld.setValidator(new Validator<String, TextField<String>>() {
public String validate(TextField<String> field, String value) {
if (!value.toUpperCase().matches("[A-Z0-9._%+-][email protected][A-Z0-9.-]+\\.[A-Z]{2,4}")) return "This field must be a valid email address";
return null;
}
});
formpanel.add(emailFld);
wc.setFormPanel(formpanel);
cards.add(wc);

// 4th card - finished!
wc = new WizardCard("Finished!");
wc.setHtmlText("Thank you for testing this wizard.<br/><br/>"
+ "Clicking \"finish\" will close this wizard.");
wc.addFinishListener(new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
MessageBox.alert("Wizard Finished", "This event was called as part of wizard finish", null);
}
});
cards.add(wc);

wizwin = new WizardWindow(cards);
wizwin.setHeading("A simple example for a wizard");
wizwin.setHeaderTitle("Simple Wizard Example");

}

public void onModuleLoad() {
wizwin.show();
}

// this will be used by other class
public void show() {
wizwin.show();
}

}

[gslender]

I see what you mean, and removing these lines fixed things for me...


// birthday.setAutoWidth(true);
// birthday.setData("anchorSpec", "-50");

Why did you need them?

[karthick_3d]

Hi gslender,

I kept those methods just to set width properly.
Even If remove the method calls, I am not able to see the icon displayed properly. please check the attached image.
Other thing that I can think about is the version of GXT.
I am using GXT1.01. Do you have the latest source from SVN?

Regards
Karthick

[gslender]

I'm using GXT 1.01 for all my testing. I notice none of the icons are showing - none at all... so I'm wondering if you have some other problem going on. What about HTML file - what does that look like? CSS or other problems must exist? What about FF or IE - same issue?

[karthick_3d]

Hi gslender,

Your suggestion to look at the CSS file help me to find the actual problem.
I removed the entries in the CSS and It worked. Tank you very much for helping to solve this.

Regards
Karthick

[gslender]

updated wizard to offer optional progressbar support (instead of simple green dots) and option for displaying main image on left side....

[Panco]

I missed some of the localization features ("Step x of y" and buttons).

Except of corrections in the code, there is no other means of changing text "Step" and "of". So i provided a method wizwin.setStepStrings("Step", "of");

All of the button texts are in public scope on an WizardWindow instance, however only next and finish texts make change, since all buttons are constructed as instance variables and are not updated from there on, so i provided an overloaded constructor.

Code, that I use, is attached.

Thanx for a great wizard solution.

[gslender]

Except of corrections in the code, there is no other means of changing text "Step" and "of".

Good points and I've updated the code to address this - I didn't use your suggested code and instead decided to refactor the wizard to create buttons in the onrender which means I can create get/set methods for the text. Now you can create the wizard, set the text and it will render correctly...

[qwertz]

Hi,

is it possible to disable the "Finish" button? I tried



wc.addFinishListener(new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
// ... some validation...
be.doit = false;
}
});
but it didn't work...

[gslender]

do you mean stop it closing the wizard window or making it disabled?

[qwertz]

Both ways would be fine.

The problem is that i have a GWT FileUpload (within acom.google.gwt.user.client.ui.FormPanel) on the last Wizard page, so there is no validator on that page. Nevertheless i need the FileUpload to get validated, so that the wizard won't finish until a valid file was selected...

Many thanks for your efforts! :)


PS: I really miss a build-in GXT FileUpload 8-| Is there a release date for such a thing? The Roadmap says "Summer 2008"...

[gslender]

The feature you need might already exist...

isValid is called on any form that is set in the wizardcard before continuing (and finishing) so would that not help? (ie if your formpanel has an isValid() function then it is being checked and would only continue to exit the wizard if true was returned - see updateWizard() in WizardWidow)

If not, what specifically extra would you need?

[qwertz]

Unfortunately there is no com.extjs.gxt.ui.client.widget.form.FormPanel at all on the last WizardCard, because i want to use FileUpload there and therefore have to use com.google.gwt.user.client.ui.FormPanel.

So no isValid() gets called and the Wizard can be finished no matter what is specified by the FileUpload widget.

[gslender]

can't you add a formpanel with isvalid method? how did you attach the com.google.gwt.user.client.ui.FormPanel ?

[j-mi-jim]

Hi, it's a very cool gadget. I would use it but i've got a problem :

I would use it with a listbox (for an multiselect choice) but it isn't possible to have it in a form panel. So I said " I will use an combobox but it isn't possible to have a mutliselect combobox !" have you got an idea to help me ?

Thx.

Jimmy

[gslender]

I would use it with a listbox (for an multiselect choice) but it isn't possible to have it in a form panel.

You can insert any widget into a Form using the AdapterField http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/form/AdapterField.html

[j-mi-jim]

thanks I will test it !

[j-mi-jim]

I've got one question again .
When the wizard finish how can i access to values of the textields of the 1st card ?
Thx.

[j-mi-jim]

I answer to my question. I create a BaseDataModel and i put data into it in the isValid() method of the card.

Thanks.

jim

[Jacsoft]

Hello,

I just found this wizard code and I think it is very nice. I think I'll use it in my app. I only was thinking of an extension of the wizard and that is some kind of table of contents.
This means:
On the left side of the wizard show the numer of steps with the text and let users be able to click there to switch between the pages of the wizard.

I don't know if someone is already making it or if others would like to see it. I might be making it myself (in the near future, if I have some more time :P). But if people have additional ideas/suggestions or want to help? Just my 2 cents.

Further: Keep up the good work!

/edit: Now I downloaded the code, I see it is not easy to adapt myself with the given suggestion...

[majain]

It looks like the WindowWizard zip file is corrupted.

Grant - Can you please fix it?

[gslender]

just tested and downloads fine... not sure what else to say?

[majain]

I was able to download it. However, when I try to open it I get the following error:

http://lh4.ggpht.com/_3iOLfU8RnDk/SQuycCHMz-I/AAAAAAAAAGg/uwB5PbhD7co/s144/WindowWizard.jpg

[gslender]

majain,

I just looked at what you attached... its a zip file, with a file named "WizardWindow-2008-08-09", which is another zip file (if you extract and rename you unzip it) which then has the jar in it... /:)

so I have no idea what you have done, but clearly you are having problems successfully downloading the file, and then doing something odd with the archive.

the issue seems mainly with you - I can't really help.... sorry :s

cheers,
grant

[majain]

I think here's how I made it worked.

When I download it, it's a .zip file.
I renamed it to .jar and then I was able to extract it successfully.

Sorry for the confussion.

[shermdog01]

Hi Gslender,

This extension is great!

One question -- Would you be opposed to making the WEST region (where wizMainImg is displayed) optional?

I have no need for the image and would like to reclaim that space for my form.

Thanks!

[gslender]

yep - looking at that now... I'll post back when done ;-)

cheers,
grant

[shermdog01]

Awesome! -- Thinking about it, the North panel should probably be optional also...

[gslender]

added new methods and impl to allow this to work - see 1st post for new version

[benji.potter]

Hello,

I would like to use your Wizard, but I don't understand how access to WindowCard FormPanel (to save some fields) if the FormPanel isn't on the last WindowCard.

thanks

Benji

[rezaalavi]

Hi and Thank you for this beautiful wizard.
I have a suggestion to have a setter for each card that we can define the left image there for each card.

Cheers

[takayser]

Grant, will there be a GXT 2.0 compatible version of this wizard?

[sregg]

Hi,
I tested your WizardWindow but i have an error message saying that the constructor BaseEvent() is unknow.
I checked in the GXT code (1.2.4) and, indeed, the BasEvent constructor needs a parameter (the source object)
Is this a compatibility issue with the 1.2.4 version of gwt?

Thank you.

[cstdenis]

Would be useful to be able to add cards after the object is created.



public void addCard(WizardCard card) {
this.cards.add(card);
}

public void addCard(int index, WizardCard card) {
this.cards.add(index, card);
}

public void addCards(ArrayList<WizardCard> cards) {
this.cards.addall(cards);
}

public void addCards(int index, ArrayList<WizardCard> cards) {
this.cards.addall(index, cards);
}
Remove would be useful too.


public void removeCard(int index) {
this.cards.remove(index);
}


(above is all untested)

[mimikoko]

I have one DualListField

[maxpert-gxt]

GWT is complaining about line 68 when using BaseEvent(). Basically you don't have a default constructor for BaseEvent(), you gotta give it an object.
What could we do to overcome this problem ?
Did anyone else get the same problem ?

[renaudgillet]

GWT is complaining about line 68 when using BaseEvent(). Basically you don't have a default constructor for BaseEvent(), you gotta give it an object.
What could we do to overcome this problem ?
Did anyone else get the same problem ?

in the ReleaseNote of the v1.2.4:
Removed default constructor from BaseEvent and DomEvent.

Please does an updated version of the very helpful WizardWindow exist ???
Please, please!!!

Thanks in advance

[takayser]

the author of this wizard did not answer to that question for the last 2 month, so do it by yourself, it's pretty easy to fix that.

[vinicius.rabelo]

Does the last version works fine in GXT 2.0? :-/

[mrfr0g]

Hello,

I tweaked the code so that it works with the latest version of GXT.

http://www.extjs.com/forum/showthread.php?t=83995