Create custom Behavior in ASP.NET Atlas

Author：Eve Cole Update Time：2009-06-30 16:12:07

English Version: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
Behavior in Atlas defines the behavior when an event of the control is triggered. Behavior can be seen as an encapsulated DHTML event, such as click and hover. Behavior can also be a component that can be attached to an Atlas client control to provide more advanced and richer functions of the Atlas client control, such as some complex drag & drop, automatic completion, and floating and other functions. Behavior will be defined in the behaviors collection of an Atlas control.

From the Atlas documentation and source files, we can know that Atlas has the following built-in behaviors:

Click Behavior: Provides processing of mouse clicks.
Floating Behavior: Provides drag & drop effects.
Hover Behavior: Provides processing of DHTML events onmouseover, onmouseout, onfocus and onblur.
Pop-up Component: Provides pop-up function and can be used to implement advanced tooltips.
Auto-complete Behavior: Provides automatic completion functionality. This is also one of the commonly used features in Atlas demos. This Behavior also requires a server-side handler.
Click Behavior is used to handle DHTML's onclick event. It is very useful but the functions it provides are somewhat simple. In some more complex programs, we may need to separate the functions of the left and right keys. For example, the left key is used to select and the right key is used to pop up a shortcut menu. Although we can put this if-else in the Click Behavior handler, this is not a good Atlas method. Therefore, today we are going to write a more powerful Click Behavior called ExtendedClickBehavior, which can separate the left and right keys inside the Behavior and trigger two different events. By writing this ExtendedClickBehavior, you can also understand the general process of creating a custom Behavior in Atlas.

Generally, there are five steps to create a custom Behavior:

Inherit from the Sys.UI.Behavior base class.
Define your own events to encapsulate events in DHTML. These events will be used to expose other Atlas controls in place of the original, unmodified DHTML events.
Specify a handler for your event in the Behavior's constructor, and detach the event's handler in the destructor.
Emit the corresponding event in the handler function. In the example of ExtendedClickBehavior, we emit different events based on different mouse buttons.
Add a description of the event you defined in the getDescriptor() method.
Below is the JavaScript code for ExtendedClickBehavior. The above five steps are marked as comments within the code. Save the code below 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 this ExtendedClickBehavior on the page. Add a <div> to the page for clicks, and a label to display click information. Below is the HTML definition from the ASPX file. Don't forget to add a reference to the ExtendedClickBehavior.js file in the 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; white-space:normal">Click On Me (Left and Right)!</div> <br />
<span id="myLabel">not clicked</span>
</div>
Below is the Atlas script definition. Notice that we use Atlas's setProperty Action (for Atlas Action, see the subsequent article) to set the label's text after each click.