在studio里把几个基础控件往场景文件一拖，然后导出json格式的资源文件
逻辑代码如下：
1 var HelloWorldLayer = cc.Layer.extend({
2 sprite:null,
3 value : 90,
4 // self : this,
5 ctor:function () {
6 //////////////////////////////
7 // 1. super init first
8 this._super();
9
10 /////////////////////////////
11 // 2. add a menu item with "X" image, which is clicked to quit the program
12 // you may modify it.
13 // ask the window size
14 var size = cc.winSize;
15
16 this.initUI();
17
18 return true;
19 },
20
21 //init ui
22 initUI : function(){
23 var mainscene = ccs.load(res.MainScene_json);
24 this.addChild(mainscene.node);
25
26 var self = this;
27 // btn.addClickEventListener(this.btnClick);
28 // addTouchEventListener(this.backEvent,this);
29
30 var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");
31 btn.addClickEventListener(function(){
32 cc.log("btn_9 click: %d", self.value);
33 });
34
35
36 var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");
37 this.checkBox = checkBox;
38 checkBox.addEventListener(this.selectedStateEvent, this);
39
40 //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //
41 // addEventListener 在按住并有移动时（值不一定有改变）就触发 //
42 var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");
43 this.slider = slider;
44 slider.addClickEventListener(function(){
45 var percent = slider.getPercent();
46 cc.log("addClickEventListener %d", percent);
47 });
48
49 slider.addTouchEventListener(function(){
50 var percent = slider.getPercent();
51 cc.log("addTouchEventListener %d", percent);
52 });
53
54 slider.addEventListener(this.sliderEvent,this);
55
56
57 var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");
58 this.textFiel = textField;
59 textField.addEventListener(this.textFieldEvent,this);
60
61 var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");
62 this.loadingBar = loadingBar;
63 // loadingBar.addTouchEventListener();
64
65 var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");
66 this.label = label;
67
68 var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");
69 this.image = image;
70
71 },
72
73 selectedStateEvent: function (sender, type) {
74 switch (type) {
75 case ccui.CheckBox.EVENT_SELECTED:
76 //this._topDisplayText.setString("Selected");
77 cc.log("checkbox select");
78 this.image.setVisible(true);
79 break;
80 case ccui.CheckBox.EVENT_UNSELECTED:
81 //this._topDisplayText.setString("Unselected");
82 cc.log("checkbox unselect");
83 this.image.setVisible(false);
84 break;
85
86 default:
87 break;
88 }
89 },
90
91 sliderEvent: function (sender, type) {
92 switch (type) {
93 case ccui.Slider.EVENT_PERCENT_CHANGED:
94 var slider = sender;
95 var percent = slider.getPercent();
96 // this._topDisplayText.setString("Percent " + percent.toFixed(0));
97 cc.log("addEventListener %f", percent);
98 this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点， 如 123.
99 break;
100 default:
101 break;
102 }
103 },
104
105 textFieldEvent: function (sender, type) {
106
107 switch (type) {
108 //get focus
109 case ccui.TextField. EVENT_ATTACH_WITH_IME:
110 cc.log("attach with IME");
111 break;
112 //lost focus
113 case ccui.TextField. EVENT_DETACH_WITH_IME:
114 cc.log("detach with IME");
115 break;
116 //insert word
117 case ccui.TextField. EVENT_INSERT_TEXT:
118 var text = sender.getString();
119 var percent = parseInt(text);
120 this.loadingBar.setPercent(percent);
121 // cc.log(text);
122 break;
123 //delete word
124 case ccui.TextField. EVENT_DELETE_BACKWARD:
125 //cc.log("delete word");
126 var text = sender.getString();
127 var percent = parseInt(text);
128 this.loadingBar.setPercent(percent);
129 break;
130 default:
131 break;
132 }
133 }
134
135 });