Atlas客户端类库、控件介绍(2)
今日任务:
在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![](/Images/OutliningIndicators/None.gif)
我们看到Control具体behaviors集合。![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
发hoverBehavior具有hover字节点,而hover中定义的又是actions。同样的Action也是静态类,从Action派生有一个InvokeMethodAction(调用方法Action)。![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
至此,我们基本清楚,要完成任务,我们至少需要有一个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![](/Images/OutliningIndicators/None.gif)
然后在page_load中调用:![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
67
![](/Images/OutliningIndicators/None.gif)
CreatePopupMessage($("TimeSpan"), $("PopupDIV"));
OK。(后续……)