轻装上阵Html5游戏开发，JEESJS（三）

这里介绍下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 );