1. #1
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default ext.ux.wizard.WizardWindow

    ext.ux.wizard.WizardWindow


    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
    Code:
      	<inherits name='ext.ux.wizard.WizardWindow'/>
    The code example below shows how to use it...

    ...enjoy,
    Grant


    Code:
    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();
    	}
    }
    Attached Images
    Attached Files

  2. #2
    Ext User
    Join Date
    Jun 2008
    Posts
    31
    Vote Rating
    0
    mwaschkowski is on a distinguished road

      0  

    Default


    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

  3. #3
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


    updated to version 2008-06-29

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    1
    Vote Rating
    0
    bmadams4 is on a distinguished road

      0  

    Red face WizardWindow zip corrupt

    WizardWindow zip corrupt


    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.

  5. #5
    Ext User
    Join Date
    Jun 2008
    Posts
    31
    Vote Rating
    0
    mwaschkowski is on a distinguished road

      0  

    Default


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

  6. #6
    Ext User
    Join Date
    Jun 2008
    Posts
    12
    Vote Rating
    0
    karthick_3d is on a distinguished road

      0  

    Default The icons not properly displayed.

    The icons not properly displayed.


    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

  7. #7
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Jun 2008
    Posts
    12
    Vote Rating
    0
    karthick_3d is on a distinguished road

      0  

    Default Here is the sample code.

    Here is the sample code.


    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();
    }

    }

  9. #9
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


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

    Code:
    //		birthday.setAutoWidth(true);
    //		birthday.setData("anchorSpec", "-50");
    Why did you need them?

  10. #10
    Ext User
    Join Date
    Jun 2008
    Posts
    12
    Vote Rating
    0
    karthick_3d is on a distinguished road

      0  

    Default Yet It's not working for me

    Yet It's not working for me


    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
    Attached Images

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar