[flexcoders] Convert ApplicationControlBar to Accordion Navigation????

[advd4u2]

Hi All,
Please help if you can,

I have to following code from to book  Flex3:Training form to source :


<mx:ApplicationControlBar dock="true" width="100%" height="90">
         <mx:Canvas width="100%" height="100%"
             horizontalScrollPolicy="off"
             verticalScrollPolicy="off">
             <mx:Label x="0" y="0" text="Flex" styleName="logoTop"
click="ecommNav.selectedChild=homePage"/>
             <mx:Label x="0" y="41" text="GROCER" styleName="logoBottom"
click="ecommNav.selectedChild=homePage"/>
             <v:CategoryView id="catView"
                 width="600"
                 left="100"
                 cats="{categories}"
                 categorySelect="displayProdByCategory(event)"
                 click="showProducts()"/>
             <mx:Button label="View Cart"
                 id="btnViewCart"
                 right="90" y="0"
                 click="showCart()"
                 enabled="false"
                 styleName="homePageButton"/>
             <mx:Button label="Checkout" id="btnCheckout" right="10"
y="0"
                 click="ecommNav.selectedChild=checkout"
                 styleName="homePageButton"/>
         </mx:Canvas>
     </mx:ApplicationControlBar>



Here is the seudo-code i have started with:


<mx:Accordion width="305" height="655">
  // jewelry vbox

     <mx:VBox width="300" height="650" label="JEWELRY"
                 horizontalScrollPolicy="off"
                 verticalScrollPolicy="off">

                 <v:CategoryView id="catView" verticalScrollPolicy="off" 
rowCount="3" columnCount="1"
                     selectedIndex="1"
                     width="300"
                     left="20"
                     cats="{categories}"
                     categorySelect="displayProdByCategory(event)"
                     click="showProducts()"/>

  //handbags vbox

             </mx:VBox>
             <mx:VBox width="300" height="650" label="HandBags"
                 horizontalScrollPolicy="off"
                 verticalScrollPolicy="off">

                 <v:CategoryView id="catView1" rowCount="7"
                     width="300"
                     left="10"
                     cats="{categories}"
                     categorySelect="displayProdByCategory(event)"
                      menuSelectionMode="true"
                      maxRows="6"
                      catSelected="3"
                     click="showProducts()" />

             </mx:VBox>

//the cart vbox

             <mx:VBox label="Cart">


             <mx:Button label="View Cart"
                     id="btnViewCart"
                     right="90" y="0"
                     click="showCart()"
                     enabled="false"
                     styleName="homePageButton"/>
                 <mx:Button label="Checkout" id="btnCheckout" right="10"
y="0"
                     click="ecommNav.selectedChild=checkout"
                     styleName="homePageButton"/>
                     </mx:VBox>
         </mx:Accordion>

In the above handbags vbox I am wanting to starting the products at
currentIndex='3'
in other words, I am trying to populate the vboxs with there respective
category. products but can't get passed the indexing.  Currently I get
all of the products in both vboxes.  I only want the first 3 in the
first vbox then the 3rd-10th in the second etc.

Is there an easy way to do this or will I have to go another route?

Thanks so much,

Bobby