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

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

逻辑代码如下：

 var HelloWorldLayer = cc.Layer.extend({
     sprite:null,
     value : ,
    // 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;
         }
     }

 });