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实例。

  具体如何实现呢?下面是完整的代码,每行都有注释:
 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中调用:
   CreatePopupMessage($("TimeSpan"), $("PopupDIV"));
  
  OK。(后续……)
http://luna.cnblogs.com/archive/2006/05/31/414299.html
阅读更多
个人分类: AJAX系列
想对作者说点什么? 我来说一句

ForceAtlas2图布局算法

2017年09月27日 1.67MB 下载

Atlas控件

2008年04月14日 1.47MB 下载

没有更多推荐了,返回首页

不良信息举报

Atlas客户端类库、控件介绍(2)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭