随笔- 16 文章- 3 评论- 102

Atlas客户端类库、控件介绍（2）

今日任务：
　　在HTML元素中，实现鼠标的over、out事件非常简单，将onmouseover、onmouseout关联至相应的javascript函数即可。同样的，在Atlas框架模型里，需要实现同样的功能，又该如何设计呢？

　　根据Atlas Doc的介绍，可以有两种实现方式：1、Xml Script定义；2、JavaScript。

解决问题：

　　我们首先来看看Atlas 中的Sys.UI.Control在Xml Script定义方式下的格式：

<control>
2

<behaviors>
3

4

</behaviors>
5

<bindings>
6

7

</bindings>
8

<propertyChanged>
9

10

</propertyChanged>
11

</control>
12

　　我们看到Control具体behaviors集合。
Sys.UI.Behavior类是一个静态类，不能直接实例化，Atlas框架已经实现有几个字类，其中包括HoverBehavior类，这个类专门用于执行鼠标进入、退出目标对象所欲发生的动作（Action），（关于Behaviors以及如何扩展自己的Behaviors，dflying在这两篇文章中已经讲的非常清楚了：1：使用ASP.NET Atlas开发实时验证用户名是否被注册的自定义Behavior ；2：在ASP.NET Atlas中创建自定义的Behavior）。

　　那么，我们再来看看HoverBehaviors的Xml Script定义：

<hoverBehavior>
2

<bindings>
3

4

</bindings>
5

<hover>
6

7

</hover>
8

<propertyChanged>
9

10

</propertyChanged>
11

<unhover>
12

13

</unhover>
14

</clickBehavior>
15

　　发hoverBehavior具有hover字节点，而hover中定义的又是actions。同样的Action也是静态类，从Action派生有一个InvokeMethodAction（调用方法Action）。

　　至此，我们基本清楚，要完成任务，我们至少需要有一个InvokeMethodAction实例、一个HoverBehavior实例，还有一个PopupBehavior实例。

　　具体如何实现呢？下面是完整的代码，每行都有注释：

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

// 创建Sys.UI.PopupBehavior实例
10

// PopupBehavior类型继承自Sys.UI.Behavior
11

// PopupBehavior控件实现类似于ToolTip(ASP.net服务器控件属性)或tilte(HTML 元素特性)的加强版功能
12

var popupBehavior = new Sys.UI.PopupBehavior();
13

// 设置Popup动作的所有者，类似于ToolTip或title的提示方框
15

// 在这里我们可以对这个“提示方框”进行很好的外观控制
16

popupBehavior.setOwner(c);
17

// 设置Popup动作发生的父对象
19

popupBehavior.set_parentElement(sender);
20

// 设置Popup动作发生时类似于ToolTip或tilte的提示框显示的位置
22

popupBehavior.set_positioningMode(Sys.UI.PositioningMode.Absolute );
23

popupBehavior.set_y(20);
24

// 初始化popupBehavior控件
26

popupBehavior.initialize();
27

// 那么，上面的popup又将如何被激活呢？
29

// 这就需要应用到调用方法动作类：InvokeMethodAction
30

// InvokeMethodAction需要指定目标动作对象和目标动作中的具体方法
31

// InvokeMethodAction类似于C#中的委托、事件？？？
32

// 创建InvokeMethodAction实例
34

var newAction = new Sys.InvokeMethodAction();
35

// 设置InvokeMethodAction的目标为上面创建的popupBehavior
37

newAction.set_target(popupBehavior);
38

// 设置调用的方法，popupBehavior.show()；
39

newAction.set_method("show");
40

// 初始化控件
41

newAction.initialize();
42

// 另一个方法调用Action
44

var uAction = new Sys.InvokeMethodAction();
45

uAction.initialize();
46

uAction.set_target(popupBehavior);
47

uAction.set_method("hide");
48

// 最后，上述过程又是如何被实现调用的呢？
50

// 我们还是以鼠标进入目标控件为例来说明
51

// 首先实例一HoverBehavior类
53

var hBehavior = new Sys.UI.HoverBehavior();
54

// 设置HoverBehavior动作的检测对象
56

var timeControl = new Sys.UI.Control(sender);
57

timeControl.initialize();
58

// 设置HoverBehavior动作的所有者
60

hBehavior.setOwner(timeControl);
61

hBehavior.initialize();
62

// 最后将Action添加至Hover的相关事件
64

hBehavior.hover.addAction(newAction);
65

hBehavior.unhover.addAction(uAction);
66

}
67

　　然后在page_load中调用：
　　 CreatePopupMessage($("TimeSpan"), $("PopupDIV"));
　　
　　OK。（后续……）

posted @ 2006-05-31 21:32 V.Enjoy 阅读(1383) 评论(5) 编辑收藏网摘所属分类: C#&Asp.net

发表评论

回复引用查看

#1楼 2006-06-01 08:31 | aspnetx

基本上都看懂了呵呵
期待后续

回复引用

#2楼 2006-06-01 15:59 | ayaya [未注册用户]

配色方案有点晃眼

回复引用

#3楼 2006-09-21 11:26 | ds[匿名] [未注册用户]

用VS2005创建一个基本的Atlas Web应用:http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_89856.html

回复引用查看

#4楼 2007-01-12 15:59 | 山巅

// 创建Atlas Sys.UI.Control 类实例
// 此Atlas控件绑定至HTML 元素popupElement
var c = new Sys.UI.Control(popupElement);

请教：在我的机器上安装的是ASPAJAXExtSetup.msi（2006-12月版的），但安装之后，运行您所给的示例，在Ie中浏览时javascript代码段报错如下：出现运行时间错误，是否调试？行69，错误：缺少对象。然后，就看不到预期的效果。

我觉着大概是缺少某个脚本来解析Sys.UI.Control，但也不知该引入哪个脚本。

请教您，希望不吝赐教！谢谢！

回复引用

#5楼 2007-03-24 12:59 | zick [未注册用户]

@山巅

我也遇到此问题，不知大家有没有找到问题所在原因

新用户注册刷新评论列表