FlexBuilder2.0中創建基于約束的布局
本文和大家重點討論一下FlexBuilder2.0中創建基于約束的布局，這個速學教程教你該如何在FlexBuilder2.0中創建基于約束的布局。一個基于約束的布局確保當在用戶重設置應用程序窗口大小時，應用程序中的組件會聰明地自我調節大小。
FlexBuilder2.0中創建基于約束的布局
這個速學教程教你該如何在FlexBuilder2.0中創建基于約束的布局。一個基于約束的布局確保當在用戶重設置應用程序窗口大小時，應用程序中的組件會聰明地自我調節大小。
開始之前
開始這個速學教程之前，確定你完成下面的任務:
◆在FlexBuilder2.0中創建QuickStart項目。
◆在FlexBuilder2.0中打開Project菜單中確認BuildAutomatically選項已選上,如下:
學習在FlexBuilder2.0中基于約束的布局
當用戶重設置Flex應用程序窗口大小時,你想組件在你的布局中是聰明地自我調節大小時，基于約束的布局就能發揮它的作用。
你將使用Canvas容器創建基于約束的布局。Canvas容器使組件的大小與位置更有彈性。它附屬你當Canvas容器重設置大小時自動伸縮與移動組件的能力。
例如，如果當用戶將應用程序窗口拖大，你想TextInput文件本框的寬度跟著伸長，你能固定文件本框與Canvas容器左邊與右邊的位置，那么文件本框的寬度將被窗口的寬度而設定。
注意：在Flex中，所有的約束是相對于Canvas容器邊緣設置的。不能相對于其它的控件而設置。
現在你明白基本概念后,你能在FlexBuilder2.0中創建一個簡單的應用程序與定義約束的布局。
插入與放置組件
創建基于約束的布局的***個步驟是在Canvas容器中放置組件。在Flex的容器中,只有Canvas容器是支持絕對坐標。
像MacromediaFlash的場景一樣,你能拖放與放置組件到Canvas容器的任何位置。對于象素點的準確性來說，你能設置x與y軸。
在這部分里,將插入與放置組件來組成一個簡單的反饋表單。
1.打開QuickStart項目,選擇File>New>MXMLApplication,在FileName中輸入Layout.mxml。
2.在Navigator視圖中右擊Layout.mxml文件,選擇ApplicationManagement>SetAsDefaultApplication,將它指定為默認被編譯的文件。
3.在設計視圖中,從Components面板(Window>ShowView>Components)中拖放一個Label與一個TextInput控件到Canvas容器里。
4.使用鼠標拖動Label與TextInputl控件肩并肩在Canvas容器3分之1下的位置上(其實只要放到Canvas容器里就可以,下面會進行具體的調整)。
5.在FlexBuilder2.0屬性面板中,展開General與Layout屬性面板。設置General與Layout屬性的選項出現。
如果你看到的視圖與上面的不一樣,那請點擊視圖工具條上的ViewAsForm按鈕。
6.在Canvas容器上,選擇Label控件與在Flex屬性面板給Label設置以下屬性:
◆text:Email
◆x:20
◆y:60
7.在Canvas容器上,選擇TextInput控件與在Flex屬性面板給TextInput設置以下屬性:
◆x:90
◆y:60
◆width:300
8.在工具條上點擊Code按鈕,將視圖轉為代碼視圖。
Layout.mxml文件將包含下面的MXML代碼:
程序代碼：
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.macromedia.com/2005/mxml"
- xmlns="*">
- <mx:Canvaswidthmx:Canvaswidth="100%"height="100%">
- <mx:Labelxmx:Labelx="20"y="60"text="Email"/>
- <mx:TextInputxmx:TextInputx="90"y="60"width="300"/>
- </mx:Canvas>
- </mx:Application>
9.在<mx:TextInput>標簽后面輸入下面的代碼來插入剩下的Flex控件:
程序代碼：
- <mx:Labelxmx:Labelx="20"y="90"text="Comments"/>
- <mx:TextAreaxmx:TextAreax="90"y="90"width="300"/>
- <mx:Buttonxmx:Buttonx="330"y="150"label="Send"/>
你能通過工具條上點擊Design按鈕來預覽已做好的布局。這個布局將如下圖:
10.保存文件。
11.點擊工具條上的Run按鈕。
瀏覽器自動打開并運行你的FlexBuilder2.0應用程序。
注意:瀏覽器必須了安裝FlashPlayer8.5，Flex2應用程序才能在瀏覽器中運行。
12.拖動應用程序的窗口的邊緣,使應用程序的窗口變大或變小。
組件仍然保持與窗口的左與上邊緣的絕對坐標位置,在重設置應用程序窗口大小時,他們不會伸長與縮小。例如:如果你將窗口縮小,Button控件將消失,TextInput與TextArea控件將被留下一部分。
下一個步驟設置對控件有約束性的布局,當用戶在重設置應用程序窗口大小時,他們會自動調整大小。
【編輯推薦】
- FlexBuilder2.0 速學教程之編譯應用程序
- Flex安全沙箱問題解決方法
- Flex及FlexBuilder2.0開發環境詳解
- FlexBuilder3.0與Eclipse3.4的***結合
- Flex內存泄露解決方法和內存釋放優化原則
