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>