[Widgets] TextField

Adding A TextField

Drag a TextField from the Widgets section onto the middle canvas.

Selecting The TextField

You can select the TextField if it isn't already selected from the Animation Editor at the bottom. The TextField doesn't appear in the resources as it's part of the Scene or other object that you are using.

Modifying The TextField

You can change the TextField font file. Setting the TextField's font file can be done by double clicking on the section or dragging an image from the Resources section.

Accessing The TextField In Code

TextField's can be accessed via their Name or Tag which can be set in the Properties section.

To access the TextField from a scene for example, in code it is simple. You either access it as a Node or cast it to a TextField allowing you to use TextField methods along with Node methods.

Node *rootNode = CSLoader::createNode( "Filepath to .csb file" );
this->addChild( rootNode );

// textField accessed as a node using it's name
Node *textField = rootNode->getChildByName( "Name set in Cocos Studio" );

// textField cast to a textField using it's name
cocos2d::ui::TextField *textField = ( cocos2d::ui::TextField * )rootNode->getChildByName( "Name set in Cocos Studio" );

// textField accessed as a node using it's tag
Node *textField = rootNode->getChildByTag( 5 );

// textField cast to a textField using it's tag
cocos2d::ui::TextField *textField = ( cocos2d::ui::TextField * )rootNode->getChildByTag( 5 );

var rootNode = ccs.load( "Filepath to .json file" );
this.addChild( rootNode.node );

// get the textField by name
var textField = rootNode.node.getChildByName( "Name set in Cocos Studio" );

// get the textField by tag
var textField = rootNode.node.getChildByTag( 5 );

Note: Cocos2d-JS doesn't require casting to use TextField methods.