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;
},
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.
<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.
