I’m having big troubles to handle EditBox with CocosCreator, and as I didn’t found doc nor example with current version (1.0), I need someone who can put me in the right direction (@pandamicro maybe ? )
I have a canvas with several EditBox, and for all EditBox, I’m using the same handler event functions which are located in a JavaScript file related to this canvas.
I’m trying to handle EditBox the same way I did before. For example, my ‘didBegin’ handler is like this:
editBoxDidBegin: function (sender) {
(...)
}
The problem is that when I trace what happen in the debugger:
‘this’ point to the canvas, which is normal
sender is undefined…
How can I know which EditBox is currently beeing edited?
There is no event parameter or anything else related to the edit box event beeing triggered?
Do I need to have a JavaScript file dedicated to handling EditBox events, so I’ll be sure ‘this’ will be related to the EditBox beeing edited?
Not sure if this is ‘the’ way to do it, but at least it do what I wanted so I put it here just in case it may help someone else.
In my main canvas script file, I defined the EditBox components I’m using:
(just showing relevant code, with simplified names and values)
cc.Class({
extends: cc.Component,
properties: {
editBox1: {
default: null,
type: cc.EditBox
},
editBox2: {
default: null,
type: cc.EditBox
}
},
//--------------------------------------
onLoad: function () {
var self = this;
self.editBox1._myTag = 1;
self.editBox1._myDelegate = self;
self.editBox2._myTag = 2;
self.editBox2._myDelegate = self;
},
//--------------------------------------
// EditBox 'delegates' (called by the 'real' delegates)
//--------------------------------------
// This method is called when an edit box gains focus after keyboard is shown.
editBoxEditingDidBegin: function (sender) {
console.log('Inside editBoxEditingDidBegin, modifying editBox' + sender._myTag);
},
//--------------------------------------
// This method is called when an edit box loses focus after keyboard is hidden.
editBoxEditingDidEnd: function (sender) {
console.log('Inside editBoxEditingDidEnd, modified editBox' + sender._myTag');
},
//--------------------------------------
// This method is called when the edit box text was changed.
editBoxTextChanged: function (sender, text) {
console.log('Inside editBoxTextChanged, modifying editBox' + sender._myTag + ' text:' + text);
},
(...)
In those ‘delegates’, sender parameter contain the editBox beeing modified.
Here is the script handling the real delegates of the EditBox, and calling main canvas ‘delegate’ handler:
cc.Class({
extends: cc.Component,
//--------------------------------------
// EditBox delegates
//--------------------------------------
// This method is called when an edit box gains focus after keyboard is shown.
editBoxEditingDidBegin: function () {
var editBox = this.getComponent(cc.EditBox);
editBox._myDelegate.editBoxEditingDidBegin(editBox);
},
//--------------------------------------
// This method is called when an edit box loses focus after keyboard is hidden.
editBoxEditingDidEnd: function () {
var editBox = this.getComponent(cc.EditBox);
editBox._myDelegate.editBoxEditingDidEnd(editBox);
},
//--------------------------------------
// This method is called when the edit box text was changed.
editBoxTextChanged: function (text) {
var editBox = this.getComponent(cc.EditBox);
editBox._myDelegate.editBoxTextChanged(editBox, text);
}
});
Doing this, I’m having the same behaviour than the one I was previously using, with cocos2d-js
Well, if @owen is the father of EditBox, he may help me with an other trouble
I would like to align the text (vertical center & horizontal center would be great, but beeing able to choose would be even better) displayed inside the EditBox before it is edited.
Right now, text inside the EditBox is aligned left: this is fine for me once we begin editing the text, but I would love beeing able to modify text alignment when the text is just displayed inside the EditBox.
Is there any way to do it?
(I checked inside the debugger but didn’t found any label property I could modify)
I will add sender to the callback of EditBox. For the alignment, I’m considering split EditBox into a logic component + a Sprite component + two label components. So we could do more tweak to the EditBox.
But it has to be done along with the native engine and it also might have some back compatibility issues.
Or I could simply add alignment settings for text inside EditBox.
That would be great, thank you.
Cocos Creator is a very nice tool, but I think it should stay as close as possible to previous API, so people will be able to ‘switch’ to it more easily.
About alignment: I think your first suggestion (splitting EditBox into several components, including labels) is more Cocos Creator friendly (same spirit), but do what is the simplest (or more ‘previous API compatible’) to you.
As long as I can change text alignment, I will be happy
hi, can anyone help me with Editbox… when i click on editbox it’s textview(placeholder jump up) and when i off the editbox whitount type it again jump down… how can i have normal editbox. do i need to set anythin
)
