Flex Tutorials 5-Navigation Control in Adobe Flex

Using Tabbar Control + ViewStack
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#ffffff" backgroundAlpha="0">
<mx:Image source="assets/header.jpg" />
<mx:Spacer height="10" />

<mx:HBox horizontalGap="15">
<mx:Button label="< previous" click="cafeTownsendContent.selectedIndex=cafeTownsendContent.selectedIndex-1" />
<mx:TabBar dataProvider="cafeTownsendContent" />
<mx:Button label="> next" click="cafeTownsendContent.selectedIndex=cafeTownsendContent.selectedIndex+1"/>
</mx:HBox>

<mx:ViewStack id="cafeTownsendContent" resizeToContent="true">
<mx:HBox id="home" label="Home" width="100%">
<mx:Image source="assets/street_sign.jpg" />
<mx:Spacer width="5" />
<mx:Text width="400">
<mx:text>
The name Cafe Townsend comes from our first restaurant, located in a historic building on Townsend Street in San Francisco, where we opened the doors in 1992. We’ve replicated the elegant interior, exceptional service, and world class cuisine in our restaurants around the country.
</mx:text>
</mx:Text>
</mx:HBox>
<mx:VBox id="contact" label="Contact Us" width="100%">
<mx:Text width="400" text="How to Find Us" color="#dd7142" fontWeight="bold" />
<mx:Text width="400">
<mx:text>
We are easy to find. If you are taking public transportation, we are 2 blocks south of the bullet train stop. Located across from the famous gigantic galaxy structure.
</mx:text>
</mx:Text>
</mx:VBox>
</mx:ViewStack>
</mx:Application>

Following is theoutput of a sample Tabbar Control.

Using Tabnavigator
Following is theoutput of a sample Tabbar Control.
Same functionality can be achived by TabNavigator Conrol.Remove the HBox Block which contain TabBar And replace “<mx:ViewStack id="cafeTownsendContent" resizeToContent="true">
“ by <mx:TabNavigator id=” cafeTownsendContent” resizeToContent="true" width=”600” paddingBottom=”15” paddingLeft=”15” paddingRight=”15” paddingTop=”15” creationPolicy=”auto”> and close </mx: TabNavigator> instead of </mx:ViewStack>

Using Accordion
Remove the padding property of the Tab Navigator Control so that it can be looked as small height.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#ffffff" backgroundAlpha="0">
<mx:Image source="assets/header.jpg" />
<mx:Spacer height="10" />
<mx:Accordion id="cafeTownsendContent" resizeToContent="true" width="600" >
<mx:HBox id="home" label="Home" width="100%">
<mx:Image source="assets/street_sign.jpg" />
<mx:Spacer width="5" />
<mx:Text width="100%">
<mx:text>
The name Cafe Townsend comes from our first restaurant, located in a historic building on Townsend Street in San Francisco, where we opened the doors in 1992. We’ve replicated the elegant interior, exceptional service, and world class cuisine in our restaurants around the country.
</mx:text>
</mx:Text>
</mx:HBox>
<mx:VBox id="contact" label="Contact Us" width="100%">
<mx:Text width="100%" text="How to Find Us" color="#dd7142" fontWeight="bold" />
<mx:Text width="100%">
<mx:text>
We are easy to find. If you are taking public transportation, we are 2 blocks south of the bullet train stop. Located across from the famous gigantic galaxy structure.
</mx:text>
</mx:Text>
<mx:Text width="100%">
<mx:text>
If you are driving, take route 66 all the way to the coast, turn south onto Spectacular Drive, proceed 1 mile. We are pleased to provide you with complimentary valet parking.
</mx:text>
</mx:Text>
</mx:VBox>
</mx:Accordion>
<mx:Canvas>
<mx:Button
x="0" y="20"
label="< previous"
click="cafeTownsendContent.selectedIndex=cafeTownsendContent.selectedIndex - 1"/>
<mx:Button
x="500" y="20"
label="> next"
click="cafeTownsendContent.selectedIndex=cafeTownsendContent.selectedIndex + 1"/>
</mx:Canvas>
</mx:Application>



Using Application Control Bar
ApplicationControlBar +LinkBar+ Viewstack + Toggle Button Bar

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#ffffff" backgroundAlpha="0">
<mx:ApplicationControlBar horizontalAlign="center" dock="true">
<mx:LinkBar dataProvider="cafeTownsendContent" />
<mx:ToggleButtonBar horizontalGap="5">
<mx:dataProvider>
<mx:Array>
<mx:Object label="small font"/>
<mx:Object label="medium font"/>
<mx:Object label="large font"/>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:ApplicationControlBar>
<mx:Image source="assets/header.jpg" />
<mx:Spacer height="10" />
<mx:ViewStack id="cafeTownsendContent" resizeToContent="true" width="600" paddingBottom="15"
paddingLeft="15" paddingRight="15" paddingTop="15">
<mx:VBox label="Restaurant Menu" width="460" verticalScrollPolicy="off" paddingRight="10">
<mx:Text text="Appetizers" color="#dd7142" fontWeight="bold" />
<mx:Tile width="100%" height="175" horizontalGap="10">
<mx:VBox>
<mx:Image source="assets/app_artichokeDip.jpg" />
<mx:Text width="200" fontWeight="bold" text="Pop Artichoke Dip" />
<mx:Text width="200" text="Asiago cheese with spinach and artichoke hearts served with pita chips." />
</mx:VBox>
<mx:VBox>
<mx:Image source="assets/app_butternut_soup.jpg" />
<mx:Text width="200" fontWeight="bold" text="Roasted Butternut Squash Soup" />
<mx:Text width="200" text="Creamy, rich and silky finished with a touch of fresh basil and smoked walnuts." />
</mx:VBox>
<mx:VBox>
<mx:Image source="assets/app_chixSatay.jpg" />
<mx:Text width="200" fontWeight="bold" text="Spicy Thai Satay" />
<mx:Text width="200" text="Chicken satay served with Asian greens and a sesame dipping sauce." />
</mx:VBox>
<mx:VBox>
<mx:Image source="assets/app_salad.jpg" />
<mx:Text width="200" fontWeight="bold" text="Garden Salad Medley" />
<mx:Text width="200" text="Garlic balsamic vinaigrette tops this fresh mixed salad with red bell peppers, cucumbers and carrots." />
</mx:VBox>
</mx:Tile>

<mx:Text
text="Entrees"
color="#dd7142"
fontWeight="bold" />

<mx:Tile width="100%" height="175" horizontalGap="10">
<mx:VBox>
<mx:Image source="assets/entree_burgerFries.jpg" />
<mx:Text width="200" fontWeight="bold" text="The Alamo Burger" />
<mx:Text width="200" text="A half-pound burger topped with guacamole, pepper jack cheese, roasted poblanos and crispy onions." />
</mx:VBox>
</mx:Tile>
</mx:VBox>
</mx:ViewStack>
</mx:Application>