這裡介紹下UI的基本類，構建形式參考了createjs，比較清楚的實現了繼承。

Widget裡目前分為了大致2種類型，一個是容器型別，一個是非容器型別。區別在於可新增子控制元件。

基礎類 Widget ：https://github.com/aiyoyoyo/jeesjs/blob/master/src/UI/Widget.js

其他UI控制元件都是繼承的這個型別，方便jeesjs.CM管理公共介面。

需要注意的是 onEvent事件繫結的方法，需要接收2個引數：createjs.Event和jeesjs.Widget或其子類。

function test( _e, _w ){
    // console.log( _e.type ); // 輸出內容"click"
    // console.log( _w.getWidget().id ); // 輸出控制元件的id
｝
new jeesjs.Widget().onEvent( "click", test );
 

面板 Panel ：https://github.com/aiyoyoyo/jeesjs/blob/master/src/UI/Panel.js

繼承至Widget，裡面有2個部分，容器物件 _container和背景_shape。

/**
 * CreateJS繪製容器
 * @property _container
 * @type {createjs.Container}
 */
this._container = new createjs.Container(); // 用來新增新的控制元件，_shape用來顯示和繫結事件。

這裡有個坑，容器如果繫結事件，新增在裡面的控制元件會同時繫結同樣事件。沒想到好的解決辦法，目前先過載了onEvent事件，繫結事件到_shape

/**
 * CreateJS圖形控制元件
 * @property _shape
 * @type {createjs.Shape}
 */
this._shape = new createjs.Shape(); // 用來繪製背景色和繫結事件

下面是過載的widget繫結事件的方法。

/**
 * 自定義繫結事件
 * @method onEvent
 * @param {String} _e 事件比如："click"等。
 * @param {Function( createjs.Event, jeesjs.Widget )} _f( _e, _w ) _e為對應的事件資訊，_w為觸發事件的控制元件Widget
 * @extends
 */
p.onEvent = function( _e, _f ){
    if( typeof _f != "function" ) throw "引數_f不是有效的方法型別";
    this._bind_event( _e, this._shape, _f );
}
/**
 * 解綁控制元件彈起事件
 * @extends
 * @method unEvent
 * @extends
 */
p.unEvent = function( _e ){
    this._unbind_event( _e, this._shape );
};
 

Panel的使用示例：

var Mod_Test = new jeesjs.Module();
ModTest.enter = function(){
    var p = new jeesjs.Panel();     //主面板
    var p2 = new jeesjs.Panel( p ); //子面板
	
    p.onEvent( "click", test );
			
    p2.setColor( "#ffff00" );
    p2.setPosition( 50, 50 );
    p2.onEvent( "click", test );
			
    jeesjs.CM.addWidget( p );
}
jeesjs.APP.init( Mod_Test );