{"_id":"54eb8101df7add210007b31a","category":{"_id":"54e3bef8464a9c3700f7ca67","pages":["54e3bfabe887c50d005ef6a0","54e3c35ee887c50d005ef6af","54e3c9ade887c50d005ef6b4","54e3ca68e887c50d005ef6b6","54e47d6a610dfd0d00b2a84a","54e487250e41ef2b00b996c2","54e48ec60e41ef2b00b996cd","54e5c6e8e662e60d00aff673","54e5d4efe0b92439007d6999","54e5dc0ae0b92439007d69aa","54e72c88e6e77d1900ed10fa","54e7391f3c1e111700d05749","54e73f1a3c1e111700d05757","54e863f5c8e0c00d007abffd","54e86704a64fba0d00846860","54e86abb32b0b00d00c960f2","54e9e881560f2b170087f1d0","54e9eca2a6f14f0d003e96b5","54e9f04d560f2b170087f1d3","54eb2041996da20d00e6d68e","54eb801659b1172100334ffc","54eb8101df7add210007b31a","54ec584cc0c0ba1700386f8d","54ec5adad17b6d2300a54d75","54ec5e077ab3172d00c01aae","54edf8ca1e4ee60d0018e89f","54edfbc0130818170073a16b","54edff0e8dafa7250027e659"],"project":"5463e333447e0a100024a087","__v":28,"version":"5463e333447e0a100024a08a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-17T22:21:44.099Z","from_sync":false,"order":2,"slug":"cocos-studio","title":"Cocos Studio"},"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"},"user":"54639d06447e0a1000249f7f","__v":2,"project":"5463e333447e0a100024a087","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-23T19:35:29.158Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding A Panel\"\n}\n[/block]\nDrag a Panel from the Widgets section onto the middle canvas.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ATdOFz0sSKaVV66hdjqr_Screen-Shot-2015-02-23-at-19.32.52.png\",\n        \"Screen-Shot-2015-02-23-at-19.32.52.png\",\n        \"256\",\n        \"190\",\n        \"#eb140f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Selecting The Panel\"\n}\n[/block]\nYou can select the Panel if it isn't already selected from the **Animation Editor** at the bottom. The Panel doesn't appear in the resources as it's part of the Scene or other object that you are using.\n\nPanels are used as a way of grouping objects together. To add objects to your panel you simply drag any object onto the panel. All transformations applied to the Panel will affect it's children as well.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/9m7dZAlQVKNtAJGRAClg_Screen-Shot-2015-02-23-at-19.33.02.png\",\n        \"Screen-Shot-2015-02-23-at-19.33.02.png\",\n        \"250\",\n        \"333\",\n        \"#e68278\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modifying The Panel\"\n}\n[/block]\nYou can change the Panel background file. Setting the Panel's background file can be done by double clicking on the section or dragging an image from the Resources section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/JBBXIM76RdSaR25pC5sJ_Screen%20Shot%202015-02-23%20at%2019.33.13.png\",\n        \"Screen Shot 2015-02-23 at 19.33.13.png\",\n        \"356\",\n        \"228\",\n        \"#4681c9\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Accessing The Panel In Code\"\n}\n[/block]\nPanel's can be accessed via their **Name** or **Tag** which can be set in the **Properties** section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/gp8PhWRUQB6irn2bdNzm_Screen%20Shot%202015-02-23%20at%2019.33.21.png\",\n        \"Screen Shot 2015-02-23 at 19.33.21.png\",\n        \"350\",\n        \"73\",\n        \"#64749c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo access the Panel from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **Panel** allowing you to use **Panel** methods along with **Node** methods.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Node *rootNode = CSLoader::createNode( \\\"Filepath to .csb file\\\" );\\nthis->addChild( rootNode );\\n\\n// panel accessed as a node using it's name\\nNode *panel = rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// panel cast to a panel using it's name\\ncocos2d::ui::Layout *panel = ( cocos2d::ui::Layout * )rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// panel accessed as a node using it's tag\\nNode *label = rootNode->getChildByTag( 5 );\\n\\n// panel cast to a panel using it's tag\\ncocos2d::ui::Layout *panel = ( cocos2d::ui::Layout * )rootNode->getChildByTag( 5 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var rootNode = ccs.load( \\\"Filepath to .json file\\\" );\\nthis.addChild( rootNode.node );\\n\\n// get the panel by name\\nvar panel = rootNode.node.getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// get the panel by tag\\nvar panel = rootNode.node.getChildByTag( 5 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Cocos2d-JS doesn't require casting to use Panel methods.*","excerpt":"","slug":"containers-panel","type":"basic","title":"[Containers] Panel"}

[Containers] Panel


[block:api-header] { "type": "basic", "title": "Adding A Panel" } [/block] Drag a Panel from the Widgets section onto the middle canvas. [block:image] { "images": [ { "image": [ "https://files.readme.io/ATdOFz0sSKaVV66hdjqr_Screen-Shot-2015-02-23-at-19.32.52.png", "Screen-Shot-2015-02-23-at-19.32.52.png", "256", "190", "#eb140f", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Selecting The Panel" } [/block] You can select the Panel if it isn't already selected from the **Animation Editor** at the bottom. The Panel doesn't appear in the resources as it's part of the Scene or other object that you are using. Panels are used as a way of grouping objects together. To add objects to your panel you simply drag any object onto the panel. All transformations applied to the Panel will affect it's children as well. [block:image] { "images": [ { "image": [ "https://files.readme.io/9m7dZAlQVKNtAJGRAClg_Screen-Shot-2015-02-23-at-19.33.02.png", "Screen-Shot-2015-02-23-at-19.33.02.png", "250", "333", "#e68278", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Modifying The Panel" } [/block] You can change the Panel background file. Setting the Panel's background file can be done by double clicking on the section or dragging an image from the Resources section. [block:image] { "images": [ { "image": [ "https://files.readme.io/JBBXIM76RdSaR25pC5sJ_Screen%20Shot%202015-02-23%20at%2019.33.13.png", "Screen Shot 2015-02-23 at 19.33.13.png", "356", "228", "#4681c9", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Accessing The Panel In Code" } [/block] Panel's can be accessed via their **Name** or **Tag** which can be set in the **Properties** section. [block:image] { "images": [ { "image": [ "https://files.readme.io/gp8PhWRUQB6irn2bdNzm_Screen%20Shot%202015-02-23%20at%2019.33.21.png", "Screen Shot 2015-02-23 at 19.33.21.png", "350", "73", "#64749c", "" ] } ] } [/block] To access the Panel from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **Panel** allowing you to use **Panel** methods along with **Node** methods. [block:code] { "codes": [ { "code": "Node *rootNode = CSLoader::createNode( \"Filepath to .csb file\" );\nthis->addChild( rootNode );\n\n// panel accessed as a node using it's name\nNode *panel = rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// panel cast to a panel using it's name\ncocos2d::ui::Layout *panel = ( cocos2d::ui::Layout * )rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// panel accessed as a node using it's tag\nNode *label = rootNode->getChildByTag( 5 );\n\n// panel cast to a panel using it's tag\ncocos2d::ui::Layout *panel = ( cocos2d::ui::Layout * )rootNode->getChildByTag( 5 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var rootNode = ccs.load( \"Filepath to .json file\" );\nthis.addChild( rootNode.node );\n\n// get the panel by name\nvar panel = rootNode.node.getChildByName( \"Name set in Cocos Studio\" );\n\n// get the panel by tag\nvar panel = rootNode.node.getChildByTag( 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Cocos2d-JS doesn't require casting to use Panel methods.*