{"_id":"54ec5e077ab3172d00c01aae","user":"54639d06447e0a1000249f7f","project":"5463e333447e0a100024a087","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"},"__v":0,"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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-24T11:18:31.835Z","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 PageView\"\n}\n[/block]\nDrag a PageView from the Widgets section onto the middle canvas.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/CMAF4RZASzSLDZ88kfhw_Screen-Shot-2015-02-24-at-11.10.53.png\",\n        \"Screen-Shot-2015-02-24-at-11.10.53.png\",\n        \"253\",\n        \"188\",\n        \"#f10f0c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Selecting The PageView\"\n}\n[/block]\nYou can select the PageView if it isn't already selected from the **Animation Editor** at the bottom. The PageView doesn't appear in the resources as it's part of the Scene or other object that you are using.\n\nPageView are used as a way of grouping objects together. To add objects to your PageView you simply drag any object onto the panel. All transformations applied to the PageView will affect it's children as well. The PageView only takes Panels which can contain any other object.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/jK0g1syRtOHNNVafZ3Mp_Screen-Shot-2015-02-24-at-11.11.04.png\",\n        \"Screen-Shot-2015-02-24-at-11.11.04.png\",\n        \"252\",\n        \"326\",\n        \"#1074f1\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modifying The PageView\"\n}\n[/block]\nYou can change the PageView background file. Setting the PageView's background file can be done by double clicking on the section or dragging an image from the Resources section.\n\nTo hide the objects inside the PageView that are out of bounds you simply enable **Clipping**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/pswuuItS5ue3oQ52S2SK_Screen%20Shot%202015-02-24%20at%2011.11.18.png\",\n        \"Screen Shot 2015-02-24 at 11.11.18.png\",\n        \"357\",\n        \"441\",\n        \"#477ec4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Accessing The PageView In Code\"\n}\n[/block]\nPageView'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/cKJreOfoRwKHOnkKG4FP_Screen%20Shot%202015-02-24%20at%2011.11.27.png\",\n        \"Screen Shot 2015-02-24 at 11.11.27.png\",\n        \"355\",\n        \"84\",\n        \"#82655f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo access the PageView from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **PageView** allowing you to use **PageView** 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// PageView accessed as a node using it's name\\nNode *pageView = rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// PageView cast to a PageView using it's name\\ncocos2d::ui::PageView *pageView = ( cocos2d::ui::PageView * )rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// PageView accessed as a node using it's tag\\nNode *pageView = rootNode->getChildByTag( 5 );\\n\\n// PageView cast to a PageView using it's tag\\ncocos2d::ui::PageView *pageView = ( cocos2d::ui::PageView * )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 PageView by name\\nvar pageView = rootNode.node.getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// get the PageView by tag\\nvar pageView = 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 PageView methods.*","excerpt":"","slug":"containers-pageview","type":"basic","title":"[Containers] PageView"}

[Containers] PageView


[block:api-header] { "type": "basic", "title": "Adding A PageView" } [/block] Drag a PageView from the Widgets section onto the middle canvas. [block:image] { "images": [ { "image": [ "https://files.readme.io/CMAF4RZASzSLDZ88kfhw_Screen-Shot-2015-02-24-at-11.10.53.png", "Screen-Shot-2015-02-24-at-11.10.53.png", "253", "188", "#f10f0c", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Selecting The PageView" } [/block] You can select the PageView if it isn't already selected from the **Animation Editor** at the bottom. The PageView doesn't appear in the resources as it's part of the Scene or other object that you are using. PageView are used as a way of grouping objects together. To add objects to your PageView you simply drag any object onto the panel. All transformations applied to the PageView will affect it's children as well. The PageView only takes Panels which can contain any other object. [block:image] { "images": [ { "image": [ "https://files.readme.io/jK0g1syRtOHNNVafZ3Mp_Screen-Shot-2015-02-24-at-11.11.04.png", "Screen-Shot-2015-02-24-at-11.11.04.png", "252", "326", "#1074f1", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Modifying The PageView" } [/block] You can change the PageView background file. Setting the PageView's background file can be done by double clicking on the section or dragging an image from the Resources section. To hide the objects inside the PageView that are out of bounds you simply enable **Clipping**. [block:image] { "images": [ { "image": [ "https://files.readme.io/pswuuItS5ue3oQ52S2SK_Screen%20Shot%202015-02-24%20at%2011.11.18.png", "Screen Shot 2015-02-24 at 11.11.18.png", "357", "441", "#477ec4", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Accessing The PageView In Code" } [/block] PageView'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/cKJreOfoRwKHOnkKG4FP_Screen%20Shot%202015-02-24%20at%2011.11.27.png", "Screen Shot 2015-02-24 at 11.11.27.png", "355", "84", "#82655f", "" ] } ] } [/block] To access the PageView from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **PageView** allowing you to use **PageView** methods along with **Node** methods. [block:code] { "codes": [ { "code": "Node *rootNode = CSLoader::createNode( \"Filepath to .csb file\" );\nthis->addChild( rootNode );\n\n// PageView accessed as a node using it's name\nNode *pageView = rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// PageView cast to a PageView using it's name\ncocos2d::ui::PageView *pageView = ( cocos2d::ui::PageView * )rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// PageView accessed as a node using it's tag\nNode *pageView = rootNode->getChildByTag( 5 );\n\n// PageView cast to a PageView using it's tag\ncocos2d::ui::PageView *pageView = ( cocos2d::ui::PageView * )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 PageView by name\nvar pageView = rootNode.node.getChildByName( \"Name set in Cocos Studio\" );\n\n// get the PageView by tag\nvar pageView = rootNode.node.getChildByTag( 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Cocos2d-JS doesn't require casting to use PageView methods.*