Programmer Dflying | Build Your Own Behaviors in ASP.NET Atlas

Build Your Own Behaviors in ASP.NET Atlas

Dflying | 12 April, 2006 00:30

Behaviors in Atlas are used to define what a control will behave when an event got fired. Behaviors encapsulate actions that can be associated with DHTML events, such as the click or hover events. They can also be a kind of components that can be attached to the client control to provide more sophisticated UI and behavioral characteristics, including complex operations such as drag-and-drop behavior, auto-completion, and floating actions. They are defined in a collection named behaviors on the client control.

From Atlas document and source code, we can find there are a number of Atlas build-in behaviors:

Click behavior, which provides simple click behavior handling.
Floating behavior, which provides drag-and-drop behavior.
Hover behavior, which provides handling for DHTML events such as onmouseover, onmouseout, onfocus, and onblur.
Pop-up component, which provides pop-up functionality, such as advanced tooltips.
Auto-complete behavior, which is a specialized behavior that provides the means to complete entries added to text boxes. The behavior requires handlers in order to provide the data for auto-completion.

The Click behavior is used to handle the onclick event of DHTML, which is useful but really simple. In more complicated scenarios, we may want to separate left click and right click. Though we can put this if-else in the event handler, but it is not the Atlas way, so today I will build a more powerful click behavior (ExtendedClickBehavior) instead, to separate them in the click behavior itself, and let you know how to build your own behaviors in Atlas.

Generally, there are two steps to build a custom behavior:

Inherits from Sys.UI.Behavior base class.
Define your events which encapsulate the DHTML events. And these events will be exposed to other Atlas controls instead of the raw DHTML events.
Assign handlers to the events you defined in step 2 in constructor and detach in destructor.
Invoke your events in the event handlers.
Add descriptions in the getDescriptor() method.

Here's the code for ExtendedClickBehavior. The five steps above are marked inline. Save it as ExtendedClickBehavior.js.

Sys.UI.ExtendedClickBehavior = function() {
    Sys.UI.ExtendedClickBehavior.initializeBase(this);
    
    var _clickHandler;
    
    // step 2
    this.click = this.createEvent();
    this.leftClick = this.createEvent();
    this.rightClick = this.createEvent();
    
    this.dispose = function() {
        // step 3
        this.control.element.detachEvent('onmousedown', _clickHandler);
        Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose');
    }
 
    this.initialize = function() {
        Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'initialize');
 
        // step 3
        _clickHandler = Function.createDelegate(this, clickHandler);
        this.control.element.attachEvent('onmousedown', _clickHandler);
    }
    
    this.getDescriptor = function() {
        var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');
        
        // step 5
        td.addEvent('click', true);
        td.addEvent('leftClick', true);
        td.addEvent('rightClick', true);
        return td;
    }
    
    // step 4
    function clickHandler() {
        this.click.invoke(this, Sys.EventArgs.Empty);
        if (window.event.button == 1)
        {
            this.leftClick.invoke(this, Sys.EventArgs.Empty);
        }
        else if (window.event.button == 2)
        {
            this.rightClick.invoke(this, Sys.EventArgs.Empty);
        }
    }
}
// step 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);

Let's test our ExtendedClickBehavior in a page. We add a <div> for clicking and a label for showing click info.

Here is the HTML definition in ASPX. Do not forget to add a reference to our ExtendedClickBehavior.js in ScriptManager.

<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
    <Scripts>
        <atlas:ScriptReference Path="ExtendedClickBehavior.js" />
    </Scripts>
</atlas:ScriptManager>
<div>
    <div id="myButton" style="border: 1px solid black; width: 20em;">Click On Me (Left and Right)!</div> <br />
    <span id="myLabel">not clicked</span>
</div>

And here is the Atlas script. Note we are using the Atlas setProperty Action to set the text of the label after each click.

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <components>
        <label id="myButton">
            <behaviors>
                <extendedClickBehavior>
                    <click>
                        <setProperty target="myLabel" property="text" value="clicked" />
                    </click>
                    <leftClick>
                        <setProperty target="myLabel" property="text" value="left clicked" />
                    </leftClick>
                    <rightClick>
                        <setProperty target="myLabel" property="text" value="right clicked" />
                    </rightClick>   
                </extendedClickBehavior> 
            </behaviors>
        </label>
        <label id="myLabel" />
    </components>
</page>