Asp.Net Ajax 学习笔记25 利用Microsoft AJAX Library开发客户端组件（下）

这次课程的首先将$create方法的详细签名描述了一遍。

$create( type, properties, events,references, element);

那么什么时references呢？references是一个字典，保存了对象属性与其它对象的关系，key是属性名，value是其他对象id。保证在initialize方法被调用时属性已经被设置为所需对象，即使调用$create方法时其他对象还没有创建。这个意思就是说，可以在create时，创建本组件的一个属性，这个属性保存的是其他对象的ID（可以说是引用）。在创建对象的properties和events时，可以使用json字符串的形式来描述。在下面的例子将会演示。

我们将演示一个复合控件， 复合控件主要会涉及到Control模型中的以下两个方法：

raiseBubbleEvent(source, args)：由子控件调用，将触发的事件向父控件传递

onBubbleEvent(source, args)：父控件重写该方法，用于接受子控件向上传递过来的事件

这两个方法的主要作用是降低父控件和子控件之间的耦合关系，例如子控件不需要知道它的父控件是谁。


// JScript 文件


Type.registerNamespace("Demo");




//这是一个Button类，他代表一个子元素


Demo.Button = function(element)




...{


Demo.Button.initializeBase(this, [element]);




this._context = null;


this._onClickHandler = null;


}




Demo.Button.prototype =




...{


initialize : function()




...{


Demo.Button.callBaseMethod(this, "initialize");




//创建一个onClickHandler的函数事件，将他根onClick函数绑定


//在一起，那么调用onClickHandler就是调用onClick函数


this._onClickHandler = Function.createDelegate(this,


this._onClick);




//给Button组件里的元素就是是DOM元素里的button的click事件


//绑定在一起，实际上就是绑定了OnClick函数.这里为什么不直接


//绑定OnClick函数，因为我们需要通过createDelegate将当前this


//作为this上下文传递到onClick函数，如果直接绑定，当前this上


//下文就是DOM元素里的button


$addHandler(this.get_element(), "click",


this._onClickHandler);


},




dispose : function()




...{


this._onClickHandler = null;


$clearHandlers(this.get_element());




Demo.Button.callBaseMethod(this, "dispose");


},




_onClick : function(e)




...{


//将context作为args的参数，传递到外部。


var eventArgs = new Demo.ButtonClickEventArgs(this._context);




//这里可以不用这个函数，直接调用raiseBubbleEvent


this.raiseClick(eventArgs);


},




raiseClick : function(args)




...{


//向父控件传递事件


this.raiseBubbleEvent(this, args);


},




get_context : function()




...{


return this._context;


},




set_context : function(value)




...{


this._context = value;


}


}






Demo.Button.registerClass("Demo.Button", Sys.UI.Control);




Demo.ButtonClickEventArgs = function(context)




...{


Demo.ButtonClickEventArgs.initializeBase(this);




this._context = context;


}




Demo.ButtonClickEventArgs.prototype =




...{


get_context : function()




...{


return this._context;


}


}




Demo.ButtonClickEventArgs.registerClass("Demo.ButtonClickEventArgs", Sys.EventArgs);




Demo.ButtonList = function(element)




...{


Demo.ButtonList.initializeBase(this, [element]);




this._itemDataList = null;


}




Demo.ButtonList.prototype =




...{


initialize : function()




...{


Demo.ButtonList.callBaseMethod(this, "initialize");


for(var i = 0; i < this._itemDataList.length; i++)




...{


this._createNewButton(this._itemDataList[i]);


}


},




_createNewButton : function(data)




...{


//创建一个button的DOM元素


var buttonElement = document.createElement("input");


buttonElement.type = "button";


buttonElement.value = data.text;


//当前容器将button放置在本容器中。


this.get_element().appendChild(buttonElement);




//使用JSon字符串的形式来初始化Demo.Button组件的属性,


//注意，设置属性没有使用_context和set_context，直接使用的


//context，这里系统自动转换


$create(


Demo.Button,




...{


"context" : data.context,


"parent" : this


},


null,


null,


buttonElement


);


},




get_itemDataList : function()




...{


return this._itemDataList;


},




set_itemDataList : function(value)




...{


this._itemDataList = value;


},




//相当于派生类重写onBubbleEvent函数，当容器里的控件抛出


//raiseBubbleEvent事件时，这个函数将自动调用


onBubbleEvent : function(source, e)




...{


//调用raiseItemClick函数


this.raiseItemClick(e);




//返回true表示，事件不会再向上层的容器控件传递


return true;


},




add_itemClick : function(handler)




...{


this.get_events().addHandler("itemClick", handler);


},




remove_itemClick : function(handler)




...{


this.get_events().removeHandler("itemClick", handler);


},




raiseItemClick : function(args)




...{


//得到itemClick事件的事件处理器


var handler = this.get_events().getHandler("itemClick");




if(handler)




...{


//调用外部的定义的itemClick的事件处理器


handler(this, args);


}


}


}




Demo.ButtonList.registerClass("Demo.ButtonList", Sys.UI.Control);

这是容器类和子类的定义。


<div id="buttonList">




</div>

这是容器element的定义


<script language="javascript" type="text/javascript">


//利用Application初始化ButtonList控件


Sys.Application.add_init(


function()




...{


//定一个数组，作为ButtonList的itemDataList属性


var dataList =


[




...{


text : "Item1",


context : "Item1 has been clicked"


},




...{


text : "Item2",


context : "Item2 has been clicked"


},




...{


text : "Item3",


context : "Item3 has been clicked"


}


];




$create(


Demo.ButtonList,




...{


"itemDataList" : dataList


},


//定义itemClick事件的事件处理器




...{


"itemClick" : onItemClick


},


null,


$get("buttonList")




);


}


);




function onItemClick(sender, args)




...{


alert(args.get_context());


}


</script>

Behavior模型是 另一种可视化组件模型，继承于Sys.UI.Behavior。 Control包装DOM元素，Behavior为DOM元
素提供功能（效果, etc）。 一个DOM元素只能由一个Control来包装，但是可以由多个Behavior进行“装饰”。

Behavior成员• 与Component组件相比唯一增加的属性是name属性。 由于一个DOM元素上可以添加多个Behavior，因此如果要通过元素获得Behavior对象就要通过name属性的值。 通过$get(“eleId”)["name_of_behavior"]来设置。Behavior模型没有示例。