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

　　我们看到Control具体behaviors集合。
      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）。

　　至此，我们基本清楚，要完成任务，我们至少需要有一个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中调用：
　　 CreatePopupMessage($("TimeSpan"), $("PopupDIV"));
　　
　　OK。（后续……）

转载于:https://www.cnblogs.com/Luna/archive/2006/05/31/414299.html