开发ASP.NET AJAX客户端定制行为

原创

googlingman 2007-09-28 10:11:20 ©著作权

文章标签 ajax ASP.NET 休闲行为 AJAX客户端 文章分类 .Net 后端开发

©著作权归作者所有：来自51CTO博客作者googlingman的原创作品，如需转载，请与作者联系，否则将追究法律责任

一、简介

ASP.NET AJAX框架为开发者提供了三种方案用于扩展该框架的客户端功能：行为，可视化组件及非可视化组件。这三类组件分别对应于 Sys.UI.Behavior，Sys.UI.Control及Sys.Component。因为在以前的文章中，对这三个概念有细致介绍，所以在此不再赘述。但是，我们还是有必要再回顾一下其间的关系图，如下图1所示。

开发ASP.NET AJAX客户端定制行为_AJAX客户端

    图1—MS AJAX框架提供的组件、行为与控件继承关系图。

    在本文中，我们将基于MS AJAX客户端技术构建一个定制的行为—MyHoverBehavior（鼠标悬浮行为）。

二、使用定制的鼠标Hover行为

    你可以把本文创建的定制行为MyHoverBehavior应用到任意的HTML控件上，允许指定当用户的鼠标悬停在该控件上时引发的动作。譬如，你可以把这个行为应用于如下典型场所：实现自定义的工具提示、上下文菜单以及智能标签等。图2及图3分别展示了本文示例程序的两个运行时刻快照。

开发ASP.NET AJAX客户端定制行为_ASP.NET_02

图2—本文示例程序运行时刻快照1

当你在图2中呈×××底纹的<DIV>元素上移动鼠标时，你会观察到如下图3所示的快照。

开发ASP.NET AJAX客户端定制行为_休闲_03

图3—当你在×××底纹的<DIV>元素上移动鼠标时的屏幕快照（此时悬浮行为起作为，相应的<DIV>元素的CSS样式发生改变）。

   【注意】在上面的两个屏幕快照中下方似乎多出了一个矩形，其实这是MS AJAX框架推荐的一种JavaScript代码调试技术，即在页面HTML代码中嵌入一个特有的id为‘TraceConsole’的< textarea>元素。这样以来，Sys.Debug.trace及Sys.Debug.traceDump等语句的输出都会显示于此元素内，极大地方便了脚本代码的调试。 三、创建定制行为组件—MyHoverBehavior
    根据我们以前的讲解，我们现在的任务就是使用JavaScript代码把客户端逻辑封装到一个定制行为中。下面，让我们作详细剖析。
【作者注】为了更好地理解MS AJAX倡导及推出的面向对象JavaScript技术，在本部分我们故意模拟了MS AJAX脚本库的表达形式，即以独立的函数方式而不是以内联方式定义所有的属性存取器函数，方法及事件等。

(一) Prototype定义

    首先，象往常一样，在定义完命名空间和类构造器之后，我们要在prototype块中声明私有属性，声明这些属性相关的get及set存取器函数，要重载的父类的方法initialize和dispose，以及所有相关的事件处理器。见如下代码：

    清单1—定制行为的prototype块代码

ZXZSamples.MyHoverBehavior.prototype = { 
_hoverElement : null, 
_unhoverDelay : 0, 
_hoverCount : 0, 
_hoverHandler : null, 
_unHoverHandler : null, 
get_hoverElement: ZXZSamples$MyHoverBehavior$get_hoverElement, 
set_hoverElement: ZXZSamples$MyHoverBehavior$set_hoverElement, 
get_unhoverDelay: ZXZSamples$MyHoverBehavior$get_unhoverDelay, 
set_unhoverDelay: ZXZSamples$MyHoverBehavior$set_unhoverDelay, 
initialize: ZXZSamples$MyHoverBehavior$initialize, 
dispose: ZXZSamples$MyHoverBehavior$dispose, 
add_hover: ZXZSamples$MyHoverBehavior$add_hover, 
remove_hover: ZXZSamples$MyHoverBehavior$remove_hover, 
_onhover: ZXZSamples$MyHoverBehavior$_onhover, 
add_unhover: ZXZSamples$MyHoverBehavior$add_unhover, 
remove_unhover: ZXZSamples$MyHoverBehavior$remove_unhover, 
_onunhover: ZXZSamples$MyHoverBehavior$_onunhover, 
_delayedUnhoverHandler:ZXZSamples$MyHoverBehavior$_delayedUnhoverHandler 
}

    这里，我们定义了字段_hoverElement以指定此行为将被绑定到的DOM元素，字段_unhoverDelay用于指定鼠标悬浮于目标上的最大时限（也就是说经_unhoverDelay秒后目标的样式将发生相应改变），字段_hoverCount则用于记忆鼠标移动到目标上的次数。另外两个处理器字段—_hoverHandler和_unHoverHandler用来描述事件代理。这两个代理将由定制行为使用，用以把 mouseover/focus和mouseout/blur事件数据关联到两个相应的事件处理器—_onhover和_onunhover上。

(二) 初始化和事件处理

    现在，让我们来讨论一下方法initialize。列表2给出了相应的代码实现。

    清单2—initialize方法

function ZXZSamples$MyHoverBehavior$initialize() { 
ZXZSamples.MyHoverBehavior.callBaseMethod(this, 'initialize'); 
this._hoverHandler = Function.createDelegate(this, this._onhover); 
this._unHoverHandler = Function.createDelegate(this, this._unhoverDelay? this._delayedUnhoverHandler :this._onunhover); 
$addHandler(this.get_element(), "mouseover", this._hoverHandler); 
$addHandler(this.get_element(), "focus", this._hoverHandler); 
$addHandler(this.get_element(), "mouseout", this._unHoverHandler); 
$addHandler(this.get_element(), "blur", this._unHoverHandler); 

if (this._hoverElement){ 
$addHandler(this._hoverElement, "mouseover", this._hoverHandler); 
$addHandler(this._hoverElement, "focus", this._hoverHandler); 
$addHandler(this._hoverElement, "mouseout", this._unHoverHandler); 
$addHandler(this._hoverElement, "blur", this._unHoverHandler); 
} 
}

    这里，我们首先调用了基类的方法initialize。然后，我们调用MS AJAX框架内置的全局方法Function.createDelegate把两个事件代理_hoverHandler和_unHoverHandler 分别绑定到两个事件处理器_onhover和_onunhover上。注意，当用户指定属性_unhoverDelay时，我们调用了事件处理器函数 _delayedUnhoverHandler，该函数又进一步“包装”了处理器_onunhover，为的是当鼠标悬浮于（或焦点会聚于）目标上时可以通过window.setTimeout方法来较好地处理时间延迟的问题。一旦创建这些代理，就可以使用它们并借助于来MS AJAX全局方法$addHandler把相应事件直接“钩”到事件处理器上。有关全局方法$addHandler，在此不赘述，读者可以参考在线资源。
   接下来，我们将详细讨论前面涉及的两个事件处理器，下面先列出它们的相关代码。
    清单3—_onhover处理器和_onunhover处理器代码

function ZXZSamples$MyHoverBehavior$_onhover(){ 
this._hoverCount++; 
var handler = this.get_events().getHandler("hover"); 
if (handler) { 
handler(this, Sys.EventArgs.Empty); 
} 
} 
function ZXZSamples$MyHoverBehavior$_onunhover(){ 
this._hoverCount--; 
if (this._hoverCount ==0){ 
var handler = this.get_events().getHandler("unhover"); 
if (handler) { 
handler(this, Sys.EventArgs.Empty); 
} 
} 
}

    在第一个事件处理器函数中，我们首先在悬浮次数计数器变量_hoverCount上加1。然后，我们通过由父类Component所维持的 Sys.EventHandlerList实例中取得与事件'unhover'相关联的特定的事件处理器。最后，我们激活此特定事件。注意，这里的事件处理器变量本质上是一个函数，当调用之时，它能够执行与特定事件'unhover'相关联的所有事件处理器。
相反的是，在第二个事件处理器函数中，操作几乎同第一个函数中逻辑相反。注意，只有当悬浮次数计数器变量值为0时，我们才激活特定的事件"unhover"。

    (三) Descriptor块定义
    定制行为的Descriptor块定义如下所示。

     清单4—descriptor块定义代码

ZXZSamples.MyHoverBehavior.descriptor ={ 
properties: [ 
{ name: 'hoverElement', type: Object,isDomElement:true,readOnly:true}, 
{ name: 'unhoverDelay', type: Number} 
], 
events: [ 
{name: 'hover'} , 
{name: 'unhover'} 
] 
}

    注意，MS AJAX XML-script引擎需要一个descriptor类型把标记代码分析成一个客户端组件的实例。因此，仅有那些提供了descriptor类型的客户端组件都可用于XML-script编码中。在本文中的行为MyHoverBehavior中，我们暴露了两个属性—hoverElement和 unhoverDelay，还有两个事件—hover和unhover。

(四) 使用定制行为MyHoverBehavior

    请注意，为了以声明方式使用前面创建的定制行为，我们最好使用“ASP.NET CTP-enabled Website”模板来创建示例网站（并命名为MyHoverBehavior）。为了简化起见，在此，我们仅仅列出最重要的xml-script代码段：

    清单5—定制行为类MyHoverBehavior应用于声明性xml-script代码段内。



<script type="text/xml-script"> 
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:cc="javascript:ZXZSamples"> 
<components> 
<control id="panel1"> 
<behaviors> 
<cc:MyHoverBehavior unhoverDelay="300" > 
<hover> 
<setPropertyAction target="panel1" property="element" propertyKey="className" value="hover"/> 
</hover> 
<unhover> 
<setPropertyAction target="panel1" property="element" propertyKey="className" value="start"/> 
</unhover> 
</cc:MyHoverBehavior> 
</behaviors> 
</control> 
<application> 
<load> 
<setPropertyAction target="panel1" property="element" propertyKey="className" value="start"/> 
</load> 
</application> 
</components> 
</page> 
</script>

     在MS AJAX框架提供的脚本源码中，能够应用于这里xml-script声明性编程上下文中的对象典型地都定义有一个descriptor块。这里，我们首先声明了一个定制的名为ZXZSamples的XML命名空间。然后，我们把自己的定制行为MyHoverBehavior依附到一个ID为 'panel1'的HTML <DIV>元素上。当加载对象Application时，我们初始化该<DIV>元素 'panel1'的CSS样式。接下来，我们定义了定制行为MyHoverBehavior的两个事件—hover和unhover。随着这两个事件中的每一个的激发，<DIV>元素 'panel1'的CSS样式发生相应的改变。

    因为有以前的几篇文章为基础，所以在此，我们仅仓促地解释完自定制行为MyHoverBehavior在.aspx页面中的使用。

四、小结

    在本文中，我们通过一个自定制行为MyHoverBehavior的完整创建过程的分析，进一步回顾了ASP.NET AJAX框架推出的面向对象JavaScript技术。同时，我们还应看到，要进行ASP.NET AJAX框架的客户端中心型的开发，需要开发者熟悉CSS技术、DOM结构、常用DOM API函数以及DOM事件操作技术，而不仅仅要求掌握JavaScript编程技术。

    另外，本文中所开发的定制行为在Visual Studio 2005＋ASP.NET AJAX 1.0框架＋IE 6.0和FireFox 2.0环境下调试通过。