Cocos2dx BASICS (14) -- cctextfieldttf, one of the text boxes

[Introduction]

We talked about sprite textures, labels, menus, and buttons. What seems to be missing? Should there be a very important control in the UI control-text box. In mobile online games, start the game. After the opening animation, the first interface displayed is the logon interface of the game. The user name, password, and other information must be entered in the text box. Click Text to bring up the virtual keyboard, enter the account password, and click log on.

The cocos2dx engine provides two types of text box controls:

(1) cctextfieldttf (based on cclabelttf)

(2) cceditbox (based on cccontrolbutton)

This section describes cctextfieldttf.

[References]

Http://gl.paea.cn/contents/ff7cec4ea13b9be4.html

Http://blog.csdn.net/crayondeng/article/details/12175367

[Glossary]

IME: it refers to the Input Method Editors, that is, the input method editor.

[Cctextfieldttf]

Let's take a look at the inheritance relationship of cctextfieldttf:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/2A/wKioL1P3LHHAsUpGAACz2NrDyCU996.jpg "Title =" 1.jpg" alt = "wkiol1p3lhhasupgaacz2nrdycu996.jpg"/>

It can be seen that the parent class of cctextfieldttf is: cclabelttf, and ccimedelegate.

Here, we mentioned previously that cclabelttf is a label class used to display text. The ccimedelegate class mainly provides the virtual keyboard input function for sub-classes.

Based on its inheritance relationship, we can also guess how cctextfield is implemented? This is probablyDynamic cclabelttfDynamically set TAG content by constantly listening to input characters.

Next, let's talk about how to use it!

1. Creation Method

Note:The creation of cctextfieldttf is not based on create,Textfieldwit2d-aceholder.

Class cc_dll cctextfieldttf: Public cclabelttf, public ccimedelegate/*** two methods for creating cctextfieldttf * textfieldwithzaceholder * // placeholder: Default content. That is, the content displayed when the input is empty. // Fontname: Font Resource Name. // Fontsize: font size. // The size of the text box is the size of cclabelttf. During the input process, if the content exceeds the size of the text box, it is automatically expanded. Static cctextfieldttf * textfieldwit2d-aceholder (const char * placeholder, const char * fontname, float fontsize); // placeholder: Default content. That is, the content displayed when the input is empty. // Dimensions: the size of the text box. // Alignment: Alignment of text content. // Kcctextalignmentleft left alignment // kcctextalignmentcenter is centered. The default value is "// kcctextalignmentright". The size of the right alignment // text box is fixed and cannot be expanded. Static Parameters * values (const char * placeholder, const ccsize & dimensions, cctextalignment alignment, const char * fontname, float fontsize);/*** creation method example */cctextfieldttf :: textfieldwit2d-aceholder ("Please click me! "," Marker felt ", 24); cctextfieldttf: textfieldwitplans aceholder (" Please click me! ", Ccsizemake (100,100), cctextalignment: kcctextalignmentcenter," marker felt ", 24 );

2. Common Operations

Delegate object, number of characters, default content and font color, input content and font color.

/*** Property setting * setdelegate, getcharcount, * setplaceholder, setcolorspaceholder, * setstring, setcolor * // sets the delegate object of the virtual keyboard, this // and cclayer must inherit the cctextfielddelegate class of the proxy interface. Cc_synthesize (cctextfielddelegate *, m_pdelegate, delegate); // get the number of characters, read-only getcc_synthesize_readonly (INT, m_ncharcount, charcount); // set the default content of the text box. Virtual void setplaceholder (const char * text); Virtual const char * getplaceholder (); // set the font color of the default text box content. Virtual void setcolorspaceholder (const cccolor3b & color); Virtual const cccolor3b & getcolorspaceholder (); // set the text box input content virtual void setstring (const char * text); Virtual const char * getstring (); // set the font color of the text box. Virtual void setcolor (const cccolor3b & color); Virtual const cccolor3b & setcolor ();

3. functions provided by the parent ccimedelegate to the subclass

Implement the input function of the virtual keyboard.

Virtual bool attachwithime (); // enable the virtual keyboard and allow input. Virtual bool detachwithime (); // close the virtual keyboard and stop the input. // Textfieldttf-> attachwithime ();

4. Event proxy Interface Class cctextfielddelegate

The cctextfielddelegate class is mainly used to listen to the Usage Status of cctextfieldttf and set the callback response function of the event.

Usage: In the cclayer class that creates the cctextfieldttf class, let the cclayer inherit cctextfielddelegate, and rewrite the following four Event Callback response functions.

// The callback function when the user starts the virtual keyboard // enable the keyboard false; disable the keyboard truevirtual bool ontextfieldattachwithime (cctextfieldttf * sender) // callback function when the user disables the virtual keyboard // false when the keyboard is disabled; truevirtual bool ontextfielddetachwithime (cctextfieldttf * sender) when the keyboard is not disabled) // callback function when the user inputs // The input character false is allowed; the input character truevirtual bool ontextfieldinserttext (cctextfieldttf * sender, const char * Text, int nlen) is not allowed) // The callback function when the user deletes text // the false character can be deleted; the truevirtual bool ontextfielddeletebackward (cctextfieldttf * sender, const char * deltext, int nlen) cannot be deleted)

5. Tips

(1) After cctextfieldttf is created, set the delegate object of the text box to the current cclayer layer, that is, setdelegate (this ). Only in this way can the cclayer inherited from cctextfielddelegate respond to the event in the text box and execute the callback function.

(2) determine whether to enable the virtual keyboard by touching the event touch and checking whether the contact is inside the text box. When you touch the internal device, it is enabled. When you touch the external device, it is disabled.

(3) rewrite the four callback functions of cctextfielddelegate to process different status events in the text box.

[Code practice]

(1) Let the helloworld class inherit cocos2d: cctextfielddelegate and rewrite the event listening function. Enable touch events in the helloworld class.

Remember to register and deregister touch events in onenter and onexit!

Class helloworld: Public cocos2d: cclayer, cocos2d: cctextfielddelegate {virtual bool ontextfieldattachwithime (cctextfieldttf * sender ); // The callback function virtual bool ontextfielddetachwithime (cctextfieldttf * sender) when the user starts the virtual keyboard ); // The callback function virtual bool ontextfieldinserttext (cctextfieldttf * sender, const char * Text, int nlen) when the user disables the virtual keyboard ); // The callback function virtual bool ontextfielddeletebackward (cctextfieldttf * sender, const char * deltext, int nlen) when the user inputs ); // callback function when the user deletes text // enable touch virtual bool cctouchbegan (cctouch * touch, ccevent * event); Virtual void cctouchmoved (cctouch * touch, ccevent * event); Virtual void cctouchended (cctouch * touch, ccevent * event); Virtual void onenter (); Virtual void onexit ();};

(2) Create the text box cctextfieldttf in Init () and mark it as tag = 1.

Cctextfieldttf * textfieldttf = cctextfieldttf: equals ("Please input", "marker felt", 24); // cctextfieldttf * textfieldttf = cctextfieldttf: equals ("Please input ", ccsize (100,100), cctextalignment: kcctextalignmentcenter, "Arial", 20); textfieldttf-> setposition (midpos); this-> addchild (textfieldttf, 0, 1 ); // tag flag 1 // set the virtual keyboard delegate object textfieldttf-> setdelegate (this );

(3) Compile the touch Event Callback Function. Determines whether to enable or disable the input function of the virtual keyboard based on the contact position.

Bool helloworld: cctouchbegan (cctouch * touch, ccevent * event) {cclog ("cctouchbegan"); Return true;} void helloworld: cctouchmoved (cctouch * touch, ccevent * event) {cclog ("cctouchmoved");} void helloworld: cctouchended (cctouch * touch, ccevent * event) {cclog ("cctouchended "); // obtain the contact ccpoint Pos = touch-> getlocation (); // obtain the rectcctextfieldttf * textfieldttf = (cctextfieldttf *) This-> getchildbytag (1 ); float x = textfieldttf-> getpositionx ()-textfieldttf-> getcontentsize (). width/2; float y = textfieldttf-> getpositiony ()-textfieldttf-> getcontentsize (). height/2; float width = textfieldttf-> getcontentsize (). width; float Height = textfieldttf-> getcontentsize (). height; ccrect rect = ccrectmake (X, Y, width, height); // determines whether the contact is touched inside the text box if (rect. containspoint (POS) {cclog ("attachwithime"); textfieldttf-> attachwithime (); // enable virtual keyboard} else {cclog ("detachwithime "); textfieldttf-> detachwithime (); // disable the virtual keyboard }}

(4) Compile the callback function of the text box event.

When the virtual keyboard is enabled, the font size is enlarged and the font color is changed.

When the virtual keyboard is disabled and the input is stopped, the font size is restored and the font color is changed.

// The callback function bool helloworld: ontextfieldattachwithime (cctextfieldttf * sender) when the user starts the virtual keyboard {// event processing sender-> setfontsize (30 ); // enlarge the font to 30sender-> setcolor (ccyellow); // content color: *** sender-> setcolorspaceholder (ccwhite); // The default content color: White return false; // enable the keyboard. If the keyboard is not enabled, return true;} // The callback function bool helloworld: ontextfielddetachwithime (cctextfieldttf * sender) when the virtual keyboard is disabled) {// event processing sender-> setfontsize (24); // restores the font size to 24sender-> setcolor (ccorange); // content color: orange sender-> setcolorspaceholder (ccgray); // default content color: Gray return false; // disable the keyboard. If the keyboard is not disabled, return true;} // callback function bool helloworld: ontextfieldinserttext (cctextfieldttf * sender, const char * Text, int nlen) {// event processing cclog ("charcount: % d", sender-> getcharcount (); Return false; // enter the character. Return true;} // callback function bool helloworld: ontextfielddeletebackward (cctextfieldttf * sender, const char * deltext, int nlen) when the user deletes the text) {return false; // delete a character. If you cannot delete the character return true ;}

Running result:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/47/2C/wKioL1P3QjHAk26qABHeUBGjA5c258.gif "Title =" 1.gif" alt = "wkiol1p3qjhak26qabheubgja5c258.gif"/>

Analysis:

(1) If no character is entered in the text box, the default content "Please input" is displayed ". When there is input content in the text box, the text displays the input content.

(2) The size of the text box is automatically expanded based on the size of the input content.

(3) After Entering the content, you can use the Enter key to end the input. You can use the backspace to delete characters.

(4) The most important question is: What about a good virtual keyboard? Why is the 650 entered on the keyboard?) This. width = 650; "src =" http://img.baidu.com/hi/tsj/t_0012.gif "alt =" t_0012.gif "/>. Okay, because Win32 does not have a virtual keyboard. If you want to see the effect of the virtual keyboard, You need to port it to your mobile phone.

The operation on the mobile phone is as follows:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/2D/wKioL1P3U_iijkcwAAAUXLh9rAM607.jpg "style =" float: none; "Title =" Screenshot_2014-08-22-22-13-39.png "alt =" wkiol1p3u_iijkcwaaauxlh9ram607.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/2C/wKiom1P3UuGzULILAAEY0fyArGU597.jpg "style =" float: none; "Title =" Screenshot_2014-08-22-22-15-08.png "alt =" wkiom1p3uugzulilaaey0fyargu597.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/2C/wKiom1P3UuGCEv4tAAAfrDGljZM874.jpg "Title =" Screenshot_2014-08-22-22-16-33.png "style =" float: none; "alt =" wkiom1p3uugcev4taaafrdgljzm874.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/47/2D/wKioL1P3U_nxaTHjAAAVGV4gcYU724.jpg "style =" float: none; "Title =" Screenshot_2014-08-22-22-15-22.png "alt =" wkiol1p3u_nxathjaaavgv4gcyu724.jpg "/>

Are you very excited to see the virtual keyboard! 650) This. width = 650; "src =" http://img.baidu.com/hi/tsj/t_0011.gif "alt =" t_0011.gif "/>

[Demo download]

Http://down.51cto.com/data/1866299

This article is from the "summer wind" blog, please be sure to keep this source http://shahdza.blog.51cto.com/2410787/1543667

Cocos2dx BASICS (14) -- cctextfieldttf, one of the text boxes