在ASP.NET Atlas中創(chuàng)建自定義的Behavior

2024-07-10 13:11:08

字體：大中小

供稿：網(wǎng)友

english version: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
atlas中的behavior定義了當(dāng)控件的某個(gè)事件被觸發(fā)時(shí)的行為。behavior可以看作是一種封裝了的dhtml的事件，例如click和hover等。behavior同樣可以是一個(gè)組件，可被attach到某個(gè)atlas客戶端控件上，以提供這個(gè)atlas客戶端控件更高級(jí)，更豐富的功能，例如一些復(fù)雜的拖放（drag & drop），自動(dòng)完成，浮動(dòng)等功能。behavior將被定義在某個(gè)atlas控件的behaviors集合中。

從atlas文檔以及源文件中，我們可以知道atlas有如下一些內(nèi)建的behavior：

click behavior：提供對(duì)鼠標(biāo)點(diǎn)擊的處理。
floating behavior：提供拖放（drag & drop）的效果。
hover behavior：提供對(duì)dhtml的事件onmouseover，onmouseout，onfocus以及onblur的處理。
pop-up component：提供pop-up的功能，可以用來實(shí)現(xiàn)高級(jí)的tooltip。
auto-complete behavior：提供自動(dòng)完成的功能。這也是atlas演示中常用的功能之一。這個(gè)behavior還需要服務(wù)器端的處理程序。
click behavior用來處理dhtml的onclick事件，非常有用但是它提供的功能有些簡單。在一些比較復(fù)雜的程序中，我們可能需要將左右鍵的功能分開，例如，左鍵用來選擇，右鍵用來彈出快捷菜單。雖然我們可以把這個(gè)if-else放在click behavior的處理函數(shù)中，但這并不是好的atlas的方法。因此，今天我們來編寫一個(gè)更加強(qiáng)大的click behavior，叫做extendedclickbehavior，它可以在behavior的內(nèi)部就把左右鍵分開，并且引發(fā)出兩個(gè)不同的事件。通過編寫這個(gè)extendedclickbehavior，您也可以了解在atlas中創(chuàng)建自定義的behavior的一般過程。

通常的，創(chuàng)建自定義的behavior有如下5個(gè)步驟：

繼承于sys.ui.behavior基類。
定義您自己的事件以封裝dhtml中的事件。這些事件將被用來暴露給其他的atlas控件以代替原有的，未經(jīng)修飾的dhtml事件。
在behavior的構(gòu)造函數(shù)中為您的事件指定處理函數(shù)，并在析構(gòu)函數(shù)中detach事件的處理函數(shù)。
在處理函數(shù)中發(fā)出相應(yīng)的事件。在extendedclickbehavior的例子中，我們根據(jù)鼠標(biāo)按鍵的不同來發(fā)出不同的事件。
在getdescriptor()方法中加上對(duì)您定義的事件的描述。
下面是extendedclickbehavior的javascript代碼。上述五個(gè)步驟在代碼內(nèi)以注釋的形式標(biāo)出。將下面的代碼保存為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);
讓我們?cè)陧撁嬷袦y(cè)試一下這個(gè)extendedclickbehavior。在頁面上添加一個(gè)<div>用來點(diǎn)擊，一個(gè)label用來顯示點(diǎn)擊的信息。下面是aspx文件中的html定義。不要忘記在scriptmanager中添加對(duì)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（有關(guān)atlas action，請(qǐng)見后續(xù)文章）用來在每次點(diǎn)擊后設(shè)置label的text。