1.管理程序的布局
容器累组件都位于mx.containers包中。Container类是UIComponent的子类，是所有Flex容器类的父类，每个容器类都在它的基础上添加自己的功能。
1.1控制Application 的布局
Application 是一个特殊的容器，位于界面元素的根部，包含了整个程序的所有元素。
layout ：
值为absolute时，horizontalAlign水平对齐和verticalAlign垂直对齐不起作用，界面上的元素将由各自的坐标决定。
值为vertical 或 horizontal时，元素的位置由horizontalAlign和verticalAlign控制。
width 长， height 高。决定SWF文件的尺寸。
我们可以设置如下的属性，所有组件公有：
horizontalGap 水平间距
vericalGap 垂直间距
paddingTop 顶部边距
paddingLeft 左边距
paddingRight 右边距
paddingBottom 底边距
Constraint layout 约束布局，只能在layout属性值为absolute才能使用，具有这一特性的容器有：Application、Canvas、Panel和Panel的子类TitleWingdow
点击元素得到如下界面：
如果对某一组件使用了约束布局，它会被强制定位在相应的位置，设置的X,Y坐标会失效。
ApplicationContolBar是和Application相关的一个容器，通常用来提供全局导航。有水平（默认）和垂直方向选择。它的dock属性，表示是否强行停靠在Application的顶部。默认false，被当作一个普通的组件。true，始终在顶部，宽度为100%。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%"
4. horizontalGap="0" verticalGap="0" paddingTop="0">
5. <mx:Button label="Button1" height="120" x="24" y="0"/>
6. <mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/>
7. <mx:Button label="Button3" width="240" x="168" y="0"/>
8. <mx:ApplicationControlBar dock="true">
9. <mx:Label text="这里是顶部导航" width="93" height="20"/>
10. </mx:ApplicationControlBar>
11.</mx:Application>
1.2 Canvas
Canvas 直接继承自Container，体积小，使用灵活。在它里面的元素只能由X,Y来定位。如果元素超出 Canvas的区域范围，Canvas会自动增加滚动条。每个容器默认情况下都会自动带滚动条。可以通过horizontalScrollPolicy和 verticalScrollPolicy 的属性值来控制，on/off/auto。在AS中对应ScrollPolicy.ON,ScrollPolicy.OFF,ScrollPolicy.AUTO。
1.3 VBox 和 HBox
VBox 和 HBox 都是Box的子类，和Canvas相比,Box对子级元素采取规则的布局方式，其中VBox内的元素垂直方向分布，而HBox水平方向分布。通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left"
4. verticalAlign="middle">
5. <mx:Button label="Button"/>
6. <mx:Label text="这是一个HBox"/>
7. </mx:HBox>
8. <mx:VBox width="50%" x="263" y="30" height="100%">
9. <mx:Label text="这是一个VBox"/>
10. <mx:Button label="Button"/>
11. </mx:VBox>
12.</mx:Application>
1.4 用DividedBox分割界面
DividedBox继承自Box类，它有两个子类：HDividedBox和VDividedBox。类似于HBox和VBox，多了在子级元素之间增加了可以拖动的分割块。拖动分割块可以动态的调整分割块附近元素的长宽。
borderStyle是组件的样式之一，表示边框样式，默认：none，表示无边框。solid为实心线条。
liveDragging：true 表示在拖动时，在松开鼠标后，调整位置。false 拖动时调整。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid"
4. x="10" y="10">
5. <mx:Canvas width="200" height="246">
6. <mx:Label x="33" y="10" text="一个Canvas容器"/>
7. </mx:Canvas>
8. <mx:HBox width="50%" height="50%">
9. <mx:Label text="HBox容器" width="140"/>
10. <mx:HBox width="50%" height="50%">
11. <mx:Label text="HBox内的HBox" width="140"/>
12. </mx:HBox>
13. </mx:HBox>
14. </mx:HDividedBox>
15.</mx:Application>
2. 窗口布局
Panel组件就是这样一个窗口组件，它直接继承Container。和它的子类TitleWindow都具有窗口程序的特点：有标题条，可以放置其他内容，形成一个整体。
2.1 Panel 组件
fontSize 表示字体大小，默认是10.一般中文12显示较清晰。
title 表示窗口的标题。
ControBar Panel的一个容器，位置不可调整总是在底部，布局模式跟HBox相同。可以放置按钮等组件。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:Panel x="53" y="49" width="302" height="254" layout="horizontal" title="这里是标题"
4. fontSize="12">
5. <mx:Label text="这里放置其它内容"/>
6. <mx:ControlBar height="24" paddingBottom="0" paddingTop="0"
7.horizontalAlign="right">
8. <mx:Button label="其他控制"/>
9. </mx:ControlBar>
10. </mx:Panel>
11.</mx:Application>
为窗口添加关闭按钮：
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Canvas width ="300" height="300" xmlns:mx="http://www.adobe.com/2006/mxml">
3.<mx:Script>
4. <![CDATA[
5. //点击关闭按钮时触发该函数
6. internal function doClose():void{
7. visible = false;
8. }
9. ]]>
10.</mx:Script>
11. <mx:Panel width ="100%" height="100%" layout="absolute" title="这里是标题"
12.fontSize="12">
13. <mx:Label text="这里放置其它内容" x="0" y="0"/>
14. <mx:ControlBar height="24" paddingBottom="0" paddingTop="0" horizontalAlign="right"
15. x="0" y="230">
16. <mx:Button label="其他控制"/>
17. </mx:ControlBar>
18. </mx:Panel>
19. <mx:Canvas width="40" height="24" top = "4" right="10">
20. <mx:Button label="X" width="30" x="10" click = "doClose()"/>
21. </mx:Canvas>
22.</mx:Canvas>
将上面的代码保存为MXML，然后使用下面的代码new一个实例出来：
1.<?xml version="1.0" encoding="utf-8"?>
2.<!--这里我们使用了命名空间，将主程序目录下所有的对象归到“tree”标记下-->
3.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
4. xmlns:tree= "*">
5. <tree:Panel2 x="54" y="24">
6. </tree:Panel2>
7.</mx:Application>
Application 的 applicationComplete 事件 会在主程序初始化后被触发。
接下来为窗口实现拖动功能，使用PopUpManager这个对象弹出Panel窗口，窗口将置于最上层，被称为Pop-Up弹出窗口。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
3.applicationComplete ="initApp()">
4. <mx:Script>
5. <![CDATA[
6. //导入类
7. import mx.managers.PopUpManager;
8. import mx.managers.PopUpManagerChildList
9. //导入Panel对象
10. import mx.containers.Panel;
11. //初始化函数
12. internal function initApp():void{
13. var win:Panel = new Panel();
14. win.width = 300;
15. win.height = 240;
16. win.title = "PopUp Panel";
17. win.x = 20;
18. win.y = 20;
19. //popup:弹出窗口
20. PopUpManager.addPopUp(win,this,true);
21. }
22. ]]>
23. </mx:Script>
24. <mx:Button x="130" y="280" label="Button"/>
25.</mx:Application>
PopUpManager.addPopUp函数可以将对象置于父级对象的顶层，对应的removePopUp可以删除弹出的对象。
addPopUp有4个参数：
window:IFlexDisplayObject, 弹出的对象
parent:DisplayObject, 分配给新弹出窗口层级的对象
modal:Boolean=false, true的话，变成模式窗口，直到窗口关闭，其他元素不可用。
childList:String=null 将添加新窗口的对象，默认为PopUpManagerChildList. PARENT
所有组件都可以被弹出，会触发组件的内部预写方法。如Panel，弹出后，内部的isPopUp属性变为true，就可拖动了。
2.2 TitleWindow 组件
继承Panel ，多了一个关闭按钮。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3.<mx:Script>
4. <![CDATA[
5. //点击后出发 close 事件，执行该函数
6. internal function doClose():void{
7. txt.text = "关闭按钮被点击了";
8. }
9. ]]>
10.</mx:Script>
11. <mx:TitleWindow x="52" y="45" width="250" height="271" close="doClose()" layout="absolute" title="TitleWindow 例子" fontSize="12" showCloseButton="true">
12. <mx:TextArea id="txt" x="25" y="38" height="143" text="这是一个文本区"/>
13. </mx:TitleWindow>
14.</mx:Application>
showCloseButton指定是否显示关闭按钮。
close指定点击关闭按钮调用的方法。是TitleWindow的关闭事件。
creationComplete 事件，对象的初始化后触发的事件。
3. 动态控制对象的布局
3.1 使用Tile 显示多个按钮
Tile直接继承Container，使用起来非常方便。适合重复排列的元素。
direction 属性值为 horizontal时，设置其子级对象的布局方向为水平方向。
tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3.
4. <mx:Script>
5. <![CDATA[
6. //导入 Button对象
7. import mx.controls.Button;
8. internal function addItem():void{
9. //创建Button实例
10. var btn:Button = new Button();
11. btn.label = "btn_10";
12. btn.height = 50;
13. btn.width = 75;
14. //向Tile容器中添加该按钮
15. holder.addChild(btn);
16. }
17. ]]>
18. </mx:Script>
19. <mx:Tile id="holder" x="41" y="45" width="330" height="280" horizontalGap="2"
20. direction="horizontal" tileHeight="80" tileWidth="80">
21. <mx:Button label="btn_1" height="50" width="75"/>
22. <mx:Button label="btn_2" height="50" width="75"/>
23. <mx:Button label="btn_3" height="50" width="75"/>
24. <mx:Button label="btn_4" height="50" width="75"/>
25. <mx:Button label="btn_5" height="50" width="75"/>
26. <mx:Button label="btn_6" height="50" width="75"/>
27. <mx:Button label="btn_7" height="50" width="75"/>
28. <mx:Button label="btn_8" height="50" width="75"/>
29. <mx:Button label="btn_9" height="50" width="75"/>
30. </mx:Tile>
31. <mx:Button x="266" y="340" label="增加一个按钮" fontSize="12" click="addItem()"/>
32.</mx:Application>
3.2 更强大的 Grid组件
Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。
colSpan 表示单元格所占的横向格数，rowSpan 表示单元格所占的纵向行数。类似于HTML的Table。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:Grid x="62" y="96" horizontalGap="2">
4. <mx:GridRow width="100%" height="79">
5. <mx:GridItem width="100%" height="100%">
6. <mx:Button label="Button1"/>
7. </mx:GridItem>
8. <mx:GridItem width="100%" height="100%" colSpan = "2">
9. <mx:Button label="Button2" height="60"/>
10. </mx:GridItem>
11. <mx:GridItem width="100%" height="100%">
12. <mx:Button label="Button3"/>
13. <mx:Button label="Button4"/>
14. </mx:GridItem>
15. </mx:GridRow>
16. <mx:GridRow width="100%" height="79">
17. <mx:GridItem width="100%" height="100%">
18. <mx:Button label="Button"/>
19. </mx:GridItem>
20. <mx:GridItem width="100%" height="100%">
21. <mx:Button label="Button" height="60" width="98"/>
22. </mx:GridItem>
23. <mx:GridItem width="112" height="100%">
24. <mx:Button label="Button" width="41" height="55"/>
25. <mx:Button label="Button" width="85"/>
26. </mx:GridItem>
27. </mx:GridRow>
28. </mx:Grid>
29.</mx:Application>
4. 方便的导航容器
导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。
4.1 Accordion 组件
Accordion 是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。
selectedChild 和 selectedIndex 表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3.
4. <mx:Script>
5. <![CDATA[
6. internal function doSkip():void{
7. tab_menu.selectedIndex = 1;
8. }
9. ]]>
10. </mx:Script>
11.
12. <mx:Accordion id="tab_menu" x="57" y="67" width="194" height="270" fontSize="12">
13. <mx:Canvas label="Item 1" width="100%" height="100%">
14. <mx:Label text="Canvas1" />
15. <mx:ColorPicker x="10" y="38"/>
16. </mx:Canvas>
17.
18. <mx:VBox label="Item 2" width="100%" height="100%">
19. <mx:Text text="这里插入内容" height="28"/>
20. <mx:ComboBox>
21. <mx:Array>
22. <mx:Object label="请选择性别"/>
23. <mx:Object label="女"/>
24. <mx:Object label="男"/>
25. </mx:Array>
26. </mx:ComboBox>
27. </mx:VBox>
28.
29. <mx:Panel title="内嵌的Panel" label="Item 3" width="90%" height="90%">
30. </mx:Panel>
31. </mx:Accordion>
32.
33. <mx:Button x="259" y="315" label="跳到第二个菜单" fontSize="14" labelPlacement="right" click="doSkip()"/>
34.</mx:Application>
4.2 ViewStack 组件
由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。
一般用来做向导类的应用。就是有那种下一步下一步的。
selectedChild 表示当前处于激活状态的子级对象。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:Script>
4. <![CDATA[
5. internal function doChange():void{
6. if(viewstack_1.selectedChild == child2){
7. viewstack_1.selectedChild = child1;
8. }else{
9. viewstack_1.selectedChild = child2;
10. }
11. }
12. ]]>
13. </mx:Script>
14. <mx:ViewStack x="46" y="72" id="viewstack_1" width="200" height="200">
15. <mx:Canvas id="child1" label="View 1" width="100%" height="100%">
16. <mx:List fontSize="12">
17. <mx:Array>
18. <mx:Object label="请选择您感兴趣的技术："/>
19. <mx:Object label="Flash"/>
20. <mx:Object label="Flex"/>
21. <mx:Object label="Flash Media server"/>
22. <mx:Object label="Breeze"/>
23. </mx:Array>
24. </mx:List>
25. </mx:Canvas>
26. <mx:Canvas id="child2" label="View 2" width="100%" height="100%">
27. <mx:TextInput text="请输入您的邮箱地址" fontSize="12"/>
28. </mx:Canvas>
29. </mx:ViewStack>
30. <mx:Button x="46" y="304" label="切换按钮" fontSize=" 12" click="doChange()"/>
31.</mx:Application>
4.3 使用 TabNavigator 进行快速导航
继承自ViewStack，还提供了用户却换内容的界面接口。
类似标签页却换面板。
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:TabNavigator x="70" y="91" width="200" height="200" >
4. <mx:Canvas label="Tab 1" width="100%" height="100%">
5. <mx:CheckBox x="10" y="31" label="选中我" fontSize="12"/>
6.
7. </mx:Canvas>
8. <mx:Canvas label="Tab 2" width="100%" height="100%">
9. <mx:Label x="20" y="41" text="第二个面板" fontSize="12"/>
10. </mx:Canvas>
11. </mx:TabNavigator>
12.
13.</mx:Application>
5. 表单布局
Flex提供了一套表弟组件，让我们可方便的构建复杂的表单程序。
Form容器是表单功能组件中的主要成员，继承自Container，相关的组件还有FormItem 和 FormHeading。
5.1 简单的用户输入表单
FormHeading 表示表弟标题，这里也可以放置顶部的导航控制。
FormItem 可以容纳多个组件，且组件的布局方向有 horizontal 和 vertical。FormItem 还有一个属性required 表示本栏的值是否为空。
5.2 表单验证
最后添加了5个验证对象，分别针对不同的组件，他们的source属性表示目标对象：
StringValidator 字符验证，property="text " 为文本属性，minLength 和 maxLength 表示字符最短长度和最长长度。tooShortError 提示信息。
PhoneNumberValidator 电话号码验证
DataValidator 日期验证
EmailValidator 邮箱验证
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:Panel title="用户注册信息" width="359" height="303" x="24.5" y="37" fontSize="12">
4. <mx:Form width="100%" height="100%" horizontalGap="0">
5. <mx:FormHeading label="用户资料" width="100%"/>
6. <mx:FormItem label="用户名：" width="100%" required="true">
7. <mx:TextInput width="100%" id="user_txt"/>
8. </mx:FormItem>
9. <mx:FormItem label="密码：" width="100%" required="true">
10. <mx:TextInput width="100%" displayAsPassword="true" id="pass_txt"/>
11. </mx:FormItem>
12. <mx:FormItem label="性别：" width="100%" direction="horizontal">
13. <mx:RadioButton groupName="isMale" label="男" /> <mx:RadioButton groupName="isMale" label="女" />
14. </mx:FormItem>
15. <mx:FormItem label="邮箱：" width="100%">
16. <mx:TextInput width="100%" id="email_txt"/>
17. </mx:FormItem>
18. <mx:FormItem label="电话：" width="100%">
19. <mx:TextInput width="100%" id="phone_txt"/>
20. </mx:FormItem>
21. <mx:FormItem label="出生年月：" width="100%">
22. <mx:TextInput width="100%" id="birth_txt"/>
23. </mx:FormItem>
24. </mx:Form>
25. <mx:ControlBar height="32" paddingBottom="0" paddingTop="0" horizontalAlign="center">
26. <mx:Button label="确定"/>
27. <mx:Button label="重写"/>
28. </mx:ControlBar>
29. </mx:Panel>
30.
31. <mx:StringValidator source="{user_txt}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短了"/>
32. <mx:StringValidator source="{pass_txt}" property="text" minLength="6" maxLength="12"/>
33. <mx:PhoneNumberValidator source="{phone_txt}" property="text"/>
34. <mx:DateValidator source="{birth_txt}" property="text"/>
35. <mx:EmailValidator source="{email_txt}" property="text"/>
36.
37.</mx:Application>