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

2019-11-18 17:17:01

字體：大中小

供稿：網(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事件，非常有用但是它提供的功能有些簡(jiǎn)單。在一些比較復(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" 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>
下面是Atlas腳本定義。注意到我們使用了Atlas的setPRoperty Action（有關(guān)Atlas Action，請(qǐng)見后續(xù)文章）用來在每次點(diǎn)擊后設(shè)置label的text。