1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 3    <mx:VDividedBox width="100%" height="100%">
 4        <mx:HBox width="100%" height="50%">
 5            <mx:Panel height="100%" width="33%" layout="absolute" id="panel1">
 6                <mx:Label text="Panel的layout設為absolute" x="64" y="11"/>
 7                <mx:Label text="此時的Panel相當于Canvas" x="10" y="116"/>
 8            </mx:Panel>
 9            <mx:Panel height="100%" width="37%" layout="horizontal">
10                <mx:Label text="Panel的layout設為horizontal"/>
11                <mx:Label text="此時的Panel相當于HBox"/>
12                <mx:ControlBar>
13                    <mx:Button label="Open Panel1" click="panel1.visible=true"/>
14                    <mx:Button label="Close Panel1" click="panel1.visible=false"/>
15                </mx:ControlBar>
16            </mx:Panel>        
17            <mx:Panel height="100%" width="30%" layout="vertical">
18                <mx:Label text="Panel的layout設為vertical"/>
19                <mx:Label text="此時的Panel相當于VBox"/>
20                <mx:ControlBar>
21                    <mx:Button label="Open TitleWindow" click="titleWindows.visible=true"/>
22                </mx:ControlBar>
23            </mx:Panel>                
24        </mx:HBox>
25        <mx:TitleWindow width="50%" height="50%" close="titleWindows.visible=false" id="titleWindows" showCloseButton="true">
26            <mx:Label text="這是一個TitleWindow"/>
27            <mx:Label text="它比Panel多了一個關閉按鈕，通過showCloseButton=true讓它顯示"/>
28            <mx:Label text="通過close屬性，可以做一些相關操作"/>
29        </mx:TitleWindow>    
30    </mx:VDividedBox>
31</mx:Application>

6）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>

7）Form、FormItem、FormHeading

FormHeading：表單標題

FormItem：多個FormItem構成表單的內容。FormItem有一個required屬性，來設置是否允許為空。

From這個控件很簡單，但是需要學習一下如何對這個表單內元素進行驗證，Flex提供了強大的驗證機制。常用的驗證類有StringValidator，NumberValidator，DateValidator，EmailValidator。

拿StringValidator來學習一下它的用法。

1<mx:StringValidator source="{pwd}" minLength="6" maxLength="12" tooShortError="密碼要大于6位" tooLongError="密碼要小于12位" property="text"/>

Source屬性：表示要驗證的對象。

Property屬性：表示要驗證對象的那個屬性。

這里的意思是要驗證的對象為pwd，驗證pwd對象的text屬性。