轻装上阵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 );

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

猜你喜欢