登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探  

2010-06-25 12:57:59|  分类: .net技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Hello=new Sys.Preview.UI.Button($get("btnSayHello"));
            btnSayHello.initialize();

      第一行我想大多数人一看就知道是什么意思,因为那个“new”实在太亲切了,这正是创建一个Button的实例,并将其赋给btnSayHello变量。 其中Sys.Preview.UI.Button是Button的完全限定名,而大多数控件的构造函数都需要一个参数,用来指出这个控件要关联到的DOM 元素。而第二行是必须的,在实例化一个控件后,最好马上调用initialize方法,避免一些奇怪的情况发生。

            btnSayHello.add_click(btnSayHello_onClick);

      上面这行代码是将控件的单击事件与btnSayHello_onClick这个函数关联起来。这里我要专门说一下ASP.NET AJAX客户端控件的属性及事件的设置方法。

      ASP.NET AJAX框架规定,在获取一个控件的属性时,应使用“控件名.get_属性名()”这种方法,而设置时则是“控件名.set_属性名()”。为一个控件的 某个事件添加监听函数时,应该用“控件名.add_事件名()”,移除时用“控件名.remove_事件名()”。这是ASP.NET AJAX强制执行的命名规范,所有的客户端控件都遵从这个规则,以后我们在开发自己的客户端组件时,也应该遵从这个规则。

      知道了以上知识,很多代码就很好理解了。例如“lblResult.set_text(resultText);”就是将lblResult控件的text属性设置为resultText。剩下的代码我就不解释了,应该没问题了。

 

剖析客户端组件源代码

      看了上文,不知各位朋友是否有点云里雾里。那么下面,我们一起来剖析一段ASP.NET AJAX客户端组件的源代码,看看客户端组件到底是什么。这里要剖析的是Button控件的源代码,这段代码位于 PreviewScript.debug.js里,代码如下:

 

  1ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境Sys.Preview.UI.Button = function Sys$Preview$UI$Button(associatedElement) {
  2    /// <param name="associatedElement" domElement="true"></param>
  3    var e = Function._validateParams(arguments, [
  4ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        {name: "associatedElement", domElement: true}
  5    ]);
  6    if (e) throw e;
  7
  8    Sys.Preview.UI.Button.initializeBase(this, [associatedElement]);
  9}

 10
 11ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$get_argument() {
 12        /// <value type="String" mayBeNull="true"></value>
 13        if (arguments.length !== 0throw Error.parameterCount();
 14        return this._arg;
 15    }

 16
 17ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$set_argument(value) {
 18ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        var e = Function._validateParams(arguments, [{name: "value", type: String, mayBeNull: true}]);
 19        if (e) throw e;
 20
 21ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        if (this._arg !== value) {
 22            this._arg = value;
 23            this.raisePropertyChanged('argument');
 24        }

 25    }

 26
 27ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$get_command() {
 28        /// <value type="String" mayBeNull="true"></value>
 29        if (arguments.length !== 0throw Error.parameterCount();
 30        return this._command;
 31    }

 32
 33ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$set_command(value) {
 34ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        var e = Function._validateParams(arguments, [{name: "value", type: String, mayBeNull: true}]);
 35        if (e) throw e;
 36
 37ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        if (this._command !== value) {
 38            this._command = value;
 39            this.raisePropertyChanged('command');
 40        }

 41    }

 42
 43ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$initialize() {
 44        Sys.Preview.UI.Button.callBaseMethod(this'initialize');
 45        this._clickHandler = Function.createDelegate(thisthis._onClick);
 46        $addHandler(this.get_element(), "click"this._clickHandler);
 47    }

 48
 49ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$dispose() {
 50ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        if (this._clickHandler) {
 51            $removeHandler(this.get_element(), "click"this._clickHandler);
 52        }

 53        Sys.Preview.UI.Button.callBaseMethod(this'dispose');
 54    }

 55
 56ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$add_click(handler) {
 57ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        var e = Function._validateParams(arguments, [{name: "handler", type: Function}]);
 58        if (e) throw e;
 59
 60        this.get_events().addHandler("click", handler);
 61    }

 62
 63ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$remove_click(handler) {
 64ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        var e = Function._validateParams(arguments, [{name: "handler", type: Function}]);
 65        if (e) throw e;
 66
 67        this.get_events().removeHandler("click", handler);
 68    }

 69
 70ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    function Sys$Preview$UI$Button$_onClick() {
 71        var handler = this.get_events().getHandler("click");
 72ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        if (handler) {
 73            handler(this, Sys.EventArgs.Empty);
 74        }

 75
 76ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境        if (this._command) {
 77            this.raiseBubbleEvent(thisnew Sys.Preview.UI.CommandEventArgs(this._command, this._arg));
 78        }

 79    }

 80ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境Sys.Preview.UI.Button.prototype = {
 81
 82    _command: null,
 83    _arg: null,
 84    _clickHandler: null,
 85    
 86    get_argument: Sys$Preview$UI$Button$get_argument,
 87    
 88    set_argument: Sys$Preview$UI$Button$set_argument,
 89    
 90    get_command: Sys$Preview$UI$Button$get_command,
 91    
 92    set_command: Sys$Preview$UI$Button$set_command,
 93    
 94    initialize: Sys$Preview$UI$Button$initialize,
 95
 96    dispose: Sys$Preview$UI$Button$dispose,
 97    
 98    add_click: Sys$Preview$UI$Button$add_click,
 99
100    remove_click: Sys$Preview$UI$Button$remove_click,
101    
102    _onClick: Sys$Preview$UI$Button$_onClick
103}

104    
105ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境Sys.Preview.UI.Button.descriptor = {
106ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    properties: [ { name: 'command', type: String },
107ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境                  { name: 'argument', type: String } ],
108ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探 - 每天积累一点 - 学无止境    events: [ { name: 'click' } ]
109}

110
111Sys.Preview.UI.Button.registerClass('Sys.Preview.UI.Button', Sys.UI.Control);

 

      乍看之下,代码很复杂,但是如果熟悉JavaScript语言的话,读懂这段代码应该是不成问题的。这里只拣关键的地方解析。

      最开始是定义构造函数,其具体内容不必细究,只需看到,它需要一个参数associatedElement, 即与这个控件想关联的DOM元素。接着定义了两个属性:argument和command,可以看到,它们是符合“get_ set_”规范的。再接下来,是初始化函数和析构函数,再后面,则定义了onclick事件,这个事件也是遵循“add_ remove”语法规范的。接着通过prototype将各个函数与Button组件关联起来,而最后的“Sys.Preview.UI.Button.registerClass('Sys.Preview.UI.Button', Sys.UI.Control);”则是将Button注册成为一个组件,其完全先定名叫做“'Sys.Preview.UI.Button”,而其继承自“Sys.UI.Control”类。

      通过以上简单分析,我们可以发现,所谓的客户端组件,实际上就是封装了DOM元素,用一种我们熟悉的语法封装了晦涩的DOM操作。例如,TextBox的 text属性,其实是封装了type属性为“text”的input元素的value属性。而Button的click事件,其实也就是封装了type属 性为button的input元素的onclick事件。所以,从某种层面上来说,客户端组件其实就是一种“语法糖”,它将晦涩怪异的DOM操作封装成我 们熟悉的控件式语法。

 

探寻客户端组件的家谱

      不知各位朋友有没有发现,在上文中,我有时用“组件”这个词,而有时又用“控件”这个词。那么,“客户端组件”和“客户端控件”一样吗?严格来说,不一 样,客户端控件应该算作客户端组件的一部分。其实,ASP.NET AJAX为我们提供的客户端组件非常丰富,它不仅包含了文本框、复选框、按钮等这些看得见的东西(一般这些看得见的东西可以叫做控件),还有一部分看不见 的组件。如有一种组件叫“行为组件”,它不是一个具体的控件,而是为控件添加一种行为。例如,一般div是没有onclick事件的,但是如果我们给一个 Label控件添加一个“ClickBehavior”组件,则它就可以拥有单击事件,另外常用的行为组件还有使元素具有透明度的 “OpacityBehavior”等。

      还有一种组件,叫做“绑定组件”,它更不是一种具体的控件,而是用来描述多个控件间属性相互绑定的一种关系。另外还有“动画组件”,它可以给元素添加动画效果。

 

 

 

      上图展示了一个不完整的ASP.NET AJAX客户端组件家谱。由于这个家族非常庞大,所以这幅图并没有完全把它们表示出来,而只是表示出一个骨架。从图上可以看出,所以组件均继承自Componet类。

      总体来说,ASP.NET AJAX客户端组件分为一下几类:

      *Control:基本UI组件,包括TextBox、Button等。

      *Behavior:行为组件,用于给组件添加行为。

      *Action:动作响应组件,响应特定的动作。

      *Animation:动画组件,用来给组件添加动画效果。

      *Data:数据组件,包括DataView等与数据显示有关的组件。

      *Validator:验证组件,用于用户输入数据的验证。

      *Drag:拖放组件,用于创建可拖放式的Ajax应用。

      *Bind:绑定组件,用于实现绑定技术。

      *Counter:客户端计数器。

      *Timer:客户端定时器,用于定时触发事件。

      这里就不对各种组件做一一介绍,具体请参考微软官方的Roadmap文档:http://www.asp.net/ajax/documentation/live

 

结束语

      通过本文,朋友们应该对组件思想进行JavaScript编程有了一个了解。并且通过分析,也明白了ASP.NET AJAX客户端组件的本质。当然,严格说,这里仅仅介绍了“控件”的本质,而其他组件则没有介绍,有兴趣的朋友可以读读它的源代码。最后我们从全景的方式 看了看客户端组件的家谱。限于篇幅,不可能对每个组件进行详尽介绍,具体可以参考相关文档。在下一篇中,将通过实例介绍行为组件和绑定技术。并介绍一种新 的JavaScript编程方式:xml-script。

      本文用到的例子可以在这里下载:ASPNETAJAXTest1.rar

  评论这张
 
阅读(605)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018