ASP.NET AJAX 1.0框架之增强服务器控件的客户端功能(1)(3)

四、创建客户端控件

注意，在上面Web服务器控件中，GetScriptReferences()方法指定一个包含控件类型的客户端代码的JavaScript文件(EnhancedTextBox.js)。在此，我们要详细讨论该文件中的JavaScript代码。

右击“解决方案资源管理器”，选择菜单项“添加新项…”，创建一个JavaScript文件―EnhancedTextBox.js。在此脚本文件中，我们要定义一个客户端控件类，它将通过实现服务器控件提供的IScriptControl接口来建立与前面创建的服务器控件的关联。

注意，该客户端控件代码必须与由GetScriptDescriptors()方法返回的ScriptDescriptor对象中指定的成员相匹配。此外，这个客户端控件完全可以拥有与Web服务器控件类中的成员不相匹配的成员。

本文中的Web服务器控件把该客户端控件的名字设置为Samples.EnhancedTextBox，并且定义该客户端控件的两个属性―highlightCssClass和nohighlightCssClass。

注册客户端命名空间

首先，客户端控件代码必须调用Type类的registerNamespace方法来注册它的命名空间（“Samples”）。下列语句展示如何注册控件的命名空间。

//注册控件的命名空间
Type.registerNamespace('Samples');

定义客户端类

接下来，我们需要定义Samples.EnhancedTextBox类。这个类包括两个Web服务器控件提供的用于存储属性值的属性。它还包括两个指定DOM元素（关联于Samples.EnhancedTextBox控件）的onfocus和onblur事件处理器的事件委托。

下列示例展示了Samples.EnhancedTextBox类的定义。

Samples.EnhancedTextBox  = function(element) { 
    Samples.EnhancedTextBox .initializeBase(this， [element]);
    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

定义类的Prototype（原型）

在定义Samples.EnhancedTextBox类之后，需要在客户端代码中定义该类的prototype。这个prototype中要包括属性的get和set访问器，以及事件处理器，还包括一个initialize方法（当创建该控件的一个实例时调用）和一个dispose方法（当页面中不再要求使用该控件时调用）。

定义DOM元素的事件处理器

一个客户端类的事件处理器被定义为类prototype中的方法。这些处理器关联于事件委托并且关联于浏览器DOM的事件―通过使用addHandlers方法实现（后面将讨论这个方法）。

下列片断展示了Samples.EnhancedTextBox控件的事件处理器方法。

_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和set访问器

每个在服务器控件的GetScriptDescriptors()方法的ScriptDescriptor对象中标识的属性都必须拥有相应的客户端访问器。这些客户端属性访问器被定义为客户端类prototype中的get_<属性名>和set_<属性名>方法。

【注意】JavaScript是大小写敏感的。因此，get和set访问器名称必须准确匹配Web服务器控件的GetScriptDescriptors()方法中的ScriptDescriptor对象中标识的属性名称。

下列的示例展示了相应于Samples.EnhancedTextBox控件的get和set属性访问器。

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');
    }
}