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属性。