关闭

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

807人阅读 评论(0) 收藏 举报

今日任务:
  在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
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2257863次
    • 积分:25815
    • 等级:
    • 排名:第228名
    • 原创:1篇
    • 转载:1662篇
    • 译文:0篇
    • 评论:98条
    最新评论