Projects - Flex Builder - Using Navagation Containers
.mxml code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="550" height="550"
>
<mx:Panel
layout="absolute"
left="10" top="10" right="10" bottom="10"
title="Navigators"
>
<mx:Accordion width="47.5%" height="200" top="36"
left="10">
<mx:Canvas label="Navigation button 1" width="100%"
height="100%">
<mx:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 2" width="100%"
height="100%">
<mx:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 3" width="100%"
height="100%">
<mx:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:Accordion>
<mx:TabNavigator right="10" width="47.5%" height="200"
y="36">
<mx:Canvas label="Tab 1" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="Tab 2" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="Tab 3" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:TabNavigator>
<mx:ViewStack
id="myViewStack"
width="47.5%" height="200" right="10" bottom="10"
borderColor="#000000" borderStyle="solid"
>
<mx:Canvas label="View 1" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="View 2" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="View 3" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:ViewStack>
<!-- Labels for the various controls -->
<mx:Label x="10" y="252" text="ButtonBar"/>
<mx:Label x="10" y="10" text="Accordion"/>
<mx:Label x="262.5" y="10" text="TabNavigator"/>
<mx:Label x="262.5" y="252" text="ViewStack"/>
<mx:Label x="10" y="308" text="ToggleButtonBar"/>
<mx:Label x="10" y="364" text="LinkBar"/>
<mx:Label x="10" y="424" text="TabBar"/>
<!--
All these navigators use the same dataProvider,
namely, the myViewStack ViewStack instance.
Changing the selected view in one will affect
all the others also.
-->
<mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}"
/>
<mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}"
/>
<mx:LinkBar x="10" y="390" dataProvider="{myViewStack}"
/>
<mx:TabBar x="10" y="444" dataProvider="{myViewStack}"
/>
</mx:Panel>
</mx:Application>