Cocos2d-JS项目之二：studio基础控件的使用

在studio里把几个基础控件往场景文件一拖，然后导出json格式的资源文件

逻辑代码如下：

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    value : 90,
   // self : this,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        var size = cc.winSize;

        this.initUI();

        return true;
    },

    //init ui
    initUI : function(){
        var mainscene = ccs.load(res.MainScene_json);
        this.addChild(mainscene.node);

        var self = this;
        //   btn.addClickEventListener(this.btnClick);
        //   addTouchEventListener(this.backEvent,this);

        var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");
        btn.addClickEventListener(function(){
                cc.log("btn_9 click: %d", self.value);
            });


        var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");
        this.checkBox = checkBox;
        checkBox.addEventListener(this.selectedStateEvent, this);

        //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //
        // addEventListener 在按住并有移动时（值不一定有改变）就触发 //
        var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");
        this.slider = slider;
        slider.addClickEventListener(function(){
            var percent = slider.getPercent();
            cc.log("addClickEventListener   %d", percent);
        });

        slider.addTouchEventListener(function(){
            var percent = slider.getPercent();
            cc.log("addTouchEventListener   %d", percent);
        });

        slider.addEventListener(this.sliderEvent,this);


        var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");
        this.textFiel = textField;
        textField.addEventListener(this.textFieldEvent,this);

        var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");
        this.loadingBar = loadingBar;
       // loadingBar.addTouchEventListener();

        var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");
        this.label = label;

        var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");
        this.image = image;

    },

    selectedStateEvent: function (sender, type) {
        switch (type) {
            case ccui.CheckBox.EVENT_SELECTED:
                //this._topDisplayText.setString("Selected");
                cc.log("checkbox select");
                this.image.setVisible(true);
                break;
            case ccui.CheckBox.EVENT_UNSELECTED:
                //this._topDisplayText.setString("Unselected");
                cc.log("checkbox unselect");
                this.image.setVisible(false);
                break;

            default:
                break;
        }
    },

    sliderEvent: function (sender, type) {
        switch (type) {
            case ccui.Slider.EVENT_PERCENT_CHANGED:
                var slider = sender;
                var percent = slider.getPercent();
               // this._topDisplayText.setString("Percent " + percent.toFixed(0));
                cc.log("addEventListener   %f", percent);
                this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点， 如 123.
                break;
            default:
                break;
        }
    },

    textFieldEvent: function (sender, type) {

        switch (type) {
            //get focus
            case ccui.TextField. EVENT_ATTACH_WITH_IME:
                cc.log("attach with IME");
                break;
            //lost focus
            case ccui.TextField. EVENT_DETACH_WITH_IME:
                cc.log("detach with IME");
                break;
            //insert word
            case ccui.TextField. EVENT_INSERT_TEXT:
                var text = sender.getString();
                var percent = parseInt(text);
                this.loadingBar.setPercent(percent);
              //  cc.log(text);
                break;
            //delete word
            case ccui.TextField. EVENT_DELETE_BACKWARD:
                //cc.log("delete word");
                var text = sender.getString();
                var percent = parseInt(text);
                this.loadingBar.setPercent(percent);
                break;
            default:
                break;
        }
    }

});