PDA

View Full Version : ext.ux.wizard.WizardWindow



gslender
16 Jun 2008, 2:13 AM
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
16 Jun 2008, 7:12 AM
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
28 Jun 2008, 10:05 PM
updated to version 2008-06-29

bmadams4
8 Jul 2008, 10:03 AM
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
8 Jul 2008, 10:17 AM
Well, I just tried it and worked fine for me...give it another try.

karthick_3d
20 Jul 2008, 3:44 AM
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
20 Jul 2008, 12:35 PM
if you can post some sample code, showing what you are doing, I'll happily have a look

karthick_3d
21 Jul 2008, 1:16 PM
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
22 Jul 2008, 3:20 AM
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
22 Jul 2008, 11:29 AM
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
22 Jul 2008, 1:04 PM
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
22 Jul 2008, 2:07 PM
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
25 Jul 2008, 8:12 PM
updated wizard to offer optional progressbar support (instead of simple green dots) and option for displaying main image on left side....

Panco
8 Aug 2008, 2:07 AM
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
8 Aug 2008, 2:24 PM
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
4 Sep 2008, 4:52 AM
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
4 Sep 2008, 6:02 AM
do you mean stop it closing the wizard window or making it disabled?

qwertz
4 Sep 2008, 9:26 AM
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
4 Sep 2008, 1:06 PM
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
5 Sep 2008, 12:32 AM
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
5 Sep 2008, 3:40 AM
can't you add a formpanel with isvalid method? how did you attach the com.google.gwt.user.client.ui.FormPanel ?

j-mi-jim
21 Sep 2008, 7:08 AM
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
21 Sep 2008, 1:25 PM
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
21 Sep 2008, 11:52 PM
thanks I will test it !

j-mi-jim
22 Sep 2008, 11:43 PM
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
23 Sep 2008, 3:46 AM
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
23 Sep 2008, 5:41 PM
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
30 Oct 2008, 5:44 AM
It looks like the WindowWizard zip file is corrupted.

Grant - Can you please fix it?

gslender
30 Oct 2008, 4:56 PM
just tested and downloads fine... not sure what else to say?

majain
31 Oct 2008, 5:38 PM
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
31 Oct 2008, 7:11 PM
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
3 Nov 2008, 5:57 AM
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
5 Dec 2008, 6:21 PM
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
7 Dec 2008, 2:33 PM
yep - looking at that now... I'll post back when done ;-)

cheers,
grant

shermdog01
7 Dec 2008, 4:52 PM
Awesome! -- Thinking about it, the North panel should probably be optional also...

gslender
7 Dec 2008, 8:33 PM
added new methods and impl to allow this to work - see 1st post for new version

benji.potter
3 Feb 2009, 3:12 AM
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
22 Feb 2009, 4:36 PM
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
29 Apr 2009, 3:13 AM
Grant, will there be a GXT 2.0 compatible version of this wizard?

sregg
29 Apr 2009, 6:21 AM
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
8 May 2009, 2:40 PM
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
19 May 2009, 12:39 AM
I have one DualListField

maxpert-gxt
20 May 2009, 2:11 AM
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
9 Jun 2009, 8:22 AM
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
16 Jun 2009, 5:37 AM
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
29 Jun 2009, 1:58 PM
Does the last version works fine in GXT 2.0? :-/

mrfr0g
28 Oct 2009, 8:08 AM
Hello,

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

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