Implementing Custom Classes for Microsoft AJAX Library (Part 2)

The previous article is demonstrates the use of custom class but it makes some assumption which is not best practice for developping pages.

In this article I will try to make this one step forward by taking the class names (that were hard coded in the javascript) out of the script and assign them in the page. I will also provide a initialization to assign the same functionality to any page element.

We start with the construction and pass the element that is using the class:

Panahy.Ajax.PassTextBox = function(element) {
    Panahy.Ajax.PassTextBox.initializeBase(this, [element]);

    // initialize internal variables
    this._weakCssClass = null;
    this._mediumCssClass = null;
    this._strongCssClass = null;
}

Next, I call the passwordStrengthClass method in a new event handler called _onKeyup which I will apply the css class to the element using get_element():

//define key press event
_onKeyup : function(e) {
    //get password text
    var pass = this.get_element().value;
    var strength = this.returnPasswordStrength(pass);
    switch (strength) {
      case "Weak":
         this.get_element().className = this._weakCssClass;
         break;
      case "Medium":
         this.get_element().className = this._mediumCssClass;
         break;
      case "Strong":
         this.get_element().className = this._strongCssClass;
         break;
    }
},

Now, I need to tell the AJAX Library to assign the _onKeyup method to keyup event of the element. To do this, I create a delegate and add the handler as follows:

//initialize the UI control
initialize: function() {
   Panahy.Ajax.PassTextBox.callBaseMethod(this, 'initialize');

   this._onKeyupHandler = Function.createDelegate(this, this._onKeyup);
   $addHandlers(this.get_element(), {'keyup' : this._onKeyup}, this);
},

By doing this, I have to remove the reference when cleaning up the things in the dispose method:

dispose: function() {
    $clearHandlers(this.get_element());
    Panahy.Ajax.PassTextBox.callBaseMethod(this, 'dispose');
},

It is almost done, except the definition of the get and set properties which can be done like this:

//define properties
get_weakCssClass: function() {
   return this._weakCssClass;
},
set_weakCssClass: function(value) {
   this._weakCssClass = value;
},

I need to do this for all three properties.

Now, I can use this in my page after referencing it in the ScriptManager.

<script language="javascript" type="text/javascript">
  var app = Sys.Application;
  app.add_init(appInit);

  function appInit(sender, args) {
    $create(Panahy.Ajax.PassTextBox,
        { weakCssClass: 'weak', mediumCssClass: 'medium', strongCssClass: 'strong' },
        null, null, $get('MainContent_TextBoxPassword'));
}
</script>
In this way, I don't need to set anything on the textbox.
This is still not perfect, In the next article I will demonstrate how to put this in a custom ASP.NET Control.