这次课程的首先将$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
"
);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
//
这是一个Button类,他代表一个子元素
Demo.Button
=
function
(element)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
Demo.Button.initializeBase(this, [element]);
this._context = null;
this._onClickHandler = null;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.Button.prototype
=
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
initialize : function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this._onClickHandler = null;
$clearHandlers(this.get_element());
Demo.Button.callBaseMethod(this, "dispose");
},
_onClick : function(e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//将context作为args的参数,传递到外部。
var eventArgs = new Demo.ButtonClickEventArgs(this._context);
//这里可以不用这个函数,直接调用raiseBubbleEvent
this.raiseClick(eventArgs);
},
raiseClick : function(args)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//向父控件传递事件
this.raiseBubbleEvent(this, args);
},
get_context : function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return this._context;
},
set_context : function(value)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this._context = value;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.Button.registerClass(
"
Demo.Button
"
, Sys.UI.Control);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.ButtonClickEventArgs
=
function
(context)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
Demo.ButtonClickEventArgs.initializeBase(this);
this._context = context;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.ButtonClickEventArgs.prototype
=
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
get_context : function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return this._context;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.ButtonClickEventArgs.registerClass(
"
Demo.ButtonClickEventArgs
"
, Sys.EventArgs);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.ButtonList
=
function
(element)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
Demo.ButtonList.initializeBase(this, [element]);
this._itemDataList = null;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Demo.ButtonList.prototype
=
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
initialize : function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Demo.ButtonList.callBaseMethod(this, "initialize");
for(var i = 0; i < this._itemDataList.length; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this._createNewButton(this._itemDataList[i]);
}
},
_createNewButton : function(data)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//创建一个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,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
"context" : data.context,
"parent" : this
},
null,
null,
buttonElement
);
},
get_itemDataList : function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return this._itemDataList;
},
set_itemDataList : function(value)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this._itemDataList = value;
},
//相当于派生类重写onBubbleEvent函数,当容器里的控件抛出
//raiseBubbleEvent事件时,这个函数将自动调用
onBubbleEvent : function(source, e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//调用raiseItemClick函数
this.raiseItemClick(e);
//返回true表示,事件不会再向上层的容器控件传递
return true;
},
add_itemClick : function(handler)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.get_events().addHandler("itemClick", handler);
},
remove_itemClick : function(handler)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.get_events().removeHandler("itemClick", handler);
},
raiseItemClick : function(args)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//得到itemClick事件的事件处理器
var handler = this.get_events().getHandler("itemClick");
if(handler)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//调用外部的定义的itemClick的事件处理器
handler(this, args);
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
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
()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
//定一个数组,作为ButtonList的itemDataList属性
var dataList =
[
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
text : "Item1",
context : "Item1 has been clicked"
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
text : "Item2",
context : "Item2 has been clicked"
},
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
text : "Item3",
context : "Item3 has been clicked"
}
];
$create(
Demo.ButtonList,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
"itemDataList" : dataList
},
//定义itemClick事件的事件处理器
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
"itemClick" : onItemClick
},
null,
$get("buttonList")
);
}
);
function
onItemClick(sender, args)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
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模型没有示例。