Asp.Net Ajax 学习笔记25 利用Microsoft AJAX Library开发客户端组件（下）

这次课程的首先将$create方法的详细签名描述了一遍。

$create( type, properties, events,references, element);

那么什么时references呢？references是一个字典，保存了对象属性与其它对象的关系，key是属性名，value是其他对象id。保证在initialize方法被调用时属性已经被设置为所需对象，即使调用$create方法时其他对象还没有创建。这个意思就是说，可以在create时，创建本组件的一个属性，这个属性保存的是其他对象的ID（可以说是引用）。在创建对象的properties和events时，可以使用json字符串的形式来描述。在下面的例子将会演示。

我们将演示一个复合控件， 复合控件主要会涉及到Control模型中的以下两个方法：

1.  raiseBubbleEvent(source, args)：由子控件调用，将触发的事件向父控件传递
2. onBubbleEvent(source, args)：父控件重写该方法，用于接受子控件向上传递过来的事件

这两个方法的主要作用是降低父控件和子控件之间的耦合关系，例如子控件不需要知道它的父控件是谁。

// JScript 文件
Type.registerNamespace("Demo");

//这是一个Button类，他代表一个子元素
Demo.Button = function(element)
...{
    Demo.Button.initializeBase(this, [element]);
    
    this._context = null;
    this._onClickHandler = null;
}

Demo.Button.prototype =
...{
    initialize : function()
    ...{
        Demo.Button.callBaseMethod(this, "initialize");
        
        //创建一个onClickHandler的函数事件，将他根onClick函数绑定
        //在一起，那么调用onClickHandler就是调用onClick函数
        this._onClickHandler = Function.createDelegate(this,
        this._onClick);
        
        //给Button组件里的元素就是是DOM元素里的button的click事件
        //绑定在一起，实际上就是绑定了OnClick函数.这里为什么不直接
        //绑定OnClick函数，因为我们需要通过createDelegate将当前this
        //作为this上下文传递到onClick函数，如果直接绑定，当前this上
        //下文就是DOM元素里的button
        $addHandler(this.get_element(), "click", 
        this._onClickHandler);
    },
    
    dispose : function()
    ...{
        this._onClickHandler = null;
        $clearHandlers(this.get_element());
        
        Demo.Button.callBaseMethod(this, "dispose");
    },
    
    _onClick : function(e)
    ...{
        //将context作为args的参数，传递到外部。
        var eventArgs = new Demo.ButtonClickEventArgs(this._context);
        
        //这里可以不用这个函数，直接调用raiseBubbleEvent
        this.raiseClick(eventArgs);
    },
    
    raiseClick : function(args)
    ...{
        //向父控件传递事件
        this.raiseBubbleEvent(this, args);
    },
    
    get_context : function()
    ...{
        return this._context;
    },
    
    set_context : function(value)
    ...{
        this._context = value;
    }
}


Demo.Button.registerClass("Demo.Button", Sys.UI.Control);

Demo.ButtonClickEventArgs = function(context)
...{
    Demo.ButtonClickEventArgs.initializeBase(this);
    
    this._context = context;
}

Demo.ButtonClickEventArgs.prototype =
...{
    get_context : function()
    ...{
        return this._context;
    }
}

Demo.ButtonClickEventArgs.registerClass("Demo.ButtonClickEventArgs", Sys.EventArgs);

Demo.ButtonList = function(element)
...{
    Demo.ButtonList.initializeBase(this, [element]);
    
    this._itemDataList = null;
}

Demo.ButtonList.prototype = 
...{
    initialize : function()
    ...{
        Demo.ButtonList.callBaseMethod(this, "initialize");
        for(var i = 0; i < this._itemDataList.length; i++)
        ...{
            this._createNewButton(this._itemDataList[i]);
        }
    },
    
    _createNewButton : function(data)
    ...{
        //创建一个button的DOM元素
        var buttonElement = document.createElement("input");
        buttonElement.type = "button";
        buttonElement.value = data.text;
        //当前容器将button放置在本容器中。
        this.get_element().appendChild(buttonElement);
        
        //使用JSon字符串的形式来初始化Demo.Button组件的属性,
        //注意，设置属性没有使用_context和set_context，直接使用的
        //context，这里系统自动转换
        $create(
            Demo.Button,
            ...{
                "context" : data.context,
                "parent" : this
            },
            null,
            null,
            buttonElement
        );
    },
    
    get_itemDataList : function()
    ...{
        return this._itemDataList;
    },
    
    set_itemDataList : function(value)
    ...{
        this._itemDataList = value;
    },
    
    //相当于派生类重写onBubbleEvent函数，当容器里的控件抛出
    //raiseBubbleEvent事件时，这个函数将自动调用
    onBubbleEvent : function(source, e)
    ...{
        //调用raiseItemClick函数
        this.raiseItemClick(e);
        
        //返回true表示，事件不会再向上层的容器控件传递
        return true;
    },
    
    add_itemClick : function(handler)
    ...{
        this.get_events().addHandler("itemClick", handler);
    },
    
    remove_itemClick : function(handler)
    ...{
        this.get_events().removeHandler("itemClick", handler);
    },
    
    raiseItemClick : function(args)
    ...{
        //得到itemClick事件的事件处理器
        var handler = this.get_events().getHandler("itemClick");
        
        if(handler)
        ...{
            //调用外部的定义的itemClick的事件处理器
            handler(this, args);
        }
    }
}

Demo.ButtonList.registerClass("Demo.ButtonList", Sys.UI.Control);

这是容器类和子类的定义。

<div id="buttonList">
            
 </div>

这是容器element的定义

<script language="javascript" type="text/javascript">
    //利用Application初始化ButtonList控件
    Sys.Application.add_init(
        function()
        ...{
            //定一个数组，作为ButtonList的itemDataList属性
            var dataList = 
            [
                ...{
                    text : "Item1",
                    context : "Item1 has been clicked"
                },
                ...{
                    text : "Item2",
                    context : "Item2 has been clicked"
                },
                ...{
                    text : "Item3",
                    context : "Item3 has been clicked"
                }
            ];
            
            $create(
                    Demo.ButtonList,
                    ...{
                        "itemDataList" : dataList
                    },
                    //定义itemClick事件的事件处理器
                    ...{
                        "itemClick" : onItemClick
                    },
                    null,
                   $get("buttonList")
                    
            );
        }
    );
    
    function onItemClick(sender, args)
    ...{
        alert(args.get_context());
    }
</script>

Behavior模型是 另一种可视化组件模型，继承于Sys.UI.Behavior。 Control包装DOM元素，Behavior为DOM元
素提供功能（效果, etc）。 一个DOM元素只能由一个Control来包装，但是可以由多个Behavior进行“装饰”。

Behavior成员• 与Component组件相比唯一增加的属性是name属性。 由于一个DOM元素上可以添加多个Behavior，因此如果要通过元素获得Behavior对象就要通过name属性的值。 通过$get(“eleId”)["name_of_behavior"]来设置。Behavior模型没有示例。