Implement auto-bind Cocostudioui controls and events in Cocos2d-js (iii)

One, for CC. Node type nodes Register Touch events

The general way of presentation is CC. Node Type Register Touch Event

ctor function() {... This. _label =New... cc.eventManager.addListener ({event:cc. Eventlistener.touch_one_by_one, Swallowtouches:true, Ontouchbegan: This. Ontouchbegan, Ontouchmoved: This. ontouchmoved, ontouchended: This. ontouchended}, This); ...}, Ontouchbegan: function(touch, event) {      //Update label text       This. _label.setstring (' Ontouchbegan '); }, Ontouchmoved: function(touch, event) {      //Update label text       This. _label.setstring (' ontouchmoved '); } ontouchended: function(touch, event) {      //Update label text       This. _label.setstring (' ontouchended '); }

The above code uses Cc.eventmanager to register touch events for the current Cc.node object, requiring a total of 7 lines of code. In the event handler, you want to access the member variable "_label", but using This._label is a common error notation. To access the current member variables normally, you need to modify the following

function(touch, event) {    //需要从event参数中获取当前target对象，target才正是当前layer    var target = event.getCurrentTarget();    target._label.setString(‘onTouchBegan‘);}

Analytical Understanding:

1. The current this object is the first parameter of Cc.eventManager.addListener.
2.event.getcurrenttarget () for the second parameter like Cc.eventManager.addListener.
Therefore, to access the current layer context, you cannot simply use THIS.XXX in the event handler.
People who have generally done C + + know that the class member function uses this to represent the current class instance object, but the this object in JS is different from the function call. How can you write code in the same way as C + + or cocos2d-x, and use this in an event response function to access the current class instance object?

ctor function() {... This. _label =New...varSelf = This; Cc.eventManager.addListener ({event:cc. Eventlistener.touch_one_by_one, Swallowtouches:true,//Note hereOntouchbegan: function(touch, event) {                    returnSelf.ontouchbegan (Touch, event); }            }, This); ...}, Ontouchbegan: function(touch, event) {      //Update label text       This. _label.setstring (' Ontouchbegan '); },

The above code please your own analysis, touchmoved\touchended event I did not give the code to fill the whole.
Summarize:
1. More code, when required for more CC. When a node type control registers an event, the code is difficult to see.
2. Beginners often encounter the this context confusion problem for control events and are prone to errors.
3. With Ccui. The touch event interface for widget type components is not too much, and beginners are difficult to get started with.

My solution to the idea:

1. Reduce the amount of code, one line of code to register events.
2. Try to unify the ccui. Widget and Cc.node Touch event functions for two types of components.
3. Try to keep the original API functional interface, reduce the cost of learning to use.

Sz.uiloader.registerTouchEvent:

Code Demo: Registering touch events for the current this object

function() {    ...    //为当前this对象注册触摸事件    sz.uiloader.registerTouchEvent(this);},//当前对象事件响应函数 function(sender, touch, event) {    ...    returntrue;}

Code Demo: For a CC. Node Object registering Touch Events

ctor: function   ()  { ... var  this . _button = ... //need to set name  for node this . _button.setname ( ' _button ' ); //the first parameter is a touch node, the second parameter is an event response object  sz.uiloader.registerTouchEvent ( this . _button, this ); //button node response function, note function naming: prefix +name+ event name, hump name  _onbuttontouchbegan = function   (sender, touch, event)  { ... this . _button.setposition (...) return  true ;}  

Second, Sz. Uiloader Increased support for cocostudio2.1

COCOS2D-JS 3.3 has been released with support for the cocostudio2.1 UI editor. I simply try to play the next cocostudio2.1 very much like the previous Cocosbuilder editor, from the Resource window, Animation window, Properties window, and so on. One of the things that feels most useful is that the UI interface can be nested inside each other.
Uiloader support for Cocostudio2 is actually very easy, but the UI editing in Cocostudio2 can be nested with each other, nested nodes are CC. Node type. This is not the same as the 1.x version.
The UIL interface generated by the 1.x version is composed of all ccui.widget type nodes.
The UI interface generated by version 2.x is mostly of type ccui.widget, which wraps a Cc.node node when nested.

This is why we have to be in Sz. The cause of the event response of the Cc.node node is first implemented in Uiloader.
The GitHub code has been updated to add Cocostudio2 loading demos and event handling.
At present there is no regular rigorous testing, interested friends can see, please correct me.

Source Address: Https://github.com/ShawnZhang2015/UILoader

Implement auto-bind Cocostudioui controls and events in Cocos2d-js (iii)