flex 学习笔记 TabNavigator

ViewStack、TabNavigator

ViewStack是由若干个重合在一起的子容器组成的。但是每次只有一个子容器是可见的。ViewStack不提供可视化的操作来切换它的子容器，但是我们可以通过selectedChild来实现。TabNavigator和viewStack基本相同，只不过它多了一个可视化的标签条来切换内部的子容器。

1 <? xml version="1.0" ?>
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" fontSize ="12" >
3 < mx:VDividedBox width ="100%" height ="100%" >
4 < mx:Panel title ="ViewStack Example" height ="40%" width ="95%"
5 paddingTop ="10" paddingLeft ="10" paddingRight ="10" paddingBottom ="10" >
6
7 < mx:HBox borderStyle ="solid" width ="100%"
8 paddingTop ="5" paddingLeft ="5" paddingRight ="5" paddingBottom ="5" >
9 < mx:Button label ="Search Panel"
10 click ="myViewStack.selectedChild=search;" />
11 < mx:Button label ="Customer Panel"
12 click ="myViewStack.selectedChild=custInfo;" />
13 < mx:Button label ="Boss Panel"
14 click ="myViewStack.selectedChild=accountInfo;" />
15 </ mx:HBox >
16
17 < mx:ViewStack id ="myViewStack" borderStyle ="solid" width ="100%" height ="80%" >
18 < mx:Canvas id ="search" backgroundColor ="#FFFFCC" label ="Search Info" width ="100%" height ="100%" >
19 < mx:Label text ="Search Screen" />
20 </ mx:Canvas >
21 < mx:Canvas id ="custInfo" backgroundColor ="#CCFFFF" label ="Customer Info" width ="100%" height ="100%" >
22 < mx:Label text ="Customer Info" />
23 </ mx:Canvas >
24 < mx:Canvas id ="accountInfo" backgroundColor ="#FFCCFF" label ="Boss Info" width ="100%" height ="100%" >
25 < mx:Label text ="Boss Info" />
26 </ mx:Canvas >
27 </ mx:ViewStack >
28 </ mx:Panel >
29 < mx:Panel title ="TabNavigator Example" height ="60%" width ="95%" paddingTop ="10" paddingLeft ="10" paddingRight ="10" paddingBottom ="10" >
30 < mx:TabNavigator width ="100%" height ="100%" id ="tabNav" >
31 < mx:Canvas id ="search1" backgroundColor ="#FFFFCC" label ="Search Info" width ="100%" height ="100%" >
32 < mx:Label text ="Search Screen" />
33 </ mx:Canvas >
34 < mx:Canvas id ="custInfo1" backgroundColor ="#CCFFFF" label ="Customer Info" width ="100%" height ="100%" >
35 < mx:Label text ="Customer Info" />
36 </ mx:Canvas >
37 < mx:Canvas id ="accountInfo1" backgroundColor ="#FFCCFF" label ="Boss Info" width ="100%" height ="100%" >
38 < mx:Label text ="Boss Info" />
39 </ mx:Canvas >
40 </ mx:TabNavigator >
41
42 < mx:HBox borderStyle ="solid" width ="100%"
43 paddingTop ="5" paddingLeft ="5" paddingRight ="5" paddingBottom ="5" >
44 < mx:Label text ="selectedChild" />
45 < mx:Button label ="Search"
46 click ="tabNav.selectedChild=search1;" />
47 < mx:Button label ="Customer"
48 click ="tabNav.selectedChild=custInfo1;" />
49 < mx:Button label ="Boss"
50 click ="tabNav.selectedChild=accountInfo1;" />
51 </ mx:HBox >
52 < mx:HBox borderStyle ="solid" width ="100%"
53 paddingTop ="5" paddingLeft ="5" paddingRight ="5" paddingBottom ="5" >
54 < mx:Label text ="selectedIndex" />
55 < mx:Button label ="Search"
56 click ="tabNav.selectedIndex=0;" />
57 < mx:Button label ="Customer"
58 click ="tabNav.selectedIndex=1" />
59 < mx:Button label ="Boss"
60 click ="tabNav.selectedIndex=2" />
61 </ mx:HBox >
62 </ mx:Panel >
63 </ mx:VDividedBox >
64 </ mx:Application >