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 >