编写ASP.net Ajax客户端控件ListBox（1）

M$ 为 ASP.net 配套推出的 Ajax 框架 ASP.net Ajax（原名Atlas，之后提到时我就用Atlas了，比较短，好打＝＝） 确实挺好用，虽然我觉得它有点过于庞大，不是那么轻量级。最近用它来实现了一个基于Javascript的ListBox，稍稍有点用其编写控件的心得， 在此记录下来，以免今后忘记。

这一篇打算记录些基础的东西，构建出一个无功能的控件框架。

首先是一个最基本的工作：为自己的控件定一个命名空间。之所以要用命名空间，是为了不和其他第三方代码有冲突。这里我给我的控件起的命名空间是TSAjax。
决定命名空间后，就要在Atlas里注册，使用的函数为Type.registerNamespace，它接受一个字符串参数，指定要注册的命名空间：

Type.registerNamespace('TSAjax');

注：注册命名空间是为了让Atlas框架能够有效地管理，至于不注册有什么效果么……我没试过XD

随后可以定义自己的类了，在这里我定义了一个ListBox类和一个ListBoxItem类，分别用于作为ListBox容器和ListBox里的各个条目：

Type.registerNamespace('TSAjax');

TSAjax.ListBoxItem = function(parent, param, index, selected){
}

TSAjax.ListBox = function(e){
}

接下来要杀个回马枪，因为Javascript是对于TSAjax.ListBoxItem这类的定义其实是看成TSAjax对象的一个函数，但是我们并没有TSAjax对象，所以要回个头来，定义TSAjax：

有一点要说明的是，我只把ListBox弄成了基于Atlas的控件，而ListBoxItem其实和Atlas的体系没太大关系。
之后就是注册ListBox控件，准确说是注册ListBox这个类，并为其指定基类，使用的是registerClass：

Type.registerNamespace('TSAjax');

TSAjax = function(){}

TSAjax.ListBoxItem = function(parent, param, index, selected){
}

TSAjax.ListBox = function(e){
}

TSAjax.ListBox.registerClass('TSAjax.ListBox', Sys.UI.Control);

注：registerClass是Atlas对Javascript的扩展，在导入Atlas库后就自动为每个对象（function）添加，通过对象本 身来调用。它的格式为：classInstanceVar.registerClass(typeName, baseType, interfaceTypes)，其中classInstanceVar就是自己定义的类变量，typeName是要注册的类名（一般和自身相同）； baseType为其基类，是可选项；interfaceTypes为其实现的接口，可以有0个或多个。在这里我将ListBox注册为 Sys.UI.Control的派生类。

注2：Sys.UI.Control是Atlas框架中所有可见控件的基类。所谓可见控件，就是与网页上的DOM元素相关的对象，用它来封装已有的DOM元素。

类框架处理完成后，该添加一些初始化方法了。目前我们只需初始化基类即可：

TSAjax.ListBox = function(e){
    TSAjax.ListBox.initializeBase(this, [e]);
}

initializeBase是Atlas所扩展的一个方法，它用于初始化基类。它的格式为：
var typeInstanceVar = typeVar.baseClassName.initializeBase(instance, baseArguments );
其中instance为用来初始化基类的实例，一般都为this，baseArguments为传递给基类构造函数的参数数组，参数依次对应基类中相应的构造函数的参数。
Sys.UI.Control的造构函数只有一个参数element，表示它所对应的DOM元素。之前说过，控件是对已有的DOM元素的封装，而这个element就是所封装的DOM元素。
由于基类Sys.UI.Control只有一个DOM元素，我们只需要传入只有一个元素e的数组[e]即可。

之后是重载初始化方法initialize。首先定义类的相关方法原型框架：

TSAjax.ListBox.prototype = {
}

Javascript的类方法定义采用原型（prototype）的方式，一个类a的方法原型b可以用如下方式定义：
function a.prototype.b(参数1、参数2……){……}
由于方法数很多，往往采用字面量的方式定义类方法原型，类a的方法原型b、c可以用如下方式定义：
a.prototype = {
    b : function(参数1、参数2……) {……},
    c : function(参数1……) {……}
}

随后定义initialize方法：

TSAjax.ListBox.prototype = {
    //初始化函数
    initialize : function() {
    }
}

目前我们在其中只要调用其基类的initialize方法即可：

TSAjax.ListBox.prototype = {
    //初始化函数
    initialize : function() {
        TSAjax.ListBox.callBaseMethod(this, 'initialize');
    }
}

initialize方法是用于控件初始化的，一个控件要被初始化后才能使用。Sys.UI.Control类自己有一个默认的initialize方法，但是我们往往需要对其进行重载以初始化控件里与基类无关的东西。

现在一个空的控件已经架好了，我们可以把这个空壳当作一个Atlas的控件来用了。

首先要在网页中引用自己写的这个控件的JS代码，可以通过通常的<script />来引用，不过在ASP.net平台中，Atlas提供了更容易管理的方法：使用ScriptManager的ScriptReference来添加JS文件引用，假设代码文件放在网站的script目录下，名为listbox.js：

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/script/listbox.js" />
  </Scripts>
</asp:ScriptManager>

然后在页面中增加一个div，设其id为testdiv：

<div id="testdiv"></div>

之后就可以用$create创建ListBox控件了：

var listbox;
function pageLoad() {
        listbox = $create(TSAjax.ListBox, null, null, null, $get("testdiv"));
}

注：pageLoad是Atlas增加的一个快捷的载入事件响应函数，它在页面载入完成后执行。它其实是Sys.Application类的load事件的一个保留事件处理函数。

注2：$create是Atlas用来创建构件（component，控件是构件的一种）的快捷函数，它是Sys.Component.create方法的一个简写，使用格式为：
$create(type, properties, events, references, element);
其中type是要创建的对象类型，是必选参数。properties是构件的属性，events是构件的事件，references是与其他构件的引用关系，element是与该构件相关联的DOM元素，对于控件来说是必须的

注3：$get是Sys.UI.DomElement.getElementById的快捷函数，用来通过id获取页面上的一个DOM元素。

注4：Atlas里的控件一般是没有自己的实体的。它以一个DOM元素为基础，在其上面进行操作，可以认为是对一个已有的DOM元素进行封装，因此我们要在web页面上创建一个dom元素，并在$create中与控件相关联。

于是一个控件就创建好了。现在它还只是一个空架子，没有任何功能，我们将在今后不断完善它。

• 相关文章
• 全局相关文章