本文中，我们将探讨如何创建一个使用ASP.NET 2.0 AJAX扩展特征的ASP.NET Web服务器控件以扩展浏览器端功能。然后，我们可以使用一个客户端控件实现把这种新功能添加到客户端文档对象模型（DOM）元素中。
实现initialize和dispose方法
当创建该控件的一个实例时，需要调用initialize方法。在这个方法中，需要设置缺省的属性值，创建函数委托，并且把委托添加为事件处理器。
本文中Samples.EnhancedTextBox类的initialize方法完成如下任务：
①调用Sys.UI.Control基类的initialize方法；
②调用addHandlers方法以便把事件委托添加为相关的HTML元素()的onfocus和onblur事件的处理器。
当页面中不再使用该控件的一个实例并且将删除之时，调用dispose方法。使用这个方法可以释放该控件不再要求使用的任何资源—例如DOM事件处理器。
本文中Samples.EnhancedTextBox类的dispose方法完成如下任务：
◆调用clearHandlers方法来清除作为相关联的DOM元素的onfocus和onblur事件处理器的事件委托。
◆调用基类Control的dispose方法。
【注意】一个客户端类的dispose方法可能不止一次被调用。因此，在编写dispose方法的内容时应该注意这一点。
下列示例展示Samples.EnhancedTextBox prototype中initialize和dispose方法的实现。
initialize : function() {
Samples.EnhancedTextBox .callBaseMethod(this， 'initialize');
this._onfocusHandler = Function.createDelegate(this， this._onFocus);
this._onblurHandler = Function.createDelegate(this， this._onBlur);
$addHandlers(this.get_element()，
{ 'focus' : this._onFocus，
'blur' : this._onBlur }，
this);
this.get_element().className = this._nohighlightCssClass;
}，
dispose : function() {
$clearHandlers(this.get_element());
Samples.EnhancedTextBox .callBaseMethod(this， 'dispose');
}
|
注册控件
创建客户端控件的最后一项任务是通过调用registerClass方法注册客户端类。因为该类是一个客户端控件，对registerClass方法的调用需要包括要注册的JavaScript类名，还应指定Control为基类。
下列代码展示了Samples.EnhancedTextBox控件中对registerClass方法的调用。注意，后面还包括一个对Sys.Application对象的notifyScriptLoaded方法的调用。为了通知微软AJAX库JavaScript文件已经加载，必须调用这个方法。
Samples.EnhancedTextBox .registerClass('Samples.EnhancedTextBox '， Sys.UI.Control);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
|
下面是这个客户端控件—Samples.EnhancedTextBox的完整代码：
//注册控件相应的命名空间
Type.registerNamespace('Samples');
//定义控件属性
Samples.EnhancedTextBox = function(element) {
Samples.EnhancedTextBox .initializeBase(this， [element]);
this._highlightCssClass = null;
this._nohighlightCssClass = null;
}
//
//创建控件的prototype
//
Samples.EnhancedTextBox .prototype = {
initialize : function() {
Samples.EnhancedTextBox .callBaseMethod(this， 'initialize');
this._onfocusHandler = Function.createDelegate(this， this._onFocus);
this._onblurHandler = Function.createDelegate(this， this._onBlur);
$addHandlers(this.get_element()，
{ 'focus' : this._onFocus，
'blur' : this._onBlur }，
this);
this.get_element().className = this._nohighlightCssClass;
}，
dispose : function() {
$clearHandlers(this.get_element());
Samples.EnhancedTextBox .callBaseMethod(this， 'dispose');
}，
//事件委托
_onFocus : function(e) {
if (this.get_element() && !this.get_element().disabled) {
this.get_element().className = this._highlightCssClass;
}
}，
_onBlur : function(e) {
if (this.get_element() && !this.get_element().disabled) {
this.get_element().className = this._nohighlightCssClass;
}
}，
//控件属性
get_highlightCssClass : function() {
return this._highlightCssClass;
}，
set_highlightCssClass : function(value) {
if (this._highlightCssClass !== value) {
this._highlightCssClass = value;
this.raisePropertyChanged('highlightCssClass');
}
}，
get_nohighlightCssClass : function() {
return this._nohighlightCssClass;
}，
set_nohighlightCssClass : function(value) {
if (this._nohighlightCssClass !== value) {
this._nohighlightCssClass = value;
this.raisePropertyChanged('nohighlightCssClass');
}
}
}
//相应于JSON串行化的可选描述符
Samples.EnhancedTextBox .descriptor = {
properties: [ {name: 'highlightCssClass'， type: String}，
{name: 'nohighlightCssClass'， type: String} ]
}
//把该类注册为一个继承自Sys.UI.Control的类型
Samples.EnhancedTextBox .registerClass('Samples.EnhancedTextBox '， Sys.UI.Control);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
|
在此，我们看到了相对模块化和面向对象化的JavaScript编程。而且，在属性descriptor的定义中还使用了JSON表示方式，从而进一步简化了JavaScript编程。
据估计，ASP.NET 2.0 AJAX框架小组有可能在未来的版本中在上面的js编辑器中加入对JavaScript以及框架特有语法的智能感知支持；这样的话，一切将趋于完美。
京公网安备 11010802021500号