| 解析ASP.NET AJAX控件 | |
| 2007年11月18日 5:41:18 | |
| 收藏到： | 大 中 小 |
| 一、简介 如今，ASP.NET AJAX框架以其与ASP.NET 2.0系统的有机整合与完全面向对象的客户端JavaScript组件模型正在吸引着越来越多的Web开发人员。此外，这个框架还为基于ASP.NET 2.0平台的AJAX Web开发提供了一揽子方案（尽管尚嫌稚气）。 首先，我们来回忆ASP.NET AJAX框架设计的主要目标：其一，扩展现有的ASP.NET服务器端模型，让其能够生成支持富客户端的JavaScript代码；其二，为ASP.NET应用增加客户端编程模型，让纯粹的客户端编程变得更为容易。 基于此，我们至少可以从如下两个方面来扩展ASP.NET AJAX框架。第一，创建更为丰富的ASP.NET AJAX服务器端扩展器控件，以便为这些控件提供丰富的客户端Ajax行为。此部分的极好例证就是AJAX Control Toolkit中的大部分控件。第二，创建纯粹的客户端组件/控件。这部分的例证就是框架已经实现的对于常规HTML元素的封装、高级客户端控件ListView及客户端离线数据源DataSource等。为此，控件开发者可以创建新的客户端组件/控件来封装典型的客户端功能，或者基于现有客户端组件/控件加以扩展。 【说明】第一，事实上，我们可以进一步沿着ASP.NET AJAX客户端与服务器端架构层次关系图进一步扩展其底层。第二，要开发ASP.NET AJAX控件要求开发人员首先具备关于ASP.NET AJAX框架的客户端和服务器器知识（相比而言，在具体编程的过程中要求掌握更多的客户端相关知识）。 二、控件开发客户端相关技术 微软Ajax库的最伟大之处在于，它扩展了JavaScript的面向对象编程模型并且提供一个增强的类型系统（其中包含命名空间，类，接口，枚举，异常处理，反射及其它为.NET开发者所熟悉的结构）。 尽管Ajax控件都是继承自Sys.UI.Control，但是，整个Ajax控件的核心却是Sys.Comoponent类。这个类模拟了.NET框架的System.ComponentModel.Comoponent类。 (一)Sys.IDisposable 这个接口类似于.NET框架的IDisposable接口。组件利用的所有资源都应该在dispose方法中释放。具体地说，这些资源包括事件处理器，大型数组，等等。 (二)Sys.INotifyDisposing 这个接口允许组件用户通过disposing事件检测该组件的释放情况。 (三)Sys.INotifyPropertyChange 这个接口允许组件用户通过PropertyChanged事件检测有关属性的改变情况。在本文后面，我们还要对此展开详细的讨论。 (四)Sys.Component 该Sys.Component类要实现上面所有的接口。封装了复杂的逻辑或包含子DOM元素的组件一般都要求使用一个中央位置用于初始化和清除类的实例。这通常是通过重载Sys.Component类的initialize和dispose方法实现的。 进一步归纳来看，共存在两种类型的组件： ◆Nonvisual（非可视化的） ◆Visual（可视化的） 一个非可视化的组件没有任何用户接口。一个典型的例子是ASP.NETAJAX框架内置的定时器控件或一个定制的对web服务进行队列调用的组件。非可视化组件类似于ASP.NET中的ObjectDataSource和TableAdapter控件，但是没有任何用户接口。 另一方面，可视化的组件则提供了一个用户接口。一个典型的例子是Ajax Control Toolkit中的控件，UpdateProgress，以及AjaxGrid控件等等。其实，我们还可以把可视化组件进一步划分为： ◆Action（Sys.UI.Action） ◆Control（Sys.UI.Control (五)Sys.UI.Action 一个行为（Action）的目的是用来扩展一个DOM元素而不改变它的核心功能。Ajax Control Toolkit中的大多数控件就属于行为，例如该AutoCompleteTextBox，MaskEdit，DragPanel等。一个行为必须拥有一个相关联的DOM元素。注意，单个DOM元素可以拥有多个与之相关联的行为。既然本文的重点在讨论控件的开发技术，所以，我们不再进一步讨论行为的概念。如果你对此感兴趣的话，请访问Ajax Control Toolkit站点。 (六)Sys.UI.Control 相对于上面的Action而言，一个Control（控件）本身就是一个DOM元素。创建一个控件的主要目的是通过对一个现有控件加以包装进而提供新的功能。其典型的示例就是UpdatePanel，UpdateProgress或Ajax Control Toolkit中新加入的Tab控件。下列的代码向你展示了创建一个控件所要求的最少代码。 一个控件和一个行为之间的另一个区别在于，一个行为允许你设置一个id而一个控件却不允许。事实上，一个控件的id与其相关联的DOM元素是一致的。下面是这个类中常用方法（有些是父类提供）的详细解释。 ◆get_element()：返回该控件描述的DOM元素。 ◆get_id()：返回该控件的id，为$find语句所用以引用此控件。 ◆set_id()：如果你试图设置id，那么，你将得到一个Error.invalidOperation异常，因为控件是不允许设置id的。 ◆get_parent()：返回父级控件。 ◆set_parent()：设置父控件。 ◆get_visibilityMode()：visibilityMode是一个枚举，其取值是hide或collapse。 ◆set_visibilityMode()：设置visibilityMode的值。 ◆get_visibile()：返回相应DOM元素的可见性。 ◆set_visibile()：设置DOM元素风格可见性，取值为hidden或visible。 ◆addCssClass()：把指定的CSS类添加到DOM元素的className中。 ◆dispose()：继承自Sys.Component。 ◆initialize()：继承自Sys.Component。 ◆onBubbleEvent()：处理由raiseBubbleEvent激发的事件。如果这个方法返回true，则该事件将不会被上传到其父元素中进行处理。注意，如果你不处理该事件的话，你应该把此事件交由父级来作默认处理。 ◆raiseBubbleEvent()：引发一个事件并交由父控件处理。总的来看，当你创建复杂的控件（经常是包含一个或多个子控件并且想把一个事件从子控件上交由其父控件来处理时）时往往要使用onBubbleEvent与这个方法。 ◆removeCssClass()：从DOM元素的className中删除指定的CSS类。 ◆toggleCssClass()：把指定的CSS类添加到DOM元素的className中（如果以前没有设置的话）。注意，如果已经指定了这个CSS类，那么，将从className中移除该类。 三、使用JavaScript进行客户端控件编程相关概念 属性： 把属性添加到一个控件中是很简单的。在此，推荐使用的方法是在控件构造器中声明一个私有变量，并在prototype部分添加相应的getter及setter属性方法。当访问该属性时，ASP.NET AJAX框架总是添加get_和set_前缀。因此，当添加getter/setter时，我们应该遵循get_propertyName和set_propertyName命名惯例。正如在上面的示例中相应于hoverImageUrl属性所实现的，我们使用get_hoverImage()作为getter，set_hoverImage()作为setter。但是在上面的例子中当我们使用一个$create()语句创建该控件时，我们仅传递了hoverImageUrl，因为ASP.NET AJAX框架将会自动添加set_前缀。与属性有关的另外一个重要问题是，当它的属性改变时如何通知该控件的客户端。下列的代码片断展示了如何激发propertyChanged事件。 方法： 使用JavaScript编写一个类的方法时，一般不作特殊考虑；但是，我们还是推荐在控件的原型（prototype）对象中添加它们。 【注】就JavaScript本身编程而言，其表达形式多样，但建议你遵循这里推荐的格式（也正是框架相应js源码中所使用的格式）。 事件： 在控件类中添加事件类似添加属性。首先，在控件构造器中把事件处理器声明为一个私有变量并在原型对象中创建相应于该事件的一个add/delete方法对。尽管并不要求在模块级声明事件处理器变量，但是，这样做的确存在一些优点，我将在Ajax框架的Function.createDelegate()节讨论这个问题。当添加/删除事件时，Ajax框架总是自动地添加上add_和remove_前缀。因此，当添加事件订阅代码时，该方法应该以add_eventName方式命名；反之，以remove_eventName方式命名。例如，在上面的click事件示例中，我们以add_click和remove_click形式添加事件订阅方法，但是在$create语句中，我们以click方式对它命名，由Ajax框架负责添加add_前缀。如你在上面的示例所见，add_click和remove_click都引用了this.get_event()（继承自Sys.Component）。这个Sys.Component类维持着一个订阅事件的内部列表，存储于一个Sys.EventHandlerList类的实例（以及各自它们的处理器）中。 除了这个get_event()方法对外，还推荐使用raiseEventName方法来激发事件。由于上面所举的仅是一个很基本的例子，所以，我没有在其中使用它。但是，当你想从多处激发同一个事件时你必须添加它。当激发一个事件时，我们可以传递一些称为事件参数的上下文数据。 在事件中传递参数的推荐的方法是，创建一个继承自Sys.EventArgs的新类并构造器中传递要求的参数。针对每一个参数，它将在原型对象部分暴露getter和setter。因为本例非常简单，所以，没有使用这种更一般的方式。 当前在该微软Ajax库中相应于事件参数存在两个内置类—Sys.EventArgs和Sys.CancelEventArgs。即使你有一个不需要任何事件参数的事件，那么，你也应该传递Sys.EventArgs.Empty（例如在上面的ImageButton控件示例中），以便事件订阅者可以遵循相同的模式来处理所有的事件。 如果你细致研究框架源码，你会注意到，其中绝大部分的控件都遵循了相同的模式—使用函数HandleEvent(sender, e)来处理所有事件。注意，这与.NET框架处理事件所实现的模式是相同的。而且，遵循这种方式给人的初始感觉过于复杂，但是却更遵循了一般性规律，便于以后的更复杂设计。 四、其它几个重要的全局客户端方法 下列，我们列出在开发客户端控件时，一些常用（有些是必用的）的重要方法。 $get()：这个方法是我们以前常用的Document.getElementById方法的一个快捷方式。此方法使用一个可选的父级DOM元素；如果没有指定这个父元素，那么，搜索操作将从Document对象开始执行。 $create()：这个方法是Sys.Component.Create方法的一个快捷方式，用于实例化一个客户端组件，行为或控件。 $find()：这个方法是Sys.Application.findComponent静态方法的快捷方式。 $addHandler：这是Sys.UI.DomEvent.addHandler的一个快捷方式。它提供了一种一致的方式用于“钩住”DOM元素的事件；同时，隐藏了不同浏览器下事件操作的复杂性。 $removeHandler：删除一个之前使用$addHandler创建的事件处理器。这个方法的语法形式与$addHandler完全一致。实际使用中，一般建议在pageUnload事件中删除所有的事件处理器。 $addHandlers：这个方法类似于$addHandler。 $clearHandlers：删除所有之前使用$addHandler或$addHandlers创建的事件处理器。它仅有一个参数（引用一个DOM元素）。 Function.createDelegate：这是一个既能够“包装”一个现有函数，又能够返回一个新函数的函数。创建此函数的主要目的是解决this关键字的问题。在一个由一个DOM元素引发的事件处理器中，this关键字总是引用此DOM元素而不是类本身。 Function.createCallback：这个函数也有些特别；因为它也能够“包装”一个现有函数，同时返回一个新的函数。但是，创建这个函数的真正目的是为创建的回调函数提供相应的上下文数据（与Win32中的回调函数意义完全可比）。 |
|
| 评论(0)┆阅读(0)┆引用┆栏目:ASP.net(C#)┆Tags:asp.net,Ajax | |
| 文章评论 | |
|
|
|