Wizard control widget: my first Jquery Widget

 

We are familiar with ASP.NET Wizard control and that is powerful to create form which need to perform many steps clicking on next and next button.But in Javascript, the problem in writing such widget control is we usually become dependent to HTML controls. Jquery Widget is giving us such power full and object oriented way to create control or plugin which we can easily make it independent on HTML control and more re-usable. It provides object oriented features such as encapsulation, inheritance.Widget also provides constructor and destructor to manage lifetime of plugin.

In MSDN there have a nice article on JQuery Widget http://msdn.microsoft.com/en-us/library/hh404085.aspx. Silk Project is real good example of Jquery Widget.

I found some nice wizard control using Jquery those are dependent on HTML controls. Some good articles on Jquery Widget :

http://blog.degree.no/2012/03/creating-a-simple-form-wizard-in-asp-net-mvc-4/

http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

both are almost same and I am not here reinventing wheel. I am using the second article code to create wizard plugin so that I can make it more reusable but I can not say that is perfect for any type of requirement.

If you read the second article ( mentioned above) Code  are pretty simple to understand. I am here just trying here to covert it into Jquery widget.

Jquery widget has constructor like _create method which is invoked first time. Here underscore is used to define private scope. So other object can not call _create method.

So in the _create method I have defined how control can be bind to methods and how control would be displayed initially.

To make it independent of particular Form, I have some properties inside Widget options so that we can set ui element or action there. Wizard widget can be called in form as like other widget.

   1: var wizard= $("#WizardForm").Wizard(

   2:       {

   3:           backButtonId: '#back-step',

   4:           nextButtonId: '#next-step',

   5:           finalButtonId: '#next-step',

   6:           confirmAction: ConfirmAction,

   7:           finalAction: FinalAction

   8:       });

  Here back-step, next-step are HTML button ids. and ConfirmAction and FinalAction are methods which is using as callback method.

To set those properties jquery widget provides us to create options object with these properties.

   1: $.widget("system.Wizard", {

   2:         options: {

   3:             backButtonId: '',

   4:             nextButtonId: '',

   5:             finalButtonId: '',

   6:             finalAction: null,

   7:             confirmAction: null

   8:         },

   9:  

  10:         _create: function () {

  11:             var that = this, name = this.element.name;

  12:             this.FirstStep = this.element.find(".wizard-step:first");

  13:             this.FirstStep.fadeIn();

  14:             this.CurrentStep = this.FirstStep;

  15:             $(this.options.backButtonId).click(function () { that.moveBack(); })

  16:             $(this.options.nextButtonId).click(function () { that.moveNext(); })

  17:         },

In this code we have exposed some properties so that user can set those properties as defined above and in _create method provided control ids are bind with widget method to make it reusable.

We exposed two method for logic to go next step or in previous step. This code need more improvement to make it more reusable. In the moveNext() method I have called callback method so that we can perform some actions which are dependent on particular UI control

   1: moveNext: function () {

   2:  

   3:            var $step = this.CurrentStep; // get current step

   4:  

   5:           //part of code

   6:  

   7:           if ($step.next().hasClass("confirm")) { // is it confirmation?

   8:               //invoking callack method

   9:                this.options.confirmAction($step);

  10:  

  11:            }

  12:  

  13:            //part of code 

  14:  

  15:            else { // this is last step, submit form

  16:                this.options.finalAction();

  17:            }

  18:        }     

Here is complete code of Wizard plugin. https://dl.dropbox.com/u/20275838/Wizard.js