今日任务:
在HTML元素中,实现鼠标的over、out事件非常简单,将onmouseover、onmouseout关联至相应的javascript函数即可。同样的,在Atlas框架模型里,需要实现同样的功能,又该如何设计呢?
根据Atlas Doc的介绍,可以有两种实现方式:1、Xml Script定义;2、JavaScript。
解决问题:
我们首先来看看Atlas 中的Sys.UI.Control在Xml Script定义方式下的格式:
1
<
control
>
2 < behaviors >
3 <!-- behaviors -->
4 </ behaviors >
5 < bindings >
6 <!-- bindings -->
7 </ bindings >
8 < propertyChanged >
9 <!-- actions -->
10 </ propertyChanged >
11 </ control >
12
我们看到Control具体behaviors集合。
2 < behaviors >
3 <!-- behaviors -->
4 </ behaviors >
5 < bindings >
6 <!-- bindings -->
7 </ bindings >
8 < propertyChanged >
9 <!-- actions -->
10 </ propertyChanged >
11 </ control >
12
Sys.UI.Behavior类是一个静态类,不能直接实例化,Atlas框架已经实现有几个字类,其中包括HoverBehavior类,这个类专门用于执行鼠标进入、退出目标对象所欲发生的 动作(Action) ,(关于Behaviors以及如何扩展自己的Behaviors,dflying在这两篇文章中已经讲的非常清楚了:1:使用ASP.NET Atlas开发实时验证用户名是否被注册的自定义Behavior ;2:在ASP.NET Atlas中创建自定义的Behavior)。
那么,我们再来看看HoverBehaviors的Xml Script定义:
1
<
hoverBehavior
>
2 < bindings >
3 <!-- bindings -->
4 </ bindings >
5 < hover >
6 <!-- actions -->
7 </ hover >
8 < propertyChanged >
9 <!-- actions -->
10 </ propertyChanged >
11 < unhover >
12 <!-- actions -->
13 </ unhover >
14 </ clickBehavior >
15
发hoverBehavior具有hover字节点,而hover中定义的又是actions。同样的Action也是静态类,从Action派生有一个InvokeMethodAction(调用方法Action)。2 < bindings >
3 <!-- bindings -->
4 </ bindings >
5 < hover >
6 <!-- actions -->
7 </ hover >
8 < propertyChanged >
9 <!-- actions -->
10 </ propertyChanged >
11 < unhover >
12 <!-- actions -->
13 </ unhover >
14 </ clickBehavior >
15
至此,我们基本清楚,要完成任务,我们至少需要有一个InvokeMethodAction实例、一个HoverBehavior实例,还有一个PopupBehavior实例。
具体如何实现呢?下面是完整的代码,每行都有注释:
1
function
CreatePopupMessage(sender , popupElement)
2 {
3 // 创建Atlas Sys.UI.Control 类实例
4 // 此Atlas控件绑定至HTML 元素popupElement
5 var c = new Sys.UI.Control(popupElement);
6 // 初始化Atlas控件
7 c.initialize();
8
9 // 创建Sys.UI.PopupBehavior实例
10 // PopupBehavior类型继承自Sys.UI.Behavior
11 // PopupBehavior控件实现类似于ToolTip(ASP.net服务器控件属性)或tilte(HTML 元素特性)的加强版功能
12 var popupBehavior = new Sys.UI.PopupBehavior();
13
14 // 设置Popup动作的所有者,类似于ToolTip或title的提示方框
15 // 在这里我们可以对这个“提示方框”进行很好的外观控制
16 popupBehavior.setOwner(c);
17
18 // 设置Popup动作发生的父对象
19 popupBehavior.set_parentElement(sender);
20
21 // 设置Popup动作发生时类似于ToolTip或tilte的提示框显示的位置
22 popupBehavior.set_positioningMode(Sys.UI.PositioningMode.Absolute );
23 popupBehavior.set_y(20);
24
25 // 初始化popupBehavior控件
26 popupBehavior.initialize();
27
28 // 那么,上面的popup又将如何被激活呢?
29 // 这就需要应用到调用方法动作类:InvokeMethodAction
30 // InvokeMethodAction需要指定目标动作对象和目标动作中的具体方法
31 // InvokeMethodAction类似于C#中的委托、事件???
32
33 // 创建InvokeMethodAction实例
34 var newAction = new Sys.InvokeMethodAction();
35
36 // 设置InvokeMethodAction的目标为上面创建的popupBehavior
37 newAction.set_target(popupBehavior);
38 // 设置调用的方法,popupBehavior.show();
39 newAction.set_method("show");
40 // 初始化控件
41 newAction.initialize();
42
43 // 另一个方法调用Action
44 var uAction = new Sys.InvokeMethodAction();
45 uAction.initialize();
46 uAction.set_target(popupBehavior);
47 uAction.set_method("hide");
48
49 // 最后,上述过程又是如何被实现调用的呢?
50 // 我们还是以鼠标进入目标控件为例来说明
51
52 // 首先实例一HoverBehavior类
53 var hBehavior = new Sys.UI.HoverBehavior();
54
55 // 设置HoverBehavior动作的检测对象
56 var timeControl = new Sys.UI.Control(sender);
57 timeControl.initialize();
58
59 // 设置HoverBehavior动作的所有者
60 hBehavior.setOwner(timeControl);
61 hBehavior.initialize();
62
63 // 最后将Action添加至Hover的相关事件
64 hBehavior.hover.addAction(newAction);
65 hBehavior.unhover.addAction(uAction);
66}
67
然后在page_load中调用:2 {
3 // 创建Atlas Sys.UI.Control 类实例
4 // 此Atlas控件绑定至HTML 元素popupElement
5 var c = new Sys.UI.Control(popupElement);
6 // 初始化Atlas控件
7 c.initialize();
8
9 // 创建Sys.UI.PopupBehavior实例
10 // PopupBehavior类型继承自Sys.UI.Behavior
11 // PopupBehavior控件实现类似于ToolTip(ASP.net服务器控件属性)或tilte(HTML 元素特性)的加强版功能
12 var popupBehavior = new Sys.UI.PopupBehavior();
13
14 // 设置Popup动作的所有者,类似于ToolTip或title的提示方框
15 // 在这里我们可以对这个“提示方框”进行很好的外观控制
16 popupBehavior.setOwner(c);
17
18 // 设置Popup动作发生的父对象
19 popupBehavior.set_parentElement(sender);
20
21 // 设置Popup动作发生时类似于ToolTip或tilte的提示框显示的位置
22 popupBehavior.set_positioningMode(Sys.UI.PositioningMode.Absolute );
23 popupBehavior.set_y(20);
24
25 // 初始化popupBehavior控件
26 popupBehavior.initialize();
27
28 // 那么,上面的popup又将如何被激活呢?
29 // 这就需要应用到调用方法动作类:InvokeMethodAction
30 // InvokeMethodAction需要指定目标动作对象和目标动作中的具体方法
31 // InvokeMethodAction类似于C#中的委托、事件???
32
33 // 创建InvokeMethodAction实例
34 var newAction = new Sys.InvokeMethodAction();
35
36 // 设置InvokeMethodAction的目标为上面创建的popupBehavior
37 newAction.set_target(popupBehavior);
38 // 设置调用的方法,popupBehavior.show();
39 newAction.set_method("show");
40 // 初始化控件
41 newAction.initialize();
42
43 // 另一个方法调用Action
44 var uAction = new Sys.InvokeMethodAction();
45 uAction.initialize();
46 uAction.set_target(popupBehavior);
47 uAction.set_method("hide");
48
49 // 最后,上述过程又是如何被实现调用的呢?
50 // 我们还是以鼠标进入目标控件为例来说明
51
52 // 首先实例一HoverBehavior类
53 var hBehavior = new Sys.UI.HoverBehavior();
54
55 // 设置HoverBehavior动作的检测对象
56 var timeControl = new Sys.UI.Control(sender);
57 timeControl.initialize();
58
59 // 设置HoverBehavior动作的所有者
60 hBehavior.setOwner(timeControl);
61 hBehavior.initialize();
62
63 // 最后将Action添加至Hover的相关事件
64 hBehavior.hover.addAction(newAction);
65 hBehavior.unhover.addAction(uAction);
66}
67
CreatePopupMessage($("TimeSpan"), $("PopupDIV"));
OK。(后续……)
http://luna.cnblogs.com/archive/2006/05/31/414299.html