在ASP.NET Atlas中创建自定义的Behavior

2024-07-10 13:11:08

字体：大中小

来源：转载

供稿：网友

english version: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
atlas中的behavior定义了当控件的某个事件被触发时的行为。behavior可以看作是一种封装了的dhtml的事件，例如click和hover等。behavior同样可以是一个组件，可被attach到某个atlas客户端控件上，以提供这个atlas客户端控件更高级，更丰富的功能，例如一些复杂的拖放（drag & drop），自动完成，浮动等功能。behavior将被定义在某个atlas控件的behaviors集合中。

从atlas文档以及源文件中，我们可以知道atlas有如下一些内建的behavior：

click behavior：提供对鼠标点击的处理。
floating behavior：提供拖放（drag & drop）的效果。
hover behavior：提供对dhtml的事件onmouseover，onmouseout，onfocus以及onblur的处理。
pop-up component：提供pop-up的功能，可以用来实现高级的tooltip。
auto-complete behavior：提供自动完成的功能。这也是atlas演示中常用的功能之一。这个behavior还需要服务器端的处理程序。
click behavior用来处理dhtml的onclick事件，非常有用但是它提供的功能有些简单。在一些比较复杂的程序中，我们可能需要将左右键的功能分开，例如，左键用来选择，右键用来弹出快捷菜单。虽然我们可以把这个if-else放在click behavior的处理函数中，但这并不是好的atlas的方法。因此，今天我们来编写一个更加强大的click behavior，叫做extendedclickbehavior，它可以在behavior的内部就把左右键分开，并且引发出两个不同的事件。通过编写这个extendedclickbehavior，您也可以了解在atlas中创建自定义的behavior的一般过程。

通常的，创建自定义的behavior有如下5个步骤：

继承于sys.ui.behavior基类。
定义您自己的事件以封装dhtml中的事件。这些事件将被用来暴露给其他的atlas控件以代替原有的，未经修饰的dhtml事件。
在behavior的构造函数中为您的事件指定处理函数，并在析构函数中detach事件的处理函数。
在处理函数中发出相应的事件。在extendedclickbehavior的例子中，我们根据鼠标按键的不同来发出不同的事件。
在getdescriptor()方法中加上对您定义的事件的描述。
下面是extendedclickbehavior的javascript代码。上述五个步骤在代码内以注释的形式标出。将下面的代码保存为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);
让我们在页面中测试一下这个extendedclickbehavior。在页面上添加一个<div>用来点击，一个label用来显示点击的信息。下面是aspx文件中的html定义。不要忘记在scriptmanager中添加对extendedclickbehavior.js文件的引用。

<atlas:scriptmanager enablepartialrendering="true" id="scriptmanager1" runat="server">
    <scripts>
        <atlas:scriptreference path="extendedclickbehavior.js" />
    </scripts>
</atlas:scriptmanager>
<div>
    <div id="mybutton" >click on me (left and right)!</div> <br />
    <span id="mylabel">not clicked</span>
</div>
下面是atlas脚本定义。注意到我们使用了atlas的setproperty action（有关atlas action，请见后续文章）用来在每次点击后设置label的text。