程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> 在ASP.NET Atlas中創建自定義的Behavior

在ASP.NET Atlas中創建自定義的Behavior

編輯:.NET實例教程
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。
  
  <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> 
  
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved