今日任务:
在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实例。
具体如何实现呢?下面是完整的代码,每行都有注释:
1function 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。(后续……)