Change view using ViewStack container with selectedChild property

1. In the main.mxml file add the following

mx:ViewStack id="mainViewStack"
view:bookSearch id="bookSearch" /
view:bookData id="bookData" /
/mx:ViewStack

In the script assign the viewstack object id to the model instance in init() function
mainModel.mainView = mainViewStack; //mainModel => Binded model to change the view

2. Create canvas using the above view names and add these into cairngorm view folder
Refer the below link for creating canvas in Flex Builder
http://flextutorial4you.blogspot.com/2011/03/create-canvas-from-flex-builder.html
3. In the model add the following scripts

import mx.containers.ViewStack;

In the class file create static variable of the class name then create and instance of the class
public static function getInstance() : MainModelLocator
{
if ( modelLocator == null )
{
modelLocator = new MainModelLocator();
}

return modelLocator;
}
public function init():void
{
mainView = new ViewStack();
}
public function changeView(viewName:String):void
{
if(mainView.selectedChild.name != viewName)
{
this.mainView.selectedChild.dispatchEvent(new Event("INTERRUPT", false, false));
mainView.selectedChild = Container(mainView.getChildByName(viewName));
}

}
4. Then use the mainModel class and call the function changeView() for changing the view
Ex: mainModel.changeView("bookData");