{"_id":"547b1cd74366a708001b3b58","category":{"_id":"5463e333447e0a100024a08b","project":"5463e333447e0a100024a087","pages":["5463e334447e0a100024a08d","54646a285871e90800f50174","54667e7af2b6390800dfd82a","54679c8c98b6840800268982","54679d8498b6840800268987","546a2ed0394c861a00c3a413","546b6a4862515a14007ebbba","547b1c2e7eec0f080099e1dd","55d33d90b9ef4435006dec70","56570c764d1c720d001f51bb"],"version":"5463e333447e0a100024a08a","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-11-12T22:46:11.951Z","from_sync":false,"order":1,"slug":"documentation","title":"Documentation"},"user":"54639d06447e0a1000249f7f","version":{"_id":"5463e333447e0a100024a08a","project":"5463e333447e0a100024a087","__v":6,"createdAt":"2014-11-12T22:46:11.486Z","releaseDate":"2014-11-12T22:46:11.486Z","categories":["5463e333447e0a100024a08b","54645c365871e90800f50151","547b1c5a4366a708001b3b50","547b1cdf4366a708001b3b5a","54e3bef8464a9c3700f7ca67","54ec651d7ab3172d00c01ab7"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"5463e333447e0a100024a087","__v":71,"updates":["5579e08834ca680d00fc41d6","571492049eb7280e008d1d49"],"next":{"pages":[],"description":""},"createdAt":"2014-11-30T13:34:15.898Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":11,"body":"UI elements allow complex menus and other game interfaces to be created. UI is an extension to Cocos and therefore needs to be added so your project can make use of it. The code is already there but it just needs to be included so it can be used.\n\nUI elements like most things in Cocos are nodes hence all the functions for nodes can be used on them.\n\n##**Setting Up A Cocos2d-JS Project For UI Elements**\n\nOpen the **project.json** file which is located at the root of your project. Modify the following line:\n\n*\"modules\" : [\"cocos2d\"],*\n\nso it includes the extensions module:\n\n*\"modules\" : [\"cocos2d\", \"extensions\"],*\n\nExample **project.json**:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"project_type\\\": \\\"javascript\\\",\\n\\n    \\\"debugMode\\\" : 1,\\n    \\\"showFPS\\\" : true,\\n    \\\"frameRate\\\" : 60,\\n    \\\"id\\\" : \\\"gameCanvas\\\",\\n    \\\"renderMode\\\" : 0,\\n    \\\"engineDir\\\":\\\"frameworks/cocos2d-html5\\\",\\n\\n    \\\"modules\\\" : [\\\"cocos2d\\\"],\\n\\n    \\\"jsList\\\" : [\\n        \\\"src/resource.js\\\",\\n        \\\"src/app.js\\\"\\n    ]\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Before extensions addition\"\n    },\n    {\n      \"code\": \"{\\n    \\\"project_type\\\": \\\"javascript\\\",\\n\\n    \\\"debugMode\\\" : 1,\\n    \\\"showFPS\\\" : true,\\n    \\\"frameRate\\\" : 60,\\n    \\\"id\\\" : \\\"gameCanvas\\\",\\n    \\\"renderMode\\\" : 0,\\n    \\\"engineDir\\\":\\\"frameworks/cocos2d-html5\\\",\\n\\n    \\\"modules\\\" : [\\\"cocos2d\\\", \\\"extensions\\\"],\\n\\n    \\\"jsList\\\" : [\\n        \\\"src/resource.js\\\",\\n        \\\"src/app.js\\\"\\n    ]\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"After extensions addition\"\n    }\n  ]\n}\n[/block]\n\n##**Setting Up A Cocos2d-x C++ Project For UI Elements**\n\nIn any .h or .cpp file you would like to use UI elements inside add the following code to the top of the page:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#include \\\"extensions/cocos-ext.h\\\"\\n#include \\\"ui/CocosGUI.h\\\"\\n\\nUSING_NS_CC_EXT;\\nusing namespace ui; // if this line isn't included then each UI object will need to be created using ui::\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Headers and Namespaces\"\n    }\n  ]\n}\n[/block]\nThe following will work for iOS but for Android a bit of extra code is required. Open the **Android.mk** file located in at **ProjectRoot/proj.android/jni/**. Add the following code to the file:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// this should be added below the other LOCAL_WHOLE_STATIC_LIBRARIES inside the file\\nLOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static\\nLOCAL_WHOLE_STATIC_LIBRARIES += cocos_ui_static\\n\\n// this should be added below the other module imports inside the file\\n$(call import-module,extensions)\\n$(call import-module,ui)\",\n      \"language\": \"cplusplus\"\n    }\n  ]\n}\n[/block]\nNote: *The above lines maybe already exist inside the **Android.mk** file. If there is a **#** at the start of the line then it is commented out. To uncomment it just simply remove the **#***\n\nExample **Android.mk**:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"LOCAL_PATH := $(call my-dir)\\n\\ninclude $(CLEAR_VARS)\\n\\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d)\\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/external)\\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/cocos)\\n\\nLOCAL_MODULE := cocos2dcpp_shared\\n\\nLOCAL_MODULE_FILENAME := libcocos2dcpp\\n\\nLOCAL_SRC_FILES := hellocpp/main.cpp \\\\\\n                   ../../Classes/AppDelegate.cpp \\\\\\n                   ../../Classes/HelloWorldScene.cpp\\n\\nLOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes\\n\\nLOCAL_WHOLE_STATIC_LIBRARIES := cocos2dx_static\\nLOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static\\n\\n# LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocosbuilder_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += spine_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static\\n\\n\\ninclude $(BUILD_SHARED_LIBRARY)\\n\\n$(call import-module,.)\\n$(call import-module,audio/android)\\n\\n# $(call import-module,Box2D)\\n# $(call import-module,editor-support/cocosbuilder)\\n# $(call import-module,editor-support/spine)\\n# $(call import-module,editor-support/cocostudio)\\n# $(call import-module,network)\\n# $(call import-module,extensions)\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Before extensions addition\"\n    },\n    {\n      \"code\": \"LOCAL_PATH := $(call my-dir)\\n\\ninclude $(CLEAR_VARS)\\n\\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d)\\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/external)\\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/cocos)\\n\\nLOCAL_MODULE := cocos2dcpp_shared\\n\\nLOCAL_MODULE_FILENAME := libcocos2dcpp\\n\\nLOCAL_SRC_FILES := hellocpp/main.cpp \\\\\\n                   ../../Classes/AppDelegate.cpp \\\\\\n                   ../../Classes/HelloWorldScene.cpp\\n\\nLOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes\\n\\nLOCAL_WHOLE_STATIC_LIBRARIES := cocos2dx_static\\nLOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static\\n\\n# LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocosbuilder_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += spine_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static\\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static\\n LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static\\n LOCAL_WHOLE_STATIC_LIBRARIES += cocos_ui_static\\n\\n\\ninclude $(BUILD_SHARED_LIBRARY)\\n\\n$(call import-module,.)\\n$(call import-module,audio/android)\\n\\n# $(call import-module,Box2D)\\n# $(call import-module,editor-support/cocosbuilder)\\n# $(call import-module,editor-support/spine)\\n# $(call import-module,editor-support/cocostudio)\\n# $(call import-module,network)\\n $(call import-module,extensions)\\n $(call import-module,ui)\",\n      \"language\": \"cplusplus\",\n      \"name\": \"After extensions addition\"\n    }\n  ]\n}\n[/block]\n##**UIButton** - a clickable button\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Button *button = Button::create( \\\"Normal image filepath\\\", \\\"Selected image filepath\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var button = new ccui.Button();\\nbutton.loadTextures( \\\"Normal image filepath\\\", \\\"Selected image filepath\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nTo detect when the user interacts with the button a touch event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void touchEvent( Ref *sender, Widget::TouchEventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the button is constructed)\\nbutton->addTouchEventListener( CC_CALLBACK_2( ClassName::touchEvent, this ) );\\n\\n// this is called when the user interacts with the button\\nvoid ClassName::touchEvent( Ref *sender, Widget::TouchEventType type )\\n{\\n    switch (type)\\n    {\\n        case Widget::TouchEventType::BEGAN:\\n      \\t\\t\\t// code to handle when the button is first clicked\\n            break;\\n            \\n        case Widget::TouchEventType::MOVED:\\n      \\t\\t\\t// code to handle when the user is moving their finger/cursor whilst clicking the button\\n            break;\\n            \\n        case Widget::TouchEventType::ENDED:\\n\\t\\t\\t\\t\\t\\t// code to handle when the button click has ended (e.g. finger is lifted off the screen)\\n            break;\\n            \\n        case Widget::TouchEventType::CANCELED:\\n      \\t\\t\\t// code to handle when the button click has been cancelled,  this is usually handled the same way as ENDED in most applications (e.g. another application takes control of the device)\\n            break;\\n            \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the button is constructed)\\nbutton.addTouchEventListener( this.touchEvent, this );\\n\\n// this is called when the user interacts with the button\\ntouchEvent: function(sender, type)\\n{\\n    switch (type)\\n    {\\n        case ccui.Widget.TOUCH_BEGAN:\\n            // code to handle when the button is first clicked\\n\\n            break;\\n\\n        case ccui.Widget.TOUCH_MOVED:\\n            // code to handle when the user is moving their finger/cursor whilst clicking the button\\n\\n            break;\\n\\n        case ccui.Widget.TOUCH_ENDED:\\n            // code to handle when the button click has ended (e.g. finger is lifted off the screen)\\n\\n            break;\\n\\n        case ccui.Widget.TOUCH_CANCELLED:\\n            // code to handle when the button click has been cancelled,  this is usually handled the same way as ENDED in most applications (e.g. another application takes control of the device)\\n\\n            break;                \\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UICheckBox** - a checkbox for binary selection\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"CheckBox *checkBox = CheckBox::create( \\\"Checkbox normal image file path\\\", \\n                                       \\\"Checkbox normal pressed image filepath\\\", \\n                                       \\\"Checkbox active image filepath\\\", \\n                                       \\\"Checkbox normal disabled image filepath\\\", \\n                                       \\\"Checkbox active disabled image filepath\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var checkBox = new ccui.CheckBox( );\\ncheckBox.loadTextures( \\\"Checkbox normal image file path\\\", \\n                       \\\"Checkbox normal pressed image filepath\\\", \\n                       \\\"Checkbox active image filepath\\\", \\n                       \\\"Checkbox normal disabled image filepath\\\", \\n                       \\\"Checkbox active disabled image filepath\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nTo detect when the user interacts with the checkbox a touch event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void selectedEvent( Ref *sender, CheckBox::EventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the checkbox is constructed)\\ncheckBox->addEventListener( CC_CALLBACK_2( ClassName::selectedEvent, this ) );\\n\\n// this is called when the user interacts with the checkbox\\nvoid ClassName::selectedEvent(Ref *sender, CheckBox::EventType type )\\n{\\n    switch (type)\\n    {\\n        case CheckBox::EventType::SELECTED:\\n      \\t\\t\\t// code for when the checkbox has been clicked and is now selected (binary 1)\\n            break;\\n            \\n        case CheckBox::EventType::UNSELECTED:\\n      \\t\\t\\t// code for when the checkbox has been clicked and is now not selected (binary 0)\\n            break;\\n            \\n        default:\\n            break;\\n    }   \\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the checkbox is constructed)\\ncheckBox.addEventListener( this.selectedStateEvent, this );\\n\\n// this is called when the user interacts with the checkbox\\nselectedStateEvent: function ( sender, type )\\n{\\n    switch ( type )\\n    {\\n        case ccui.CheckBox.EVENT_SELECTED:\\n            // code for when the checkbox has been clicked and is now selected (binary 1)\\n            break;\\n        \\n        case ccui.CheckBox.EVENT_UNSELECTED:\\n            // code for when the checkbox has been clicked and is now not selected (binary 0)\\n            break;\\n        \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UIEditBox** - an input field\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ui::EditBox *editName = ui::EditBox::create( Size( 900, 60 ), ui::Scale9Sprite::create( \\\"Background image file path\\\" ) );\\neditName->setPosition( Vec2( origin.x + visibleSize.width / 2, origin.y + visibleSize.height * 3 / 4 ) );\\neditName->setFontName( \\\"Font location\\\" );\\neditName->setFontSize( 25 );\\neditName->setFontColor( Color3B::RED );\\neditName->setPlaceHolder( \\\"Name:\\\" );\\neditName->setPlaceholderFontColor( Color3B::WHITE );\\neditName->setMaxLength( 8 );\\neditName->setReturnType( ui::EditBox::KeyboardReturnType::DONE );\\neditName->setDelegate( this );\\nthis->addChild( editName );\\n\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    }\n  ]\n}\n[/block]\nTo detect when the user interacts with the EditBox your class will need to inherit from EditBoxDelegate.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"class ClassName : public cocos2d::Layer\\n  \\n// becomes\\n  \\nclass ClassName : public cocos2d::Layer, public cocos2d::ui::EditBoxDelegate\\n\\nvirtual void editBoxEditingDidBegin( cocos2d::ui::EditBox *editBox );\\nvirtual void editBoxEditingDidEnd( cocos2d::ui::EditBox *editBox );\\nvirtual void editBoxTextChanged( cocos2d::ui::EditBox *editBox, const std::string &text );\\nvirtual void editBoxReturn( cocos2d::ui::EditBox *editBox );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"void ClassName::editBoxEditingDidBegin( cocos2d::ui::EditBox *editBox )\\n{\\n    log( \\\"Did Begin\\\" );\\n}\\n\\nvoid ClassName::editBoxEditingDidEnd( cocos2d::ui::EditBox *editBox )\\n{\\n    log( \\\"Did End\\\");\\n}\\n\\nvoid ClassName::editBoxTextChanged( cocos2d::ui::EditBox *editBox, const std::string &text )\\n{\\n    log( \\\"Text Changed, text: %s\\\", text.c_str( ) );\\n}\\n\\nvoid ClassName::editBoxReturn( ui::EditBox *editBox )\\n{\\n    log( \\\"Returned\\\" );\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    }\n  ]\n}\n[/block]\n##**UIImageView** - simply displays an arbitrary image \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ImageView *imageView = ImageView::create( \\\"Image filepath\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var imageView = new ccui.ImageView( );\\nimageView.loadTexture( \\\"Image filepath\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UILayout** - allows you to group nodes together\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Layout *layout = Layout::create( );\\n// Layout::Type::VERTICAL, Layout::Type::HORIZONTAL, Layout::Type::ABSOLUTE or Layout::Type::RELATIVE\\nlayout->setLayoutType( Layout::Type::VERTICAL );\\n// Widget::SizeType::ABSOLUTE or Widget::SizeType::PERCENT\\nlayout->setSizeType( Widget::SizeType::ABSOLUTE );\\nlayout->setSizePercent( Vec2( 0.5, 0.5 ) );\\n// Widget::PositionType::ABSOLUTE or Widget::PositionType::PERCENT\\nlayout->setPositionType( Widget::PositionType::ABSOLUTE );\\nlayout->setPositionPercent( Vec2( 0.25, 0.25 ) );\\n// Layout::BackGroundColorType::GRADIENT, Layout::BackGroundColorType::NONE or Layout::BackGroundColorType::SOLID\\nlayout->setBackGroundColorType( Layout::BackGroundColorType::GRADIENT );\\nlayout->setBackGroundColor( Color3B::GRAY );\\n\\n// add node to layout\\nlayout->addChild( nodeToAdd );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var layout = new ccui.Layout();\\n// LINEAR_HORIZONTAL or LINEAR_VERTICAL\\nlayout.setLayoutType( ccui.Layout.LINEAR_HORIZONTAL );\\n// ccui.Widget.SIZE_PERCENT or ccui.Widget.SIZE_ABSOLUTE\\nlayout.sizeType = ccui.Widget.SIZE_PERCENT;\\nlayout.setSizePercent( cc.p( 0.5, 0.5 ) );\\n// ccui.Widget.POSITION_PERCENT or ccui.Widget.POSITION_ABSOLUTE\\nlayout.setPositionType( ccui.Widget.POSITION_PERCENT );\\nlayout.setPositionPercent( cc.p( 0.25, 0.25 ) );\\n// ccui.Layout.BG_COLOR_GRADIENT, ccui.Layout.BG_COLOR_NONE or ccui.Layout.BG_COLOR_SOLID\\nlayout.setBackGroundColorType( ccui.Layout.BG_COLOR_SOLID );\\nlayout.setBackGroundColor( cc.color.GRAY );\\n\\n// add node to layout\\nlayout.addChild( nodeToAdd );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UIListView** - a view allowing you to contain other UI elements which the user can scroll through\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ListView *listView = ListView::create( );\\n// scroll direction (ui::ScrollView::Direction::VERTICAL or ui::ScrollView::Direction::HORIZONTAL)\\nlistView->setDirection( ui::ScrollView::Direction::VERTICAL );\\nlistView->setClippingEnabled( false );\\nlistView->setPosition( Vec2( visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y ) );\\nlistView->setTouchEnabled( true );\\nlistView->setBounceEnabled( true );\\n// option\\nlistView->setBackGroundImage( \\\"Background image filepath\\\" );\\n\\n// add a UI element to the list view\\nlistView->pushBackCustomItem( customItem );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var listView = new ccui.ListView( );\\n// scrol direction (ccui.ScrollView.DIR_VERTICAL or ccui.ScrollView.DIR_HORIZONTAL)\\nlistView.setDirection( ccui.ScrollView.DIR_VERTICAL );\\nlistView.setTouchEnabled( true );\\nlistView.setBounceEnabled( true );\\n// optional\\nlistView.setBackGroundImage( \\\"Background image filepath\\\" );\\n\\n// add a UI element to the list view\\nlistView.pushBackCustomItem( customItem );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nTo detect when the user interacts with the list view a touch event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void selectedItemEvent( Ref *sender, ListView::EventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the list view is constructed)\\nlistView->addEventListener(  CC_CALLBACK_2( ClassName::selectedItemEvent, this ) );\\n\\n// this is called when the user interacts with the list view\\nvoid ClassName::selectedItemEvent( Ref *sender, ui::ListView::EventType type )\\n{\\n    ui::ListView *listView = static_cast<ui::ListView *>( sender );\\n    \\n    switch ( type )\\n    {\\n        case ui::ListView::EventType::ON_SELECTED_ITEM_START:\\n\\n            log( \\\"select child start index = %ld\\\", listView->getCurSelectedIndex( ) );\\n            \\n            break;\\n            \\n        case ui::ListView::EventType::ON_SELECTED_ITEM_END:\\n            log( \\\"select child end index = %ld\\\", listView->getCurSelectedIndex( ) );\\n            \\n            break;\\n            \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the list view is constructed)\\nlistView.addEventListener(this.selectedItemEvent, this);\\n\\n// this is called when the user interacts with the list view\\nselectedItemEvent: function ( sender, type )\\n{\\n    switch ( type )\\n    {\\n        case ccui.ListView.EVENT_SELECTED_ITEM:\\n            cc.log( \\\"select child index = \\\" + sender.getCurSelectedIndex( ) );\\n            break;\\n        \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UILoadingBar** - a UI element used to visualise the progress of a operation inside the game\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"LoadingBar *loadingBar = LoadingBar::create( \\\"Loading bar image filepath\\\" );\\n// set the increment of the loading bar (ranges from 0 - 100)\\nloadingBar->setPercent( 0 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var loadingBar = new ccui.LoadingBar( );\\nloadingBar.loadTexture( \\\"Loading bar image filepath\\\" );\\n// set the increment of the loading bar (ranges from 0 - 100)\\nloadingBar.setPercent( 0 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Cocos handles the incrementation, so the texture that is set just needs to be the bar fully loaded*\n\n##**UIPageView** - allows the user to scroll through different pages (layouts)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"PageView *pageView = PageView::create( );\\npageView->setTouchEnabled( true );\\npageView->setContentSize( Size( 240.0, 900.0 ) );\\npageView->setAnchorPoint( Vec2( 0.5, 0.5 ) );\\n\\nLayout *layout = Layout::create( );\\nlayout->setContentSize( Size( 240.0, 900.0 ) );\\n// add a node to the layout (multiple nodes can be added to the layout)\\nlayout->addChild( elementToAddToLayout );\\n\\n// add a layout as a page\\npageView->addPage( layout );\\n// add a layout as a page at a certain index\\npageView->insertPage( layout, 1 );\\n\\n// remove a particular page\\npageView->removePageAtIndex( 0 );\\n// remove all the pages\\npageView->removeAllPages( );\\n\\n// scroll to a particular page\\npageView->scrollToPage( 2 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var pageView = new ccui.PageView( );\\npageView.setTouchEnabled( true );\\npageView.setContentSize( cc.size( 240.0, 900.0 ) );\\npageView.setAnchorPoint( cc.p( 0.5, 0.5 ) );\\n\\nvar layout = new ccui.Layout( );\\nlayout.setContentSize( cc.size( 240.0, 900.0 ) );\\n// add a node to the layout (multiple nodes can be added to the layout)\\nlayout.addChild( elementToAddToLayout );\\n\\n// add a layout as a page\\npageView.addPage( layout );\\n// add a layout as a page at a certain index\\npageView.insertPage( layout, 1 );\\n\\n// remove a particular page\\npageView.removePageAtIndex( 0 );\\n// remove all the pages\\npageView.removeAllPages( );\\n\\n// scroll to a particular page\\npageView.scrollToPage( 2 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Each layout corresponds to a page in the pageview*\n\nTo detect when the user interacts with the page view a touch event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void pageViewEvent( Ref *sender, PageView::EventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the page view is constructed)\\npageView->addEventListener( CC_CALLBACK_2( ClassName::pageViewEvent, this ) );\\n\\n// this is called when the user interacts with the page view\\nvoid ClassName::pageViewEvent( Ref *sender, PageView::EventType type )\\n{\\n    switch ( type )\\n    {\\n        case PageView::EventType::TURNING:\\n            PageView *pageView = dynamic_cast<PageView *>( sender );\\n            \\n            CCLOG( \\\"%i\\\", pageView->getCurPageIndex( ) );\\n            break;\\n            \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the page view is constructed)\\npageView.addEventListener( this.pageViewEvent, this );\\n\\n// this is called when the user interacts with the page view\\npageViewEvent: function ( sender, type )\\n{\\n    switch ( type )\\n    {\\n        case ccui.PageView.EVENT_TURNING:\\n            var pageView = sender;\\n        \\n        \\t\\tcc.log( \\\"Current page \\\" + pageView.getCurPageIndex( ) );\\n            \\n            break;\\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UIRichText** - a UI text element which is comprised of several rich text items. Each item has it's own properties such as colour and size\n\n**Example format:**\n\n*RichTextItem( stringID, colour, alpha, stringToDisplay, fontToUse );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"RichText *richText = RichText::create( );\\n// sets whether or not the element resizes based on its content aka rich text items added below\\nrichText->ignoreContentAdaptWithSize( false );\\nrichText->setContentSize( Size( 120, 100 ) );\\n\\nRichElementText *re1 = RichElementText::create( 1, Color3B::WHITE, 255, \\\"This color is white\\\", \\\"Font filepath\\\", 10 );\\nRichElementText *re2 = RichElementText::create( 2, Color3B::YELLOW, 255, \\\"And this is yellow. \\\", \\\"Font filepath\\\", 10 );\\nRichElementText *re3 = RichElementText::create( 3, Color3B::BLUE, 255, \\\"This one is blue. \\\", \\\"Font filepath\\\", 10 );\\nRichElementText *re4 = RichElementText::create( 4, Color3B::GREEN, 255, \\\"And this is Green. \\\", \\\"Font filepath\\\", 25 );\\nRichElementText *re5 = RichElementText::create( 5, Color3B::RED, 255, \\\"This is well red . \\\", \\\"Font filepath\\\", 10 );\\nRichElementText *re6 = RichElementText::create( 6, Color3B::ORANGE, 255, \\\"WELL DONE AT THE END. \\\", \\\"Font filepath\\\", 10 );\\n\\n// add all the rich text items\\nrichText->pushBackElement( re1 );\\nrichText->pushBackElement( re2 );\\nrichText->pushBackElement( re3 );\\nrichText->pushBackElement( re4 );\\nrichText->pushBackElement( re5 );\\n// insert the element at a particular index\\nrichText->insertElement( re6, 5 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var richText = new ccui.RichText( );\\n// sets whether or not the element resizes based on its content aka rich text items added below\\nrichText.ignoreContentAdaptWithSize( false );\\nrichText.width = 120;\\nrichText.height = 100;\\n\\nvar re1 = new ccui.RichElementText( 1, cc.color.WHITE, 255, \\\"This color is white\\\", \\\"Font filepath\\\", 10 );\\nvar re2 = new ccui.RichElementText( 2, cc.color.YELLOW, 255, \\\"And this is yellow. \\\", \\\"Font filepath\\\", 10 );\\nvar re3 = new ccui.RichElementText( 3, cc.color.BLUE, 255, \\\"This one is blue. \\\", \\\"Font filepath\\\", 10 );\\nvar re4 = new ccui.RichElementText( 4, cc.color.GREEN, 255, \\\"And this is Green. \\\", \\\"Font filepath\\\", 25 );\\nvar re5 = new ccui.RichElementText( 5, cc.color.RED, 255, \\\"This is well red . \\\", \\\"Font filepath\\\", 10 );\\nvar re6 = new ccui.RichElementText( 6, cc.color.ORANGE, 255, \\\"WELL DONE AT THE END. \\\", \\\"Font filepath\\\", 10 );\\n\\n// add all the rich text items\\nrichText.pushBackElement( re1 );\\nrichText.pushBackElement( re2 );\\nrichText.pushBackElement( re3 );\\nrichText.pushBackElement( re4 );\\nrichText.pushBackElement( re5 );\\n// insert the element at a particular index\\nrichText.insertElement( re6, 5 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UIScrollView** - scroll through nodes\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ui::ScrollView *scrollView = ui::ScrollView::create( );\\n\\nscrollView->setDirection( ui::ScrollView::Direction::VERTICAL );\\nscrollView->setContentSize( Size( 300, 200 ) );\\nscrollView->setInnerContainerSize( Size( 1280, 2500 ) );\\nscrollView->setBackGroundImage( \\\"HelloWorld.png\\\" );\\nscrollView->setBounceEnabled( true );\\nscrollView->setAnchorPoint( Vec2( 0.5, 0.5 ) );\\nscrollView->setPosition( Vec2( visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y) );\\n\\nfor ( int i = 0; i < 50; i++ )\\n{\\n    ui::Button *button = ui::Button::create( \\\"CloseNormal.png\\\", \\\"CloseSelected.png\\\" );\\n    button->setPosition( Vec2( scrollView->getContentSize( ).width / 2, i * 50 ) );\\n    scrollView->addChild( button );\\n}\\nthis->addChild( scrollView );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scrollView = new ccui.ScrollView( );\\n// ccui.ScrollView.DIR_VERTICAL or ccui.ScrollView.DIR_HORIZONTAL\\nscrollView.setDirection( ccui.ScrollView.DIR_VERTICAL );\\nscrollView.setTouchEnabled( true );\\nscrollView.setBounceEnabled( true );\\n// optional\\nscrollView.setBackGroundImage( \\\"Background image filepath\\\" );\\n// visible scroll view size\\nscrollView.setContentSize( cc.size( 300, 200 ) );\\n// total scroll view size\\nscrollView.setInnerContainerSize( cc.size( 1280, 2500 ) );\\nscrollView.setAnchorPoint( cc.p( 0.5, 0.5 ) );\\n\\n// add a node to the scroll view\\nscrollView.addChild( nodeToAdd );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *ScrollView requires the namespace **ui::** otherwise it is ambiguous*\n\n##**UISlider** - slider to control a variable\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Slider *slider = Slider::create( );\\nslider->setTouchEnabled( true );\\nslider->loadBarTexture( \\\"Slider background filepath\\\" );\\nslider->loadSlidBallTextures( \\\"Slider button filepath\\\", \\\"Slider button clicked filepath\\\", \\\"\\\" );\\nslider->loadProgressBarTexture( \\\"Progress bar filepath\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var slider = new ccui.Slider( );\\nslider.setTouchEnabled( true );\\nslider.loadBarTexture( \\\"Slider background\\\" );\\nslider.loadSlidBallTextures( \\\"Slider button\\\", \\\"Slider button clicked\\\", \\\"\\\" );\\nslider.loadProgressBarTexture( \\\"Progress bar\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nTo detect when the user interacts with the slider a touch event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void sliderEvent( Ref *sender, Slider::EventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the slider is constructed)\\nslider->addEventListener( CC_CALLBACK_2( ClassName::sliderEvent, this ) );\\n\\n// this is called when the user interacts with the slider\\nvoid ClassName::sliderEvent( Ref *sender, Slider::EventType type )\\n{\\n    if (type == Slider::EventType::ON_PERCENTAGE_CHANGED)\\n    {\\n        Slider* slider = dynamic_cast<Slider*>( sender );\\n        int percent = slider->getPercent( );\\n        CCLOG( \\\"%i\\\", percent );\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the slider is constructed)\\nslider.addEventListener( this.sliderEvent, this );\\n\\n// this is called when the user interacts with the slider\\nsliderEvent: function( sender, type )\\n{\\n    switch (type)\\n    {\\n        case ccui.Slider.EVENT_PERCENT_CHANGED:\\n            cc.log(\\\"Percent \\\" + sender.getPercent().toFixed(0));\\n\\n            break;\\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UIText** - a simple text element\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// the final parameter is the font size\\nText *text = Text::create( \\\"String to display\\\", \\\"Font filepath\\\", 32 );\\ntext->ignoreContentAdaptWithSize( false );\\n\\n// TextHAlignment::LEFT, TextHAlignment::CENTER or TextHAlignment::RIGHT\\ntext->setTextHorizontalAlignment( TextHAlignment::CENTER );\\n// TextVAlignment::LEFT, TextVAlignment::CENTER or TextVAlignment::RIGHT\\ntext->setTextVerticalAlignment( TextVAlignment::CENTER );\\n\\ntext->setTouchScaleChangeEnabled( true );\\ntext->setTouchEnabled( true );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var text = new ccui.Text( );\\ntext.setString( \\\"String to display\\\" );\\ntext.setFontName( \\\"Font filepath\\\" );\\ntext.setFontSize( 32 );\\n// cc.TEXT_ALIGNMENT_LEFT, cc.TEXT_ALIGNMENT_CENTER or cc.TEXT_ALIGNMENT_RIGHT\\ntext.setTextHorizontalAlignment( cc.TEXT_ALIGNMENT_CENTER );\\n// cc.VERTICAL_TEXT_ALIGNMENT_LEFT, cc.VERTICAL_TEXT_ALIGNMENT_CENTER or cc.VERTICAL_TEXT_ALIGNMENT_RIGHT\\ntext.setTextVerticalAlignment( cc.VERTICAL_TEXT_ALIGNMENT_CENTER );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UITextAtlas** - an atlas text string\n\n**Example format:**\n\n*Text( stringToDisplay, characterMapToUse, characterWidth, characterHeight, startingCharacterInTheMap );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"TextAtlas *text = TextAtlas::create( \\\"String to display\\\", \\\"Character map filepath\\\", 5, 5, \\\"2\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var textAtlas = new ccui.TextAtlas( );\\ntextAtlas.setProperty( \\\"String to display\\\", \\\"Character map filepath\\\", 5, 5, \\\"2\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Glypth Designer can be used to create BMFonts **[https://71squared.com/en/glyphdesigner](https://71squared.com/en/glyphdesigner)**\n*\n\n##**UITextBMFont** - an BM Font text string\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"TextBMFont *text = TextBMFont::create( \\\"String to display\\\", \\\"Bitmap font filepath\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var labelBMFont = new ccui.TextBMFont( );\\nlabelBMFont.setFntFile( \\\"Bitmap font filepath\\\" );\\nlabelBMFont.setString( \\\"String to display\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Glypth Designer can be used to create BMFonts **[https://71squared.com/en/glyphdesigner](https://71squared.com/en/glyphdesigner)**\n*\n\n##**UITextField** - provides a means for text input for the user\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// the final parameter is the font size\\nTextField *textField = TextField::create( \\\"Input text here\\\",\\\"Font filepath\\\", 30 );\\n\\ntextField->setTouchEnabled( true );\\n\\n// optional length functions\\ntextField->setMaxLengthEnabled( true );\\ntextField->setMaxLength( 12 );\\n\\n// optional password character mask functions\\ntextField->setPasswordEnabled( true );\\ntextField->setPasswordStyleText( \\\"*\\\" );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var textField = new ccui.TextField( );\\ntextField.setTouchEnabled( true );\\ntextField.fontName = \\\"Font filepath\\\";\\ntextField.placeHolder = \\\"Input text here\\\";\\ntextField.fontSize = 30;\\n\\n// optional length functions\\ntextField.setMaxLengthEnabled( true );\\ntextField.setMaxLength( 12 );\\n\\n// optional password character mask functions\\ntextField.setPasswordEnabled( true );\\ntextField.setPasswordStyleText( \\\"*\\\" );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nTo detect when the user interacts with the text field a touch event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void textFieldEvent( Ref *sender, ui::TextField::EventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the text field is constructed)\\ntextField->addEventListener( CC_CALLBACK_2( ClassName::textFieldEvent, this ) );\\n\\n// this is called when the user interacts with the text field\\nvoid ClassName::textFieldEvent( Ref *sender, ui::TextField::EventType type )\\n{\\n    ui::TextField* textField = dynamic_cast<ui::TextField *>( sender );\\n    \\n    switch (type)\\n    {\\n            // keyboard is activated\\n        case ui::TextField::EventType::ATTACH_WITH_IME:\\n            log( \\\"Keyboard opened\\\" );\\n            break;\\n            \\n            // keyboard is deactivated\\n        case ui::TextField::EventType::DETACH_WITH_IME:\\n            log( \\\"Keyboard closed\\\" );\\n            break;\\n            \\n            // character insertion\\n        case ui::TextField::EventType::INSERT_TEXT:\\n            log( \\\"%s\\\", textField->getString( ).c_str() );\\n            \\n            break;\\n            \\n            // character deletion\\n        case ui::TextField::EventType::DELETE_BACKWARD:\\n            log( \\\"%s\\\", textField->getString( ).c_str( ) );\\n            \\n            break;\\n            \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is used to assign the touch event listener (usually is coded when the text field is constructed)\\ntextField.addEventListener( this.textFieldEvent, this );\\n\\n// this is called when the user interacts with the text field\\ntextFieldEvent: function( sender, type )\\n{\\n    switch ( type )\\n    {\\n        // keyboard is activated\\n        case ccui.TextField.EVENT_ATTACH_WITH_IME:\\n\\n            break;\\n\\n        // keyboard is deactivated\\n        case ccui.TextField.EVENT_DETACH_WITH_IME:\\n\\n            break;\\n\\t\\t\\t\\t\\n        // character insertion\\n        case ccui.TextField.EVENT_INSERT_TEXT:\\n        \\t\\tcc.log( \\\"%s\\\", textField.string );\\n\\n            break;\\n\\n        // character deletion\\n        case ccui.TextField.EVENT_DELETE_BACKWARD:\\n            cc.log( \\\"%s\\\", textField.string );\\n\\n            break;\\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**UIVideoPlayer** - provides a means for playing videos\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"experimental::ui::VideoPlayer *videoPlayer = experimental::ui::VideoPlayer::create( );\\nvideoPlayer->setURL( \\\"Video Url\\\" );\\nvideoPlayer->setContentSize( Size( visibleSize.width,visibleSize.height ) );\\nvideoPlayer->play( );\\nvideoPlayer->setPosition( Vec2( visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y ) );\\nvideoPlayer->setFullScreenEnabled( true );\\n\\nthis->addChild( videoPlayer );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    }\n  ]\n}\n[/block]\nTo detect different state changes for the video play such as playing and pausing an event listener needs to be attached to it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void videoEventCallback( cocos2d::Ref *sender, cocos2d::experimental::ui::VideoPlayer::EventType eventType );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the event listener (usually is coded when the video player is constructed)\\nvideoPlayer->addEventListener( CC_CALLBACK_2( ClassName::videoEventCallback, this ) );\\n\\n// this is called when the video player state changes\\nvoid ClassName::videoEventCallback(Ref* sender, experimental::ui::VideoPlayer::EventType eventType)\\n{\\n    switch ( eventType )\\n    {\\n        case experimental::ui::VideoPlayer::EventType::PLAYING:\\n            log( \\\"Playing\\\" );\\n      \\n            break;\\n      \\n        case experimental::ui::VideoPlayer::EventType::PAUSED:\\n            log( \\\"Paused\\\" );\\n      \\n            break;\\n      \\n        case experimental::ui::VideoPlayer::EventType::STOPPED:\\n            log( \\\"Stopped\\\" );\\n      \\n            break;\\n      \\n        case experimental::ui::VideoPlayer::EventType::COMPLETED:\\n            log( \\\"Completed\\\" );\\n      \\n            break;\\n      \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    }\n  ]\n}\n[/block]\n##**UIWebView** - provides a means for displaying web pages\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"experimental::ui::WebView *webView = experimental::ui::WebView::create( );\\nwebView->setPosition( visibleSize / 2 );\\nwebView->setContentSize( visibleSize * 0.8 );\\nwebView->loadURL( \\\"http://www.google.co.uk\\\" );\\nwebView->setScalesPageToFit( true );\\n\\nwebView->reload( );\\nwebView->goBack( );\\nwebView->goForward( );\\n\\nthis->addChild( webView );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    }\n  ]\n}\n[/block]\nTo detect if the page as loaded or not listeners can be attached to the UIWebView.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"bool onWebViewShouldStartLoading( cocos2d::experimental::ui::WebView *sender, const std::string &url );\\nvoid onWebViewDidFinishLoading( cocos2d::experimental::ui::WebView *sender, const std::string &url );\\nvoid onWebViewDidFailLoading( cocos2d::experimental::ui::WebView *sender, const std::string &url );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is used to assign the listeners (usually is coded when the web view is constructed)\\nwebView->setOnDidFailLoading( CC_CALLBACK_2( ClassName::onWebViewDidFailLoading, this ) );\\nwebView->setOnShouldStartLoading( CC_CALLBACK_2( ClassName::onWebViewShouldStartLoading, this ) );\\nwebView->setOnDidFinishLoading( CC_CALLBACK_2( ClassName::onWebViewDidFinishLoading, this ) );\\n\\nbool ClassName::onWebViewShouldStartLoading( experimental::ui::WebView *sender, const std::string &url )\\n{\\n    log( \\\"Started Loading, url is %s\\\", url.c_str( ) );\\n    \\n    return true;\\n}\\n\\nvoid ClassName::onWebViewDidFinishLoading( experimental::ui::WebView *sender, const std::string &url )\\n{\\n    log( \\\"Finished Loading, url is %s\\\", url.c_str( ) );\\n}\\n\\nvoid ClassName::onWebViewDidFailLoading( experimental::ui::WebView *sender, const std::string &url )\\n{\\n    log( \\\"Failed Loading, url is %s\\\", url.c_str( ) );\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    }\n  ]\n}\n[/block]","excerpt":"This page will cover the UI elements provided as an extension to Cocos.","slug":"ui-elements-such-as-uibutton","type":"basic","title":"UI Elements"}

UI Elements

This page will cover the UI elements provided as an extension to Cocos.

UI elements allow complex menus and other game interfaces to be created. UI is an extension to Cocos and therefore needs to be added so your project can make use of it. The code is already there but it just needs to be included so it can be used. UI elements like most things in Cocos are nodes hence all the functions for nodes can be used on them. ##**Setting Up A Cocos2d-JS Project For UI Elements** Open the **project.json** file which is located at the root of your project. Modify the following line: *"modules" : ["cocos2d"],* so it includes the extensions module: *"modules" : ["cocos2d", "extensions"],* Example **project.json**: [block:code] { "codes": [ { "code": "{\n \"project_type\": \"javascript\",\n\n \"debugMode\" : 1,\n \"showFPS\" : true,\n \"frameRate\" : 60,\n \"id\" : \"gameCanvas\",\n \"renderMode\" : 0,\n \"engineDir\":\"frameworks/cocos2d-html5\",\n\n \"modules\" : [\"cocos2d\"],\n\n \"jsList\" : [\n \"src/resource.js\",\n \"src/app.js\"\n ]\n}", "language": "javascript", "name": "Before extensions addition" }, { "code": "{\n \"project_type\": \"javascript\",\n\n \"debugMode\" : 1,\n \"showFPS\" : true,\n \"frameRate\" : 60,\n \"id\" : \"gameCanvas\",\n \"renderMode\" : 0,\n \"engineDir\":\"frameworks/cocos2d-html5\",\n\n \"modules\" : [\"cocos2d\", \"extensions\"],\n\n \"jsList\" : [\n \"src/resource.js\",\n \"src/app.js\"\n ]\n}", "language": "javascript", "name": "After extensions addition" } ] } [/block] ##**Setting Up A Cocos2d-x C++ Project For UI Elements** In any .h or .cpp file you would like to use UI elements inside add the following code to the top of the page: [block:code] { "codes": [ { "code": "#include \"extensions/cocos-ext.h\"\n#include \"ui/CocosGUI.h\"\n\nUSING_NS_CC_EXT;\nusing namespace ui; // if this line isn't included then each UI object will need to be created using ui::", "language": "cplusplus", "name": "Headers and Namespaces" } ] } [/block] The following will work for iOS but for Android a bit of extra code is required. Open the **Android.mk** file located in at **ProjectRoot/proj.android/jni/**. Add the following code to the file: [block:code] { "codes": [ { "code": "// this should be added below the other LOCAL_WHOLE_STATIC_LIBRARIES inside the file\nLOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static\nLOCAL_WHOLE_STATIC_LIBRARIES += cocos_ui_static\n\n// this should be added below the other module imports inside the file\n$(call import-module,extensions)\n$(call import-module,ui)", "language": "cplusplus" } ] } [/block] Note: *The above lines maybe already exist inside the **Android.mk** file. If there is a **#** at the start of the line then it is commented out. To uncomment it just simply remove the **#*** Example **Android.mk**: [block:code] { "codes": [ { "code": "LOCAL_PATH := $(call my-dir)\n\ninclude $(CLEAR_VARS)\n\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d)\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/external)\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/cocos)\n\nLOCAL_MODULE := cocos2dcpp_shared\n\nLOCAL_MODULE_FILENAME := libcocos2dcpp\n\nLOCAL_SRC_FILES := hellocpp/main.cpp \\\n ../../Classes/AppDelegate.cpp \\\n ../../Classes/HelloWorldScene.cpp\n\nLOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes\n\nLOCAL_WHOLE_STATIC_LIBRARIES := cocos2dx_static\nLOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static\n\n# LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocosbuilder_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += spine_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static\n\n\ninclude $(BUILD_SHARED_LIBRARY)\n\n$(call import-module,.)\n$(call import-module,audio/android)\n\n# $(call import-module,Box2D)\n# $(call import-module,editor-support/cocosbuilder)\n# $(call import-module,editor-support/spine)\n# $(call import-module,editor-support/cocostudio)\n# $(call import-module,network)\n# $(call import-module,extensions)", "language": "cplusplus", "name": "Before extensions addition" }, { "code": "LOCAL_PATH := $(call my-dir)\n\ninclude $(CLEAR_VARS)\n\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d)\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/external)\n$(call import-add-path,$(LOCAL_PATH)/../../cocos2d/cocos)\n\nLOCAL_MODULE := cocos2dcpp_shared\n\nLOCAL_MODULE_FILENAME := libcocos2dcpp\n\nLOCAL_SRC_FILES := hellocpp/main.cpp \\\n ../../Classes/AppDelegate.cpp \\\n ../../Classes/HelloWorldScene.cpp\n\nLOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes\n\nLOCAL_WHOLE_STATIC_LIBRARIES := cocos2dx_static\nLOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static\n\n# LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocosbuilder_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += spine_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static\n# LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static\n LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static\n LOCAL_WHOLE_STATIC_LIBRARIES += cocos_ui_static\n\n\ninclude $(BUILD_SHARED_LIBRARY)\n\n$(call import-module,.)\n$(call import-module,audio/android)\n\n# $(call import-module,Box2D)\n# $(call import-module,editor-support/cocosbuilder)\n# $(call import-module,editor-support/spine)\n# $(call import-module,editor-support/cocostudio)\n# $(call import-module,network)\n $(call import-module,extensions)\n $(call import-module,ui)", "language": "cplusplus", "name": "After extensions addition" } ] } [/block] ##**UIButton** - a clickable button [block:code] { "codes": [ { "code": "Button *button = Button::create( \"Normal image filepath\", \"Selected image filepath\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var button = new ccui.Button();\nbutton.loadTextures( \"Normal image filepath\", \"Selected image filepath\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] To detect when the user interacts with the button a touch event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void touchEvent( Ref *sender, Widget::TouchEventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the touch event listener (usually is coded when the button is constructed)\nbutton->addTouchEventListener( CC_CALLBACK_2( ClassName::touchEvent, this ) );\n\n// this is called when the user interacts with the button\nvoid ClassName::touchEvent( Ref *sender, Widget::TouchEventType type )\n{\n switch (type)\n {\n case Widget::TouchEventType::BEGAN:\n \t\t\t// code to handle when the button is first clicked\n break;\n \n case Widget::TouchEventType::MOVED:\n \t\t\t// code to handle when the user is moving their finger/cursor whilst clicking the button\n break;\n \n case Widget::TouchEventType::ENDED:\n\t\t\t\t\t\t// code to handle when the button click has ended (e.g. finger is lifted off the screen)\n break;\n \n case Widget::TouchEventType::CANCELED:\n \t\t\t// code to handle when the button click has been cancelled, this is usually handled the same way as ENDED in most applications (e.g. another application takes control of the device)\n break;\n \n default:\n break;\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is used to assign the touch event listener (usually is coded when the button is constructed)\nbutton.addTouchEventListener( this.touchEvent, this );\n\n// this is called when the user interacts with the button\ntouchEvent: function(sender, type)\n{\n switch (type)\n {\n case ccui.Widget.TOUCH_BEGAN:\n // code to handle when the button is first clicked\n\n break;\n\n case ccui.Widget.TOUCH_MOVED:\n // code to handle when the user is moving their finger/cursor whilst clicking the button\n\n break;\n\n case ccui.Widget.TOUCH_ENDED:\n // code to handle when the button click has ended (e.g. finger is lifted off the screen)\n\n break;\n\n case ccui.Widget.TOUCH_CANCELLED:\n // code to handle when the button click has been cancelled, this is usually handled the same way as ENDED in most applications (e.g. another application takes control of the device)\n\n break; \n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UICheckBox** - a checkbox for binary selection [block:code] { "codes": [ { "code": "CheckBox *checkBox = CheckBox::create( \"Checkbox normal image file path\", \n \"Checkbox normal pressed image filepath\", \n \"Checkbox active image filepath\", \n \"Checkbox normal disabled image filepath\", \n \"Checkbox active disabled image filepath\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var checkBox = new ccui.CheckBox( );\ncheckBox.loadTextures( \"Checkbox normal image file path\", \n \"Checkbox normal pressed image filepath\", \n \"Checkbox active image filepath\", \n \"Checkbox normal disabled image filepath\", \n \"Checkbox active disabled image filepath\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] To detect when the user interacts with the checkbox a touch event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void selectedEvent( Ref *sender, CheckBox::EventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the touch event listener (usually is coded when the checkbox is constructed)\ncheckBox->addEventListener( CC_CALLBACK_2( ClassName::selectedEvent, this ) );\n\n// this is called when the user interacts with the checkbox\nvoid ClassName::selectedEvent(Ref *sender, CheckBox::EventType type )\n{\n switch (type)\n {\n case CheckBox::EventType::SELECTED:\n \t\t\t// code for when the checkbox has been clicked and is now selected (binary 1)\n break;\n \n case CheckBox::EventType::UNSELECTED:\n \t\t\t// code for when the checkbox has been clicked and is now not selected (binary 0)\n break;\n \n default:\n break;\n } \n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is used to assign the touch event listener (usually is coded when the checkbox is constructed)\ncheckBox.addEventListener( this.selectedStateEvent, this );\n\n// this is called when the user interacts with the checkbox\nselectedStateEvent: function ( sender, type )\n{\n switch ( type )\n {\n case ccui.CheckBox.EVENT_SELECTED:\n // code for when the checkbox has been clicked and is now selected (binary 1)\n break;\n \n case ccui.CheckBox.EVENT_UNSELECTED:\n // code for when the checkbox has been clicked and is now not selected (binary 0)\n break;\n \n default:\n break;\n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UIEditBox** - an input field [block:code] { "codes": [ { "code": "ui::EditBox *editName = ui::EditBox::create( Size( 900, 60 ), ui::Scale9Sprite::create( \"Background image file path\" ) );\neditName->setPosition( Vec2( origin.x + visibleSize.width / 2, origin.y + visibleSize.height * 3 / 4 ) );\neditName->setFontName( \"Font location\" );\neditName->setFontSize( 25 );\neditName->setFontColor( Color3B::RED );\neditName->setPlaceHolder( \"Name:\" );\neditName->setPlaceholderFontColor( Color3B::WHITE );\neditName->setMaxLength( 8 );\neditName->setReturnType( ui::EditBox::KeyboardReturnType::DONE );\neditName->setDelegate( this );\nthis->addChild( editName );\n", "language": "cplusplus", "name": "Cocos2d-x C++" } ] } [/block] To detect when the user interacts with the EditBox your class will need to inherit from EditBoxDelegate. [block:code] { "codes": [ { "code": "class ClassName : public cocos2d::Layer\n \n// becomes\n \nclass ClassName : public cocos2d::Layer, public cocos2d::ui::EditBoxDelegate\n\nvirtual void editBoxEditingDidBegin( cocos2d::ui::EditBox *editBox );\nvirtual void editBoxEditingDidEnd( cocos2d::ui::EditBox *editBox );\nvirtual void editBoxTextChanged( cocos2d::ui::EditBox *editBox, const std::string &text );\nvirtual void editBoxReturn( cocos2d::ui::EditBox *editBox );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "void ClassName::editBoxEditingDidBegin( cocos2d::ui::EditBox *editBox )\n{\n log( \"Did Begin\" );\n}\n\nvoid ClassName::editBoxEditingDidEnd( cocos2d::ui::EditBox *editBox )\n{\n log( \"Did End\");\n}\n\nvoid ClassName::editBoxTextChanged( cocos2d::ui::EditBox *editBox, const std::string &text )\n{\n log( \"Text Changed, text: %s\", text.c_str( ) );\n}\n\nvoid ClassName::editBoxReturn( ui::EditBox *editBox )\n{\n log( \"Returned\" );\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" } ] } [/block] ##**UIImageView** - simply displays an arbitrary image [block:code] { "codes": [ { "code": "ImageView *imageView = ImageView::create( \"Image filepath\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var imageView = new ccui.ImageView( );\nimageView.loadTexture( \"Image filepath\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UILayout** - allows you to group nodes together [block:code] { "codes": [ { "code": "Layout *layout = Layout::create( );\n// Layout::Type::VERTICAL, Layout::Type::HORIZONTAL, Layout::Type::ABSOLUTE or Layout::Type::RELATIVE\nlayout->setLayoutType( Layout::Type::VERTICAL );\n// Widget::SizeType::ABSOLUTE or Widget::SizeType::PERCENT\nlayout->setSizeType( Widget::SizeType::ABSOLUTE );\nlayout->setSizePercent( Vec2( 0.5, 0.5 ) );\n// Widget::PositionType::ABSOLUTE or Widget::PositionType::PERCENT\nlayout->setPositionType( Widget::PositionType::ABSOLUTE );\nlayout->setPositionPercent( Vec2( 0.25, 0.25 ) );\n// Layout::BackGroundColorType::GRADIENT, Layout::BackGroundColorType::NONE or Layout::BackGroundColorType::SOLID\nlayout->setBackGroundColorType( Layout::BackGroundColorType::GRADIENT );\nlayout->setBackGroundColor( Color3B::GRAY );\n\n// add node to layout\nlayout->addChild( nodeToAdd );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var layout = new ccui.Layout();\n// LINEAR_HORIZONTAL or LINEAR_VERTICAL\nlayout.setLayoutType( ccui.Layout.LINEAR_HORIZONTAL );\n// ccui.Widget.SIZE_PERCENT or ccui.Widget.SIZE_ABSOLUTE\nlayout.sizeType = ccui.Widget.SIZE_PERCENT;\nlayout.setSizePercent( cc.p( 0.5, 0.5 ) );\n// ccui.Widget.POSITION_PERCENT or ccui.Widget.POSITION_ABSOLUTE\nlayout.setPositionType( ccui.Widget.POSITION_PERCENT );\nlayout.setPositionPercent( cc.p( 0.25, 0.25 ) );\n// ccui.Layout.BG_COLOR_GRADIENT, ccui.Layout.BG_COLOR_NONE or ccui.Layout.BG_COLOR_SOLID\nlayout.setBackGroundColorType( ccui.Layout.BG_COLOR_SOLID );\nlayout.setBackGroundColor( cc.color.GRAY );\n\n// add node to layout\nlayout.addChild( nodeToAdd );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UIListView** - a view allowing you to contain other UI elements which the user can scroll through [block:code] { "codes": [ { "code": "ListView *listView = ListView::create( );\n// scroll direction (ui::ScrollView::Direction::VERTICAL or ui::ScrollView::Direction::HORIZONTAL)\nlistView->setDirection( ui::ScrollView::Direction::VERTICAL );\nlistView->setClippingEnabled( false );\nlistView->setPosition( Vec2( visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y ) );\nlistView->setTouchEnabled( true );\nlistView->setBounceEnabled( true );\n// option\nlistView->setBackGroundImage( \"Background image filepath\" );\n\n// add a UI element to the list view\nlistView->pushBackCustomItem( customItem );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var listView = new ccui.ListView( );\n// scrol direction (ccui.ScrollView.DIR_VERTICAL or ccui.ScrollView.DIR_HORIZONTAL)\nlistView.setDirection( ccui.ScrollView.DIR_VERTICAL );\nlistView.setTouchEnabled( true );\nlistView.setBounceEnabled( true );\n// optional\nlistView.setBackGroundImage( \"Background image filepath\" );\n\n// add a UI element to the list view\nlistView.pushBackCustomItem( customItem );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] To detect when the user interacts with the list view a touch event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void selectedItemEvent( Ref *sender, ListView::EventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the touch event listener (usually is coded when the list view is constructed)\nlistView->addEventListener( CC_CALLBACK_2( ClassName::selectedItemEvent, this ) );\n\n// this is called when the user interacts with the list view\nvoid ClassName::selectedItemEvent( Ref *sender, ui::ListView::EventType type )\n{\n ui::ListView *listView = static_cast<ui::ListView *>( sender );\n \n switch ( type )\n {\n case ui::ListView::EventType::ON_SELECTED_ITEM_START:\n\n log( \"select child start index = %ld\", listView->getCurSelectedIndex( ) );\n \n break;\n \n case ui::ListView::EventType::ON_SELECTED_ITEM_END:\n log( \"select child end index = %ld\", listView->getCurSelectedIndex( ) );\n \n break;\n \n default:\n break;\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is used to assign the touch event listener (usually is coded when the list view is constructed)\nlistView.addEventListener(this.selectedItemEvent, this);\n\n// this is called when the user interacts with the list view\nselectedItemEvent: function ( sender, type )\n{\n switch ( type )\n {\n case ccui.ListView.EVENT_SELECTED_ITEM:\n cc.log( \"select child index = \" + sender.getCurSelectedIndex( ) );\n break;\n \n default:\n break;\n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UILoadingBar** - a UI element used to visualise the progress of a operation inside the game [block:code] { "codes": [ { "code": "LoadingBar *loadingBar = LoadingBar::create( \"Loading bar image filepath\" );\n// set the increment of the loading bar (ranges from 0 - 100)\nloadingBar->setPercent( 0 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var loadingBar = new ccui.LoadingBar( );\nloadingBar.loadTexture( \"Loading bar image filepath\" );\n// set the increment of the loading bar (ranges from 0 - 100)\nloadingBar.setPercent( 0 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Cocos handles the incrementation, so the texture that is set just needs to be the bar fully loaded* ##**UIPageView** - allows the user to scroll through different pages (layouts) [block:code] { "codes": [ { "code": "PageView *pageView = PageView::create( );\npageView->setTouchEnabled( true );\npageView->setContentSize( Size( 240.0, 900.0 ) );\npageView->setAnchorPoint( Vec2( 0.5, 0.5 ) );\n\nLayout *layout = Layout::create( );\nlayout->setContentSize( Size( 240.0, 900.0 ) );\n// add a node to the layout (multiple nodes can be added to the layout)\nlayout->addChild( elementToAddToLayout );\n\n// add a layout as a page\npageView->addPage( layout );\n// add a layout as a page at a certain index\npageView->insertPage( layout, 1 );\n\n// remove a particular page\npageView->removePageAtIndex( 0 );\n// remove all the pages\npageView->removeAllPages( );\n\n// scroll to a particular page\npageView->scrollToPage( 2 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var pageView = new ccui.PageView( );\npageView.setTouchEnabled( true );\npageView.setContentSize( cc.size( 240.0, 900.0 ) );\npageView.setAnchorPoint( cc.p( 0.5, 0.5 ) );\n\nvar layout = new ccui.Layout( );\nlayout.setContentSize( cc.size( 240.0, 900.0 ) );\n// add a node to the layout (multiple nodes can be added to the layout)\nlayout.addChild( elementToAddToLayout );\n\n// add a layout as a page\npageView.addPage( layout );\n// add a layout as a page at a certain index\npageView.insertPage( layout, 1 );\n\n// remove a particular page\npageView.removePageAtIndex( 0 );\n// remove all the pages\npageView.removeAllPages( );\n\n// scroll to a particular page\npageView.scrollToPage( 2 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Each layout corresponds to a page in the pageview* To detect when the user interacts with the page view a touch event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void pageViewEvent( Ref *sender, PageView::EventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the touch event listener (usually is coded when the page view is constructed)\npageView->addEventListener( CC_CALLBACK_2( ClassName::pageViewEvent, this ) );\n\n// this is called when the user interacts with the page view\nvoid ClassName::pageViewEvent( Ref *sender, PageView::EventType type )\n{\n switch ( type )\n {\n case PageView::EventType::TURNING:\n PageView *pageView = dynamic_cast<PageView *>( sender );\n \n CCLOG( \"%i\", pageView->getCurPageIndex( ) );\n break;\n \n default:\n break;\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is used to assign the touch event listener (usually is coded when the page view is constructed)\npageView.addEventListener( this.pageViewEvent, this );\n\n// this is called when the user interacts with the page view\npageViewEvent: function ( sender, type )\n{\n switch ( type )\n {\n case ccui.PageView.EVENT_TURNING:\n var pageView = sender;\n \n \t\tcc.log( \"Current page \" + pageView.getCurPageIndex( ) );\n \n break;\n default:\n break;\n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UIRichText** - a UI text element which is comprised of several rich text items. Each item has it's own properties such as colour and size **Example format:** *RichTextItem( stringID, colour, alpha, stringToDisplay, fontToUse );* [block:code] { "codes": [ { "code": "RichText *richText = RichText::create( );\n// sets whether or not the element resizes based on its content aka rich text items added below\nrichText->ignoreContentAdaptWithSize( false );\nrichText->setContentSize( Size( 120, 100 ) );\n\nRichElementText *re1 = RichElementText::create( 1, Color3B::WHITE, 255, \"This color is white\", \"Font filepath\", 10 );\nRichElementText *re2 = RichElementText::create( 2, Color3B::YELLOW, 255, \"And this is yellow. \", \"Font filepath\", 10 );\nRichElementText *re3 = RichElementText::create( 3, Color3B::BLUE, 255, \"This one is blue. \", \"Font filepath\", 10 );\nRichElementText *re4 = RichElementText::create( 4, Color3B::GREEN, 255, \"And this is Green. \", \"Font filepath\", 25 );\nRichElementText *re5 = RichElementText::create( 5, Color3B::RED, 255, \"This is well red . \", \"Font filepath\", 10 );\nRichElementText *re6 = RichElementText::create( 6, Color3B::ORANGE, 255, \"WELL DONE AT THE END. \", \"Font filepath\", 10 );\n\n// add all the rich text items\nrichText->pushBackElement( re1 );\nrichText->pushBackElement( re2 );\nrichText->pushBackElement( re3 );\nrichText->pushBackElement( re4 );\nrichText->pushBackElement( re5 );\n// insert the element at a particular index\nrichText->insertElement( re6, 5 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var richText = new ccui.RichText( );\n// sets whether or not the element resizes based on its content aka rich text items added below\nrichText.ignoreContentAdaptWithSize( false );\nrichText.width = 120;\nrichText.height = 100;\n\nvar re1 = new ccui.RichElementText( 1, cc.color.WHITE, 255, \"This color is white\", \"Font filepath\", 10 );\nvar re2 = new ccui.RichElementText( 2, cc.color.YELLOW, 255, \"And this is yellow. \", \"Font filepath\", 10 );\nvar re3 = new ccui.RichElementText( 3, cc.color.BLUE, 255, \"This one is blue. \", \"Font filepath\", 10 );\nvar re4 = new ccui.RichElementText( 4, cc.color.GREEN, 255, \"And this is Green. \", \"Font filepath\", 25 );\nvar re5 = new ccui.RichElementText( 5, cc.color.RED, 255, \"This is well red . \", \"Font filepath\", 10 );\nvar re6 = new ccui.RichElementText( 6, cc.color.ORANGE, 255, \"WELL DONE AT THE END. \", \"Font filepath\", 10 );\n\n// add all the rich text items\nrichText.pushBackElement( re1 );\nrichText.pushBackElement( re2 );\nrichText.pushBackElement( re3 );\nrichText.pushBackElement( re4 );\nrichText.pushBackElement( re5 );\n// insert the element at a particular index\nrichText.insertElement( re6, 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UIScrollView** - scroll through nodes [block:code] { "codes": [ { "code": "ui::ScrollView *scrollView = ui::ScrollView::create( );\n\nscrollView->setDirection( ui::ScrollView::Direction::VERTICAL );\nscrollView->setContentSize( Size( 300, 200 ) );\nscrollView->setInnerContainerSize( Size( 1280, 2500 ) );\nscrollView->setBackGroundImage( \"HelloWorld.png\" );\nscrollView->setBounceEnabled( true );\nscrollView->setAnchorPoint( Vec2( 0.5, 0.5 ) );\nscrollView->setPosition( Vec2( visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y) );\n\nfor ( int i = 0; i < 50; i++ )\n{\n ui::Button *button = ui::Button::create( \"CloseNormal.png\", \"CloseSelected.png\" );\n button->setPosition( Vec2( scrollView->getContentSize( ).width / 2, i * 50 ) );\n scrollView->addChild( button );\n}\nthis->addChild( scrollView );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scrollView = new ccui.ScrollView( );\n// ccui.ScrollView.DIR_VERTICAL or ccui.ScrollView.DIR_HORIZONTAL\nscrollView.setDirection( ccui.ScrollView.DIR_VERTICAL );\nscrollView.setTouchEnabled( true );\nscrollView.setBounceEnabled( true );\n// optional\nscrollView.setBackGroundImage( \"Background image filepath\" );\n// visible scroll view size\nscrollView.setContentSize( cc.size( 300, 200 ) );\n// total scroll view size\nscrollView.setInnerContainerSize( cc.size( 1280, 2500 ) );\nscrollView.setAnchorPoint( cc.p( 0.5, 0.5 ) );\n\n// add a node to the scroll view\nscrollView.addChild( nodeToAdd );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *ScrollView requires the namespace **ui::** otherwise it is ambiguous* ##**UISlider** - slider to control a variable [block:code] { "codes": [ { "code": "Slider *slider = Slider::create( );\nslider->setTouchEnabled( true );\nslider->loadBarTexture( \"Slider background filepath\" );\nslider->loadSlidBallTextures( \"Slider button filepath\", \"Slider button clicked filepath\", \"\" );\nslider->loadProgressBarTexture( \"Progress bar filepath\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var slider = new ccui.Slider( );\nslider.setTouchEnabled( true );\nslider.loadBarTexture( \"Slider background\" );\nslider.loadSlidBallTextures( \"Slider button\", \"Slider button clicked\", \"\" );\nslider.loadProgressBarTexture( \"Progress bar\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] To detect when the user interacts with the slider a touch event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void sliderEvent( Ref *sender, Slider::EventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the touch event listener (usually is coded when the slider is constructed)\nslider->addEventListener( CC_CALLBACK_2( ClassName::sliderEvent, this ) );\n\n// this is called when the user interacts with the slider\nvoid ClassName::sliderEvent( Ref *sender, Slider::EventType type )\n{\n if (type == Slider::EventType::ON_PERCENTAGE_CHANGED)\n {\n Slider* slider = dynamic_cast<Slider*>( sender );\n int percent = slider->getPercent( );\n CCLOG( \"%i\", percent );\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is used to assign the touch event listener (usually is coded when the slider is constructed)\nslider.addEventListener( this.sliderEvent, this );\n\n// this is called when the user interacts with the slider\nsliderEvent: function( sender, type )\n{\n switch (type)\n {\n case ccui.Slider.EVENT_PERCENT_CHANGED:\n cc.log(\"Percent \" + sender.getPercent().toFixed(0));\n\n break;\n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UIText** - a simple text element [block:code] { "codes": [ { "code": "// the final parameter is the font size\nText *text = Text::create( \"String to display\", \"Font filepath\", 32 );\ntext->ignoreContentAdaptWithSize( false );\n\n// TextHAlignment::LEFT, TextHAlignment::CENTER or TextHAlignment::RIGHT\ntext->setTextHorizontalAlignment( TextHAlignment::CENTER );\n// TextVAlignment::LEFT, TextVAlignment::CENTER or TextVAlignment::RIGHT\ntext->setTextVerticalAlignment( TextVAlignment::CENTER );\n\ntext->setTouchScaleChangeEnabled( true );\ntext->setTouchEnabled( true );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var text = new ccui.Text( );\ntext.setString( \"String to display\" );\ntext.setFontName( \"Font filepath\" );\ntext.setFontSize( 32 );\n// cc.TEXT_ALIGNMENT_LEFT, cc.TEXT_ALIGNMENT_CENTER or cc.TEXT_ALIGNMENT_RIGHT\ntext.setTextHorizontalAlignment( cc.TEXT_ALIGNMENT_CENTER );\n// cc.VERTICAL_TEXT_ALIGNMENT_LEFT, cc.VERTICAL_TEXT_ALIGNMENT_CENTER or cc.VERTICAL_TEXT_ALIGNMENT_RIGHT\ntext.setTextVerticalAlignment( cc.VERTICAL_TEXT_ALIGNMENT_CENTER );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UITextAtlas** - an atlas text string **Example format:** *Text( stringToDisplay, characterMapToUse, characterWidth, characterHeight, startingCharacterInTheMap );* [block:code] { "codes": [ { "code": "TextAtlas *text = TextAtlas::create( \"String to display\", \"Character map filepath\", 5, 5, \"2\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var textAtlas = new ccui.TextAtlas( );\ntextAtlas.setProperty( \"String to display\", \"Character map filepath\", 5, 5, \"2\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Glypth Designer can be used to create BMFonts **[https://71squared.com/en/glyphdesigner](https://71squared.com/en/glyphdesigner)** * ##**UITextBMFont** - an BM Font text string [block:code] { "codes": [ { "code": "TextBMFont *text = TextBMFont::create( \"String to display\", \"Bitmap font filepath\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var labelBMFont = new ccui.TextBMFont( );\nlabelBMFont.setFntFile( \"Bitmap font filepath\" );\nlabelBMFont.setString( \"String to display\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Glypth Designer can be used to create BMFonts **[https://71squared.com/en/glyphdesigner](https://71squared.com/en/glyphdesigner)** * ##**UITextField** - provides a means for text input for the user [block:code] { "codes": [ { "code": "// the final parameter is the font size\nTextField *textField = TextField::create( \"Input text here\",\"Font filepath\", 30 );\n\ntextField->setTouchEnabled( true );\n\n// optional length functions\ntextField->setMaxLengthEnabled( true );\ntextField->setMaxLength( 12 );\n\n// optional password character mask functions\ntextField->setPasswordEnabled( true );\ntextField->setPasswordStyleText( \"*\" );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var textField = new ccui.TextField( );\ntextField.setTouchEnabled( true );\ntextField.fontName = \"Font filepath\";\ntextField.placeHolder = \"Input text here\";\ntextField.fontSize = 30;\n\n// optional length functions\ntextField.setMaxLengthEnabled( true );\ntextField.setMaxLength( 12 );\n\n// optional password character mask functions\ntextField.setPasswordEnabled( true );\ntextField.setPasswordStyleText( \"*\" );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] To detect when the user interacts with the text field a touch event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void textFieldEvent( Ref *sender, ui::TextField::EventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the touch event listener (usually is coded when the text field is constructed)\ntextField->addEventListener( CC_CALLBACK_2( ClassName::textFieldEvent, this ) );\n\n// this is called when the user interacts with the text field\nvoid ClassName::textFieldEvent( Ref *sender, ui::TextField::EventType type )\n{\n ui::TextField* textField = dynamic_cast<ui::TextField *>( sender );\n \n switch (type)\n {\n // keyboard is activated\n case ui::TextField::EventType::ATTACH_WITH_IME:\n log( \"Keyboard opened\" );\n break;\n \n // keyboard is deactivated\n case ui::TextField::EventType::DETACH_WITH_IME:\n log( \"Keyboard closed\" );\n break;\n \n // character insertion\n case ui::TextField::EventType::INSERT_TEXT:\n log( \"%s\", textField->getString( ).c_str() );\n \n break;\n \n // character deletion\n case ui::TextField::EventType::DELETE_BACKWARD:\n log( \"%s\", textField->getString( ).c_str( ) );\n \n break;\n \n default:\n break;\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is used to assign the touch event listener (usually is coded when the text field is constructed)\ntextField.addEventListener( this.textFieldEvent, this );\n\n// this is called when the user interacts with the text field\ntextFieldEvent: function( sender, type )\n{\n switch ( type )\n {\n // keyboard is activated\n case ccui.TextField.EVENT_ATTACH_WITH_IME:\n\n break;\n\n // keyboard is deactivated\n case ccui.TextField.EVENT_DETACH_WITH_IME:\n\n break;\n\t\t\t\t\n // character insertion\n case ccui.TextField.EVENT_INSERT_TEXT:\n \t\tcc.log( \"%s\", textField.string );\n\n break;\n\n // character deletion\n case ccui.TextField.EVENT_DELETE_BACKWARD:\n cc.log( \"%s\", textField.string );\n\n break;\n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**UIVideoPlayer** - provides a means for playing videos [block:code] { "codes": [ { "code": "experimental::ui::VideoPlayer *videoPlayer = experimental::ui::VideoPlayer::create( );\nvideoPlayer->setURL( \"Video Url\" );\nvideoPlayer->setContentSize( Size( visibleSize.width,visibleSize.height ) );\nvideoPlayer->play( );\nvideoPlayer->setPosition( Vec2( visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y ) );\nvideoPlayer->setFullScreenEnabled( true );\n\nthis->addChild( videoPlayer );", "language": "cplusplus", "name": "Cocos2d-x C++" } ] } [/block] To detect different state changes for the video play such as playing and pausing an event listener needs to be attached to it. [block:code] { "codes": [ { "code": "void videoEventCallback( cocos2d::Ref *sender, cocos2d::experimental::ui::VideoPlayer::EventType eventType );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the event listener (usually is coded when the video player is constructed)\nvideoPlayer->addEventListener( CC_CALLBACK_2( ClassName::videoEventCallback, this ) );\n\n// this is called when the video player state changes\nvoid ClassName::videoEventCallback(Ref* sender, experimental::ui::VideoPlayer::EventType eventType)\n{\n switch ( eventType )\n {\n case experimental::ui::VideoPlayer::EventType::PLAYING:\n log( \"Playing\" );\n \n break;\n \n case experimental::ui::VideoPlayer::EventType::PAUSED:\n log( \"Paused\" );\n \n break;\n \n case experimental::ui::VideoPlayer::EventType::STOPPED:\n log( \"Stopped\" );\n \n break;\n \n case experimental::ui::VideoPlayer::EventType::COMPLETED:\n log( \"Completed\" );\n \n break;\n \n default:\n break;\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" } ] } [/block] ##**UIWebView** - provides a means for displaying web pages [block:code] { "codes": [ { "code": "experimental::ui::WebView *webView = experimental::ui::WebView::create( );\nwebView->setPosition( visibleSize / 2 );\nwebView->setContentSize( visibleSize * 0.8 );\nwebView->loadURL( \"http://www.google.co.uk\" );\nwebView->setScalesPageToFit( true );\n\nwebView->reload( );\nwebView->goBack( );\nwebView->goForward( );\n\nthis->addChild( webView );", "language": "cplusplus", "name": "Cocos2d-x C++" } ] } [/block] To detect if the page as loaded or not listeners can be attached to the UIWebView. [block:code] { "codes": [ { "code": "bool onWebViewShouldStartLoading( cocos2d::experimental::ui::WebView *sender, const std::string &url );\nvoid onWebViewDidFinishLoading( cocos2d::experimental::ui::WebView *sender, const std::string &url );\nvoid onWebViewDidFailLoading( cocos2d::experimental::ui::WebView *sender, const std::string &url );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is used to assign the listeners (usually is coded when the web view is constructed)\nwebView->setOnDidFailLoading( CC_CALLBACK_2( ClassName::onWebViewDidFailLoading, this ) );\nwebView->setOnShouldStartLoading( CC_CALLBACK_2( ClassName::onWebViewShouldStartLoading, this ) );\nwebView->setOnDidFinishLoading( CC_CALLBACK_2( ClassName::onWebViewDidFinishLoading, this ) );\n\nbool ClassName::onWebViewShouldStartLoading( experimental::ui::WebView *sender, const std::string &url )\n{\n log( \"Started Loading, url is %s\", url.c_str( ) );\n \n return true;\n}\n\nvoid ClassName::onWebViewDidFinishLoading( experimental::ui::WebView *sender, const std::string &url )\n{\n log( \"Finished Loading, url is %s\", url.c_str( ) );\n}\n\nvoid ClassName::onWebViewDidFailLoading( experimental::ui::WebView *sender, const std::string &url )\n{\n log( \"Failed Loading, url is %s\", url.c_str( ) );\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" } ] } [/block]