Cocostudio Study Notes (2) Button + CheckBox

Cocostudio Study Notes (2) Button + CheckBox

This article records the procedure of using two controls: Button and CheckBox.

Bytes ----------------------------------------------------------------------------------------------------------------------------

Button

Bytes ---------------------------------------------------------------------------------------------------------------------------

Yesterday it was hard to let cocostudio's picture resources run in the cocos2dx project, which is actually a button.
When it comes to buttons, I need to click the button this time to implement the corresponding functions, such as what will happen after the button is pressed.
You can perform the following steps:
1. extract resources from the. json file generated by cocostudio;
2. Find the button we want to use in the extracted resource package;
3. Add the callback function corresponding to the button

Next let's talk about how to implement it: (Friendly reminder: please read the entire blog post and write code)
1. Use this code to extract resources. As mentioned above

auto UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.Json");this->addChild(UI);

Here is something to add, Although auto can automatically convert the UI to the corresponding type after C ++ 11, after all, we are still cainiao. It is not a coincidence if we can make it happen.What type of variables is the UI? Click it and you will find that: Cocos2d: ui: Widget *Type. Therefore, our operations should be:

cocos2d::ui::Widget UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.json");

However, I found that using cocos2d: ui to write this code is very long and troublesome, So I declare the scope on the file:

using namespace cocos2d::ui;

Well, it's much more convenient.

2. Find the button in the resource.I named the button "Button_1" in cocostudio, so I found the button through this name.

Button* closeBt = static_cast<Button*>(Helper::seekWidgetByName(UI,"Button_1"));

After reading this line of code, I feel that I have something to explain:
First, the class name used here is Button, instead of the Menu we commonly use in cocos2dx.The second is what kind of cake is Helper? Click the source code to see (in fact, the above Code will know), it is used to find the corresponding control in the resource, it has three ways to find, as shown below:

Static Widget * seekWidgetByTag (Widget * root, int tag); // find the control static Widget * seekWidgetByName (Widget * root, const char * name) through tag ); // find the control static Widget * seekActionWidgetByActionTag (Widget * root, int tag) by name; // find the action by tag

The comments of the above three lines of code are still clear, so I will not talk about it. The last one is to find the action through tag. In fact, I don't understand it. I will try again later.

3. Since it is a Button, there will certainly be a callback function, but the callback function corresponding to the Button can be different from that of the Menu.
We all know that the format of the called function corresponding to the Menu is as follows:

void menuCallback(Ref* sender);

The format of the callback function corresponding to the Button is as follows:

void menuCallback(Ref* sender,TouchEventType type);

That is, there are more TouchEventTypeParameters of this type, TouchEventType what is TouchEventType?Go to the UIWidget. h source file and see:

typedef enum{    TOUCH_EVENT_BEGAN,    TOUCH_EVENT_MOVED,    TOUCH_EVENT_ENDED,    TOUCH_EVENT_CANCELED}TouchEventType;

From enumeration, we can see that there are four types of TouchEventType, which are similar to onTouchBegan corresponding to cocos2dx touch callback.
Let's leave this TouchEventType empty for the moment. First define this callback function, as shown below:

void HelloWorld::m_callback(Ref* sender,TouchEventType type){CCLOG("haah");}

Run the program. click the button and you will find that "haah" jumps out twice. After several times, you will find the rule, It turns out that a "haah" will pop up at the moment you just clicked, and a "haah" will pop up when you click the end Button". This effect is not what we want now, After all, the one-wife policy is legal.. As a result, TouchEventType has finally come in handy. From the above we know that there are four types of TouchEventType. Next we will use the switch case to determine which type it corresponds to and then perform corresponding operations.

void HelloWorld::m_callback(Ref* sender,TouchEventType type){switch(type){case TOUCH_EVENT_BEGAN:CCLOG("touch began");break;case TOUCH_EVENT_ENDED:CCLOG("touch ended");break;}}

Run the command to see the effect: click the button and then release it. The following two bureaus are output respectively:
Touch began
Touch ended

4. The last prompt is the most important one, that is, you must not forget to add the header file.I will not say more about the header files to be added. In short, it is right to put the following pile of things into it:

#include "editor-support/cocostudio/CCSGUIReader.h"#include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"

It's strange that I'm just taking notes here. How to Write a style is like writing a blog...

Bytes ----------------------------------------------------------------------------------------------------------------------------

CheckBox

Bytes ---------------------------------------------------------------------------------------------------------------------------

Next let's take a look at the CheckBox control. Previously, similar functions of checkBox were implemented on cocos2dx, but they were implemented using a Menu and two images. It can be seen how simple I am.

1 Create a new cocostudio project.Pull a CheckBox control, change the name to "CheckBox", and export the project to the Resources directory of the cocos2dx project.

2. Load the. json file of cocostudio in cocos2dx.

cocos2d::ui::Widget* checkLayout = GUIReader::getInstance()->widgetFromJsonFile("CheckBoxUi_1.json");this->addChild(checkLayout,2);

Run, no problem.

3. Extract the checkBox control in layout and move its position (I learned this time.Check the checkBox API in test)

CheckBox * checkBox = static_cast <CheckBox *> (Helper: seekWidgetByName (checkLayout, "CheckBox"); checkBox-> setPosition (Point (400,300); 4. Enter UICheckBox below. h. Check the checkBox source code. The following APIs are available: // create a checkBoxstatic CheckBox * create (); static CheckBox * create (const std: string & backGround, const std: string & backGroundSeleted, const std :: string & cross, const std: string & backGroundDisabled, const std: string & frontCrossDisabled, TextureResType texType = UI_TEX_TYPE_LOCAL); void setSelectedState (bool selected); // sets the status of the checkBox, true indicates the checked status, and false indicates the unselected status bool getSelectedState (); // gets the checkBox status virtual std: string getDescription () const override; // obtain the widget (CheckBox) in. name in json, for example, the above "CheckBox" // add a call back function wocould called when checkbox is selected or unselected. void addEventListenerCheckBox (Ref * target, SEL_SelectedStateEvent selector); // Add a callback function

5. Create a checkBox. The Code is as follows:

CheckBox * checkBox2 = CheckBox: create ("check_box_normal.png", // The displayed image "check_box_normal_press.png" when not selected, // click the checkBox and then touch the image "check_box_active.png" when not released ", // The displayed image "check_box_normal_disable.png" When selected, // The displayed image "check_box_active_disable.png" when the selected image is not released is touched from the selected switch to the unselected one "); checkBox2-> setPosition (Point (200,200); this-> addChild (checkBox2, 2); // Add the callback function checkBox2-> addEventListenerCheckBox (this, checkboxselectedeventselector (HelloWorld :: checkBoxCallback ));

Let's take a look at the callback function:

void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type){CCLOG("haha");}

After running the program, you can find that when you click checkBox and the checkBox is not selected, enter "haha" and click again. the checkBox outputs "haha" again from the selected to the unselected status ".
The above is the most common test. Next I will try something high-end.To see the second parameter of the callback function: CheckBoxEventType type. First, let's look at the types of CheckBoxEventType:

typedef enum{    CHECKBOX_STATE_EVENT_SELECTED,    CHECKBOX_STATE_EVENT_UNSELECTED}CheckBoxEventType;

Fortunately, there are only two statuses. I am relieved.(Otherwise, how many states can be found in the checkBox ?!). Next we will use the switch case to determine the current status and then proceed accordingly:

Void HelloWorld: checkBoxCallback (Ref * sender, CheckBoxEventType type) {// CCLOG ("haha"); switch (type) {case CHECKBOX_STATE_EVENT_SELECTED: CCLOG ("selected "); // response break when selected; case CHECKBOX_STATE_EVENT_UNSELECTED: CCLOG ("unselected"); // return break when not selected; default: break ;}}

Well, that's it. It's easy to say.

Having gone to bed, I really don't want to stay up late!

Respect Original, reprinted please indicate Source: http://blog.csdn.net/star530/article/details/37362781