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

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._%+-]+@[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._%+-]+@[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