Tour de Flex中经典例子（一)-------LinkBar与Viewstack实现导航

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>

<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
</s:layout>

<s:Panel title="LinkBar Control" width="600" height="100%"
color="0x000000"
borderAlpha="0.15">

<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>

<s:Label width="100%" color="0x323232" textAlign="center"
text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>

<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>

<!-- Define the ViewStack and the three child containers -->
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232">

<s:NavigatorContent id="search" label="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
<s:layout>
<s:VerticalLayout horizontalAlign="center" />
</s:layout>

<s:Label text="Search Panel" width="100%" textAlign="center" paddingTop="10" />
<s:HGroup>
<s:TextInput id="Searchtxt" width="200" />
<s:Button label="search" click="Searchtxt.text=''" />
</s:HGroup>
</s:NavigatorContent>

<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" width="100%" height="100%">

<s:layout>
<s:VerticalLayout horizontalAlign="center" />
</s:layout>

<s:Label text="Customer Info" width="100%" textAlign="center" paddingTop="10" />
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
<s:Button label="Submit" click="email.text='';" />
</s:HGroup>

</s:NavigatorContent>

<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >

<s:layout>
<s:VerticalLayout horizontalAlign="center" />
</s:layout>

<s:Label text="Account Info" width="100%" textAlign="center" paddingTop="10" />
<s:HGroup>
<mx:Button label="Purchases" />
<mx:Button label="Sales" />
<mx:Button label="Reports" />
</s:HGroup>
</s:NavigatorContent>

</mx:ViewStack>

</s:Panel>
</s:Application>