How to use scrollview in cocos2d-x

Scroll View in cocos2d-x is used to scroll some components like buttons up and down within a table.This is similar to list view but has some changed design than list view
For this first of all take a new cocos2d-x default project

In your HelloWorldScene.h file you have to include the following .h files

#include "CCTableView.h"
#include "cocos-ext.h"

Now add the following lines as we will use some namespaces
using namespace cocos2d;
using namespace cocos2d::extension;

Now we have to inherit our Helloworld class with various other classes
class HelloWorld: public CCLayer, public CCTableViewDataSource,public CCTableViewDelegate.  The above two classes CCTableViewDataSource and CCTableViewDelegate are present in CCTableView.h. CCTableViewDelegate inherits CCScrollViewDelegate and thus uses all functionalities of a scrollview

Now after that take two components for the background image if you want
CCNode * _bgNode;
CCSprite *_bgSprite;

As we have inherited the HelloWorld with CCTableViewDataSource and CCTableViewDelegate, we will override the virtual functions of these classes. So add these function prototypes in your .h file

virtual void scrollViewDidScroll (CCScrollView * view);
virtual void scrollViewDidZoom (CCScrollView * view);
virtual void tableCellTouched (CCTableView * table, CCTableViewCell * cell);
virtual CCSize cellSizeForTable (CCTableView * table);
virtual CCTableViewCell * tableCellAtIndex (CCTableView * table, unsigned int idx);
virtual unsigned int numberOfCellsInTableView (CCTableView * table );
virtual void tableCellHighlight (CCTableView * table,CCTableViewCell * cell);
virtual void tableCellUnhighlight (CCTableView * table, CCTableViewCell * cell);

Now in your .cpp file just write the init function as follows
bool HelloWorld::init()
{
if ( !CCLayer::init() )
{
return false;
}

CCSize winSize = CCDirector::sharedDirector()->getWinSize();

_bgNode = CCNode::create();
_bgNode->setPosition(ccp(winSize.width/2, winSize.height/2));
this->addChild(_bgNode, -1);

_bgSprite = CCSprite::create("background.jpg"); //use the image name that you used in
your project for background

_bgNode->addChild(_bgSprite);

//for scaling purposes
float rX = winSize.width/_bgSprite->getContentSize().width;
float rY = winSize.height/_bgSprite->getContentSize().height;

_bgNode->setScaleX(rX);
_bgNode->setScaleY(rY);

CCSprite *menuboard=CCSprite::create("menu_board.png");
menuboard->setScaleX(rX);
menuboard->setScaleY(rY);
menuboard->setPosition(ccp(winSize.width/2,winSize.height/2));
this->addChild(menuboard);

//for creating a table view
CCTableView* tableView = CCTableView::create(this,
CCSizeMake(menuboard->getContentSize().width*.60, menuboard->getContentSize().height*.60));
tableView-> setDirection (kCCScrollViewDirectionVertical);
tableView-> setPosition (winSize.width*.26,winSize.height*.30);
tableView-> setDelegate (this);
tableView->setBounceable(false);
tableView-> setVerticalFillOrder (kCCTableViewFillTopDown);

this -> addChild (tableView, 1);
tableView-> reloadData ();
return true;

}

Now we have to define all the virtual functions what we have used
// providing the number of cells
unsigned int HelloWorld :: numberOfCellsInTableView (CCTableView * table)
{
return 10;
}

CCTableViewCell * HelloWorld :: tableCellAtIndex (CCTableView * table, unsigned int idx)
{
CCString * nameString = CCString :: createWithFormat ("button_cell_image.png");
CCTableViewCell * cell = table-> dequeueCell ();
if (!cell)
{
cell = new CCTableViewCell ();
cell-> autorelease ();
CCSprite * iconSprite = CCSprite :: create (nameString-> getCString ());
iconSprite-> setScale (0.6);
iconSprite-> setAnchorPoint(CCPointZero);
iconSprite-> setPosition (ccp (25, 10));
iconSprite-> setTag(123);
cell-> addChild (iconSprite);
}
else
{
// do not need to create a re-created, or else you will not find pictures with text
CCTexture2D * aTexture = CCTextureCache :: sharedTextureCache () -> addImage
(nameString -> getCString ());
CCSprite * pSprite = (CCSprite *) cell-> getChildByTag (123);
pSprite-> setTexture (aTexture);
}
return cell;
}

CCSize HelloWorld :: cellSizeForTable (CCTableView * table)
{
CCSize visibSize = CCDirector :: sharedDirector () -> getVisibleSize ();
return CCSizeMake (visibSize.width, 84);
}

//just used for highlighting a cell when we click.I haven't used it but you can use

void HelloWorld :: tableCellHighlight (CCTableView * table, CCTableViewCell * cell)
{
CCTexture2D * aTexture = CCTextureCache :: sharedTextureCache () -> addImage ("button_selected.png");
//CCSprite * pSprite = (CCSprite *) cell-> getChildByTag (789);
//pSprite-> setTexture (aTexture);
}

//when we move away from the cell and unhighlight it.This also I haven't used because I just want some buttons to be added and scrolled up and down.
void HelloWorld :: tableCellUnhighlight (CCTableView * table,CCTableViewCell * cell)
{
CCTexture2D * aTexture = CCTextureCache :: sharedTextureCache () -> addImage ("image.png");
// CCSprite * pSprite = (CCSprite *) cell-> getChildByTag (789);
// pSprite->setTexture(aTexture);
}

//this is the most important one.This will tell you what will happen when you click a particular cell.
void HelloWorld :: tableCellTouched (CCTableView * table,CCTableViewCell * cell)
{
CCLog ("cell touched at index:% i", cell-> getIdx ( ));
//here we got id of a cell and we can make some functionality depending upon our needs like
//if(cell->getIdx()==4)
// {
// change the scene or do whatever what your game demands
// }
}

// we can use these functions but I am not using them. But we have virtually overrided them so we have to define in our .cpp.So just leave them with empty body
void HelloWorld:: scrollViewDidZoom (CCScrollView * view)
{
}

void HelloWorld:: scrollViewDidScroll (CCScrollView * view)
{
}

Below is the screen shot

The flower named are the buttons which are added within that menu board where we kept the size of the table view. These buttons will scroll up and down. So, this is all for the scroll view in cocos2d-x.
HAPPY CODING