Create a custom behavior in ASP. NET Atlas

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 viewed as a DHTML encapsulated event, such as click and hover. Behavior can also be a component that can be attach to an atlas client control to provide more advanced and richer functions of this atlas client control, for example, some complex drag-and-drop functions, such as automatic completion and floating. Behavior will be defined inBehaviorsCollection.

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

1. Click Behavior: Allows you to process mouse clicks.
2. Floating Behavior: Provides the drag & drop effect.
3. Hover Behavior: Processes DHTML events onmouseover, onmouseout, onfocus, and onblur.
4. Pop-up component: Provides the pop-up function, which can be used to implement advanced tooltip.
5. Auto-complete Behavior: Provides the Automatic completion function. This is also one of the common functions in the Atlas demonstration. This behavior still needs to be processed by the server.Program.

Click behavior is used to process DHTML onclick events. It is very useful, but it provides some simple functions. In some complex programs, we may need to separate the functions of the left and right keys. For example, the left button is used to select and the right button is used to pop up the shortcut menu. Although we can put this if-else in the processing function of click behavior, this is not a good Atlas method. Therefore, today we will compile a more powerful click behavior called extendedclickbehavior. It can separate the left and right keys within the behavior and issue 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:

1. Inherited fromSYS. UI. BehaviorBase class.
2. Define your own events to encapsulate events in DHTML. These events will be used to expose other Atlas controls to replace the original, unmodified DHTML events.
3. Specify the handler for your event in the behavior constructor, and detach the event handler in the destructor.
4. Issue the corresponding event in the processing function. In the extendedclickbehavior example, we issue different events based on the mouse buttons.
5. Add the description of the event you defined in the getdescriptor () method.

The following is the JavaScript code of extendedclickbehavior.Code. The preceding five steps are marked with comments in the code. Save the following code 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 () {< br> 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 , 'Getscriptor ');

// 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 extendedclickbehavior on the page. Add a <div> label to the page to display the click information. The following is the HTML definition in the aspx file. Do not forget to add a reference to the extendedclickbehavior. js file 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; white-space: normal" > Click on me (left and right )! </ Div >   < BR />
< Span ID = "Mylabel" > Not clicked </ Span >
</ Div >

The following is the Atlas script definition. We noticed that the setproperty action of Atlas was used.Article) Is used to set the label text 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 >

 

Result in the browser:

No click:

Left click:

Right-click:

The above sample program can be downloaded here: http://files.cnblogs.com/dflying/ExtendedClickBehaviorDemo.zip