How to insert text in CCTextFieldTTF?

Question

I used setString but the string is not updated, so I have to write a CCLabel to show the string, which I feel very weird because showing the user input should be part of the textfield.. Do I missed anything? I read the test_input example, it uses a CCLabel to show the user input, which I think is a really bad design.

Answer 1

CCTextFieldTTF * pTextField = CCTextFieldTTF::textFieldWithPlaceHolder("click here for input",
    "Thonburi",
    20);

addChild(pTextField);

Answer 2

You don't need a Label to show user input.

I have edited the default HelloWorld file with added CCTextFieldttf working example.

This is how your HelloWorld.h file should look

class HelloWorld : public cocos2d::CCLayer, public cocos2d::CCTextFieldDelegate
{
public:

    virtual bool init();

    static cocos2d::CCScene* scene();

    void createTF();
    cocos2d::CCTextFieldTTF* tf;

    virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
    virtual void registerWithTouchDispatcher();

    //CCtextFieldttf delegate begin
    virtual bool onTextFieldAttachWithIME(CCTextFieldTTF * pSender);
    virtual bool onTextFieldDetachWithIME(CCTextFieldTTF * pSender);
    virtual bool onTextFieldInsertText(CCTextFieldTTF * pSender, const char * text, int nLen);
    virtual bool onTextFieldDeleteBackward(CCTextFieldTTF * pSender, const char * delText, int nLen);
    virtual bool onDraw(CCTextFieldTTF * pSender);
    //CCtextFieldttf delegate end

    CREATE_FUNC(HelloWorld);
};

This is how your HelloWorld.cpp should be for minimum usage of CCTextFieldttf

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();

    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    if ( !CCLayer::init() )
    {
        return false;
    }

    this->setTouchEnabled(true);

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

    createTF();

    CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "Arial", 24);

    // position the label on the center of the screen
    pLabel->setPosition(ccp(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - pLabel->getContentSize().height));

    this->addChild(pLabel, 1);

    return true;
}

void HelloWorld::createTF()
{
    tf = CCTextFieldTTF::textFieldWithPlaceHolder("123", CCSizeMake(100, 100), kCCTextAlignmentCenter, "helvetica", 20);
    tf->setColorSpaceHolder(ccWHITE);
    tf->setPosition(ccp(200,200));
    tf->setHorizontalAlignment(kCCTextAlignmentCenter);
    tf->setVerticalAlignment(kCCVerticalTextAlignmentCenter);
    tf->setDelegate(this);
    addChild(tf);
}

void HelloWorld::registerWithTouchDispatcher()
{
    CCDirector* pDirector = CCDirector::sharedDirector();
    pDirector->getTouchDispatcher()->addTargetedDelegate(this, 0, false);
}

bool HelloWorld::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)
{
    CCLog("inside touchbegan");

    return true;
}

void HelloWorld::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{
    CCLog("inside touchend");

    tf->attachWithIME();

}


bool HelloWorld::onTextFieldAttachWithIME(CCTextFieldTTF * pSender)
{

    return false;

}

bool HelloWorld::onTextFieldDetachWithIME(CCTextFieldTTF * pSender)
{
    return false;
}

bool HelloWorld::onTextFieldInsertText(CCTextFieldTTF * pSender, const char * text, int nLen)
{
    return false;
}

bool HelloWorld::onTextFieldDeleteBackward(CCTextFieldTTF * pSender, const char * delText, int nLen)
{
    return false;
}

bool HelloWorld::onDraw(CCTextFieldTTF * pSender)
{
    return false;
}

The CCTextFieldDelegate methods are implemented to gain more control over what is entered into CCTextFieldTTF. The only thing that CCTextFieldttf lacks is you have to call CCTextFieldTTF's attachWithIME() method yourself like in the above code it is being called in "ccTouchEnded".

Answer 3

in header

class CustomMultiplayerScene : public PZGBaseMenuScene,public CCIMEDelegate
{

    public:    
        void keyboardWillShow(cocos2d::CCIMEKeyboardNotificationInfo &info);
        void keyboardWillHide(cocos2d::CCIMEKeyboardNotificationInfo &info);
        void ccTouchesBegan(cocos2d::CCSet *pTouches, cocos2d::CCEvent *pEvent);
    };

in .cpp

    CCTextFieldTTF *textfield = CCTextFieldTTF::textFieldWithPlaceHolder("Enter Name:", CCSize(480,30), kCCTextAlignmentCenter, "Arial", 12);
//    textfield->setAnchorPoint(CCPointZero);
    textfield->setPosition(ccp(screenSize.width/2,200));
    textfield->setTag(100);
    this->addChild(textfield,4);

    CCLabelTTF *label = CCLabelTTF::create("ID : ", "", 12);
    label->setPosition(ccp(screenSize.width/2,100));
    label->setTag(200);
    this->addChild(label,4);

implement methods in .cpp

void CustomMultiplayerScene::keyboardWillShow(CCIMEKeyboardNotificationInfo &info)
{
    CCLOG("keyboardWillShow");

    CCTextFieldTTF *textfield = (CCTextFieldTTF *)this->getChildByTag(100);
    textfield->setString("");
}

void CustomMultiplayerScene::keyboardWillHide(CCIMEKeyboardNotificationInfo &info)
{
    CCLog("keyboardWillHide");

    CCTextFieldTTF *textfield = (CCTextFieldTTF *)this->getChildByTag(100);
    CCLabelTTF *label = (CCLabelTTF *)this->getChildByTag(200);

    label->setString(textfield->getString());
}

void CustomMultiplayerScene::ccTouchesBegan(cocos2d::CCSet *pTouches, cocos2d::CCEvent *pEvent)
{
    CCTouch *pTouch = (CCTouch *)pTouches->anyObject();
    CCPoint point = pTouch->getLocationInView();
    point = CCDirector::sharedDirector()->convertToGL(point);

    CCTextFieldTTF *textfield = (CCTextFieldTTF *)this->getChildByTag(100);
    CCRect rect = textfield->boundingBox();

    if(rect.containsPoint(point)) {
        textfield->attachWithIME();
    }
}