在ASP.NET Atlas中建立自訂的Behavior

作者：Eve Cole 更新時間：2009-06-30 16:12:07

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" 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（有關Atlas Action，請見後續文章）用來在每次點擊後設定label的text。