Hybrid View

  1. #1
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    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
    3
    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 User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    j-mi-jim is on a distinguished road

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    j-mi-jim is on a distinguished road

      0  

    Default


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

    Thanks.

    jim

  9. #9
    Ext User
    Join Date
    Feb 2008
    Posts
    39
    Vote Rating
    0
    Jacsoft is on a distinguished road

      0  

    Default


    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...
    Last edited by Jacsoft; 23 Sep 2008 at 5:44 PM. Reason: additional info

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi