Sys.UI.Control - Client Controls


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

Sys.UI.Control - Client Controls

Here we take a look at the Microsoft AJAX Library Sys.UI.Control object.

The Sys.UI.Control class which is part of the Microsoft AJAX library is a class which acts as a base class for creating AJAX enabled client controls, indeed it is used by all the ASP.NET AJAX client controls as a base class according to the MSDN documentation. A control created which derives from Sys.UI.Control usually is a control which extends an existing DOM element, such as a HTML control like an input button.

High-Flying has an article on Sys.Component which showed how to derive from the Sys.Component class for when you want your Javascript class to work with the Microsoft AJAX library using the Prototype model. For deriving from Sys.UI.Control we do similar stuff in implementing a class which derives from the Sys.UI.Control class. In order to extend a HTML client control, we need to pass in the constructor the DOM element that the control is to extend. We can override the initialize method to register event handlers for our own custom events using the addHandler() method. We can also override the dispose event to provide cleanup for our Javascript, so we don't cause the browser to slow down with too much Javascript going wild.

Sys.UI.Control - Client Controls Example

Here we have an example of creating an AJAX client control by deriving from the Sys.UI.Control in the Microsoft AJAX library. The aim here is to create a control which extends a textbox (HTML input control) such that when the textbox receives focus for user entry, we highlight that TextBox with a border, and then the border is removed once the textbox loses focus. This means that the textbox is higlighted when the user is entering some text into it. This might be alot easier to achieve in jQuery, but here we're looking at how to do in the Microsoft AJAX library, such as if you weren't using jQuery or some other reason.

For this example I'm going to put the Javascript for the client control into an external file. In the article on Sys.Component we left the Javascript in the page for simplicity, so here we have a slight change to start with.

In the external file we reference the MicrosoftAjax.js file at the top of the page so that we get some intellisense in Visual Studio.


/// <reference name="MicrosoftAjax.js" />


Here is the whole JS file for our client code. See that we create a new namespace. Notice how we register a new custom namespace, provide a constructor which calls initializeBase, implement the prototype which provides initialize and dispose implentations and wiring events up. Following our class logic which wires up event handlers for focus and blur (un-focus) we then specify the class derives from Sys.UI.Control. Finally we use the Sys.Application class to notify the ScriptManager that this script had loaded.


// Reference MicrosoftAjax.js script file in external Javascript file
/// <reference name="MicrosoftAjax.js" />

// register new namespace
Type.registerNamespace("MyNamespace");

// Constructor
MyNamespace.TextBoxFocus = function (element) {

    MyNamespace.TextBoxFocus.initializeBase(this, [element]);

    this._focusDelegate = null;
    this._blurDelegate = null;
}

MyNamespace.TextBoxFocus.prototype = {

    // Bind and unbind to focus event.
    add_focus: function (handler) {
        this.get_events().addHandler('focus', handler);
    },
    remove_focus: function (handler) {
        this.get_events().removeHandler('focus', handler);
    },

    // Bind and unbind to blur event.
    add_blur: function (handler) {
        this.get_events().addHandler('blur', handler);
    },
    remove_blur: function (handler) {
        this.get_events().removeHandler('blur', handler);
    },

    // dispose control
    dispose: function () {

        var element = this.get_element();

        if (this._focusDelegate) {
            Sys.UI.DomEvent.removeHandler(element, 'focus', this._focusDelegate);
            delete this._focusDelegate;
        }

        if (this._blurDelegate) {
            Sys.UI.DomEvent.removeHandler(element, 'blur', this._blurDelegate);
            delete this._blurDelegate;
        }
        MyNamespace.TextBoxFocus.callBaseMethod(this, 'dispose');
    },

    // initialize control
    initialize: function () {

        var element = this.get_element();

        if (this._focusDelegate === null) {
            this._focusDelegate = Function.createDelegate(this, this._focusHandler);
        }

        Sys.UI.DomEvent.addHandler(element, 'focus', this._focusDelegate);

        if (this._blurDelegate === null) {
            this._blurDelegate = Function.createDelegate(this, this._blurHandler);
        }

        Sys.UI.DomEvent.addHandler(element, 'blur', this._blurDelegate);

        MyNamespace.TextBoxFocus.callBaseMethod(this, 'initialize');

    },
    _focusHandler: function (event) {
        var h = this.get_events().getHandler('focus');
        if (h) h(this, Sys.EventArgs.Empty);
    },
    _blurHandler: function (event) {
        var h = this.get_events().getHandler('blur');
        if (h) h(this, Sys.EventArgs.Empty);
    }
}
MyNamespace.TextBoxFocus.registerClass('MyNamespace.TextBoxFocus', Sys.UI.Control);

// notify Scriptmanager the script is loaded
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();


Next up on our ASPX we use the ScriptManager, and it's ScriptReference tags to reference our external javascript file:


<asp:ScriptManager runat="server" ID="ScriptManager01">
    <scripts>
        <asp:ScriptReference Path="~/Scripts/TextBoxFocus.js" />
    </scripts>
</asp:ScriptManager>


Finally we have our HTML textbox control and some Javascript which creates an instance of our control using the $create method, which takes parameters for the type of control to create, properties to be set in the constructor, events to wire up, references to other components and finally the DOM element that we are attaching our AJAX control to. Here we map some methods to the control for our event handlers which change the border of the textbox when we fire the focus or blur events.


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

    function applicationInitHandler(sender, args) {
        $create(MyNamespace.TextBoxFocus,
            { element: { style: { fontWeight: "bold", borderWidth: "2px"}} },
            { focus: doSomethingOnFocus, blur: doSomethingOnblur }, null, $get('mytextbox'));
        }

    function doSomethingOnFocus(sender, args) {
        $get('mytextbox').style.oldborder = $get('mytextbox').style.border;
        $get('mytextbox').style.border = "1px solid #00FF00";
    }

    function doSomethingOnblur(sender, args) {
        $get('mytextbox').style.border = $get('mytextbox').style.oldborder;
    }

</script>


<input type="text" id="mytextbox" />
<input type="text" id="standardTextBox" />