How to set current page dynamically in flexbook?

I am using a Flexbook which contains 2 BorderContainer. The code is shown below

<controls:FlexBook id="book" x="20" y="20"
               width="100%" height="100%" horizontalCenter="0" 
               animateCurrentPageIndex="true"
               showCornerTease="true" animatePagesOnTurn="true" 
               activeGrabArea="edge"
               edgeAndCornerSize="20" 
               hardbackPages="false"
               ha开发者_开发百科rdbackCovers="false"
               pageShadowStrength="1"
               curveShadowStrength="1"
               pageSlope="0"
               itemSize="page"
               backgroundColor="0xC3D1D9"
               borderThickness="0"
               borderColor="0xC3D1D9"
               cover="{null}"
               backCover="{null}"
               showPageSlopeAtRest="false" 
               cacheAsBitmap="true">

<s:BorderContainer id="page1">


    <mx:ColumnChart x="0" y="35" id="ccMain" height="90%" width="99%"
                    cacheAsBitmap="true"
                    showDataTips="true"  dataTipFunction="{getDataTip}"  type="clustered" backgroundElements="{bge4}">
            <!-- column chart code goes here -->
    </mx:ColumnChart>

</s:BorderContainer>


<s:BorderContainer id="page2" creationComplete="productMainPg2.addElement(lineChart)">
    <mx:Legend dataProvider="{lineChart}" height="21" x="10" width="95%" color="#b1b7f4"/>
</s:BorderContainer>

This code shows page1 as current page. I want to show the BorderContainer (id= page2) as my current page dynamically on a button click. I tried setting currentPageIndex = 1, but I get a blank page by doing this.

1. Create a [Bindable] boolean property (i.e. [Bindable] public var isShowingFirstPage:Boolean = true)
2. Set the BorderContainer's "visible" and "includeInLayout" properties to be contingent on this value. (i.e. ...id="page1" visible="{isShowingFirstPage:Boolean}" includeInLayout="{isShowingFirstPage:Boolean}... for the first one, and ...id="page2" visible="{!isShowingFirstPage:Boolean}" includeInLayout="{!isShowingFirstPage:Boolean}...for the second)
3. toggle / change that boolean based on some input, user gesture, business logic, whatever and the two container's should display / update accordingly.