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

您现在的位置：动力中国 >> 网络编程 >> Ajax教程 >> 文章正文

[组图]开发ASP.NET AJAX客户端定制行为

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

http://www.domcn.org 文章来源：本站收藏点击数：

关键字:开发ASP.NET AJAX客户端定制行为

一、简介

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

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

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

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

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

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

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

图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>