{"id":37,"date":"2011-11-08T10:22:00","date_gmt":"2011-11-08T10:22:00","guid":{"rendered":"https:\/\/wdev-blog.azurewebsites.net\/index.php\/2011\/11\/08\/implementing-custom-classes-for-microsoft-ajax-library-part-2\/"},"modified":"2011-11-08T10:22:00","modified_gmt":"2011-11-08T10:22:00","slug":"implementing-custom-classes-for-microsoft-ajax-library-part-2","status":"publish","type":"post","link":"http:\/\/panahy.nl\/index.php\/2011\/11\/08\/implementing-custom-classes-for-microsoft-ajax-library-part-2\/","title":{"rendered":"Implementing Custom Classes for Microsoft AJAX Library (Part 2)"},"content":{"rendered":"
\n
The previous article<\/a> is demonstrates the use of custom class but it makes some assumption which is not best practice for developping pages.<\/span><\/div>\n<\/div>\n
\n
\n
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.<\/span><\/div>\n
<\/div>\n
We start with the construction and pass the element that is using the class:<\/span><\/div>\n
<\/div>\n
<\/span><\/span><\/span>
Panahy.Ajax.PassTextBox = <\/span><\/span>function<\/span><\/span><\/span>(element<\/strong>) {
    Panahy.Ajax.PassTextBox.initializeBase(<\/span><\/span>this<\/span><\/span><\/span>, [element<\/strong>]);

    \/\/ initialize internal variables
    <\/span><\/span><\/span>this<\/span><\/span><\/span>._weakCssClass = <\/span><\/span>null<\/span><\/span><\/span>;
<\/span><\/span>    this<\/span><\/span><\/span>._mediumCssClass = <\/span><\/span>null<\/span><\/span><\/span>;
<\/span><\/span><\/span><\/span><\/span>    this<\/span><\/span><\/span>._strongCssClass = <\/span><\/span>null<\/span><\/span><\/span>;
}<\/span><\/span><\/span><\/span><\/span><\/div>\n
Next, I call the passwordStrengthClass<\/span> method in a new event handler called _onKeyup<\/strong><\/span> which I will apply the css class to the element using get_element():<\/span><\/div>\n
<\/span><\/span><\/span>
<\/span><\/span>\/\/define key press event
<\/span><\/span><\/span>_onKeyup : <\/span><\/span>function<\/span><\/span><\/span>(e) {
<\/span><\/span>    \/\/get password text
<\/span><\/span><\/span>    <\/span>var<\/span><\/span><\/span> pass = <\/span><\/span>this<\/span><\/span><\/span>.get_element().value;
<\/span><\/span>    var<\/span><\/span><\/span> strength = <\/span><\/span>this<\/span><\/span><\/span>.returnPasswordStrength(pass);
<\/span><\/span>    switch<\/span><\/span><\/span> (strength) {
<\/span><\/span>      case<\/span><\/span><\/span> <\/span><\/span>“Weak”<\/span><\/span><\/span>:
<\/span><\/span>         this<\/span><\/span><\/span>.get_element().className = <\/span><\/span>this<\/span><\/span><\/span>._weakCssClass;
<\/span><\/span>         break<\/span><\/span><\/span>;
<\/span><\/span>      case<\/span><\/span><\/span> <\/span><\/span>“Medium”<\/span><\/span><\/span>:
<\/span><\/span>         this<\/span><\/span><\/span>.get_element().className = <\/span><\/span>this<\/span><\/span><\/span>._mediumCssClass;
<\/span><\/span>         break<\/span><\/span><\/span>;
<\/span><\/span>      case<\/span><\/span><\/span> <\/span><\/span>“Strong”<\/span><\/span><\/span>:
<\/span><\/span>         this<\/span><\/span><\/span>.get_element().className = <\/span><\/span>this<\/span><\/span><\/span>._strongCssClass;
<\/span><\/span>         break<\/span><\/span><\/span>;
    }
},<\/span><\/span><\/span><\/div>\n
<\/div>\n
Now, I need to tell the AJAX Library to assign the _onKeyup<\/span> method to keyup <\/span><\/span><\/span>event of the element. To do this, I create a delegate and add the handler as follows:<\/span><\/div>\n
<\/div>\n
<\/span><\/span>
<\/span><\/span>\/\/initialize the UI control
<\/span><\/span><\/span>initialize: <\/span><\/span>function<\/span><\/span><\/span>() {
   Panahy.Ajax.PassTextBox.callBaseMethod(<\/span><\/span>this<\/span><\/span><\/span>, <\/span><\/span>‘initialize’<\/span><\/span><\/span>);
<\/span><\/span>
   <\/span><\/span>this<\/span><\/span><\/span>._onKeyupHandler = Function.createDelegate(<\/span><\/span>this<\/span><\/span><\/span>, <\/span><\/span>this<\/span><\/span><\/span>._onKeyup<\/strong>);
   $addHandlers(<\/span><\/span>this<\/span><\/span><\/span>.get_element(), {<\/span><\/span>‘keyup’<\/span><\/span><\/span> : <\/span><\/span>this<\/span><\/span><\/span>._onKeyup<\/strong>}, <\/span><\/span>this<\/span><\/span><\/span>);
},<\/span><\/span><\/div>\n
By doing this, I have to remove the reference when cleaning up the things in the dispose method:<\/span><\/div>\n
<\/div>\n
<\/span><\/span>
dispose: <\/span><\/span>function<\/span><\/span><\/span>() {
    $clearHandlers<\/strong>(<\/span><\/span>this<\/span><\/span><\/span>.get_element());
    Panahy.Ajax.PassTextBox.callBaseMethod(<\/span><\/span>this<\/span><\/span><\/span>, <\/span><\/span>‘dispose’<\/span><\/span><\/span>);
},<\/span><\/span><\/div>\n
It is almost done, except the definition of the get and set properties which can be done like this:
<\/span><\/div>\n

<\/span><\/span><\/span><\/span><\/p>\n

\/\/define properties
<\/span><\/span><\/span>get_weakCssClass: <\/span><\/span>function<\/span><\/span><\/span>() {
<\/span><\/span>   return<\/span><\/span><\/span> <\/span><\/span>this<\/span><\/span><\/span>._weakCssClass;
},
set_weakCssClass: function<\/span><\/span><\/span>(value) {
<\/span><\/span>   t<\/span><\/span><\/span>his<\/span><\/span><\/span>._weakCssClass = value;
},<\/span><\/span><\/span><\/span><\/span><\/div>\n
I need to do this for all three properties.<\/span><\/div>\n
Now, I can use this in my page after referencing it in the ScriptManager.<\/span>
<\/span><\/span><\/span>
<\/span><\/span><<\/span><\/span><\/span>script<\/span><\/span><\/span> <\/span><\/span>language<\/span><\/span><\/span>=”javascript”<\/span><\/span><\/span> <\/span><\/span>type<\/span><\/span><\/span>=”text\/javascript”>
<\/span><\/span><\/span>  var<\/span><\/span><\/span> app = Sys.Application;
  app.add_init(appInit);<\/p>\n

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

\n
<\/span><\/span><\/p>\n
<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading “Implementing Custom Classes for Microsoft AJAX Library (Part 2)”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,31,18],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":0,"uagb_excerpt":"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…","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}