這個速學教程教你該如何在Flex Builder中創建基于約束的布局。

一個基于約束的布局確保當在用戶重設置應用程序窗口大小時，應用程序中的組件會聰明地自我調節大小。

開始之前
開始這個速學教程之前，確定你完成下面的任務:

■在Flex Builder中創建QuickStart項目。
■在Flex Builder中打開Project菜單中確認Build Automatically選項已選上,如下:



學習在Flex中基于約束的布局
當用戶重設置Flex應用程序窗口大小時,你想組件在你的布局中是聰明地自我調節大小時，基于約束的布局就能發揮它的作用。

你將使用Canvas容器創建基于約束的布局。Canvas容器使組件的大小與位置更有彈性。它附屬你當Canvas容器重設置大小時自動伸縮與移動組件的能力。

例如，如果當用戶將應用程序窗口拖大，你想TextInput文件本框的寬度跟著伸長，你能固定文件本框與Canvas容器左邊與右邊的位置，那么文件本框的寬度將被窗口的寬度而設定。

注意：在Flex中，所有的約束是相對于Canvas容器邊緣設置的。不能相對于其它的控件而設置。。

現在你明白基本概念後,你能在FlexBuilder中創建一個簡單的應用程序與定義約束的布局。

插入與放置組件

創建基于約束的布局的第一個步驟是在Canvas容器中放置組件。在Flex的容器中,只有Canvas容器是支持絕對坐標。

像Macromedia Flash的場景一樣,你能拖放與放置組件到Canvas容器的任何位置。對于象素點的準確性來說，你能設置x與y軸。

在這部分里,將插入與放置組件來組成一個簡單的反饋表單。

1.打開QuickStart項目,選擇File > New > MXML Application,在File Name中輸入Layout.mxml。

2.在Navigator視圖中右擊Layout.mxml文件,選擇Application Management > Set As Default Application,將它指定為默認被編譯的文件。



3.在設計視圖中,從Components面板(Window > Show View > Components)中拖放一個Label與一個TextInput控件到Canvas容器里。



4. 使用鼠標拖動Label與TextInputl控件肩并肩在Canvas容器3 分之1下的位置上(其實只要放到Canvas容器里就可以,下面會進行具體的調整)。

5.在Flex屬性面板中,展開General與Layout屬性面板。

設置General與Layout屬性的選項出現。



如果你看到的視圖與上面的不一樣,那請點擊視圖工具條上的View As Form按鈕。



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代碼:

程序代碼：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"> <mx:Canvas width="100%" height="100%"> <mx:Label x="20" y="60" text="Email"/> <mx:TextInput x="90" y="60" width="300"/> </mx:Canvas> </mx:Application>

9.在<mx:TextInput>標簽后面輸入下面的代碼來插入剩下的Flex控件:

程序代碼：

<mx:Label x="20" y="90" text="Comments"/> <mx:TextArea x="90" y="90" width="300" /> <mx:Button x="330" y="150" label="Send"/>

你能通過工具條上點擊Design按鈕來預覽已做好的布局。這個布局將如下圖:



10.保存文件。

11.點擊工具條上的Run按鈕。

瀏覽器自動打開并運行你的Flex應用程序。



注意: 瀏覽器必須了安裝Flash Player 8.5，Flex 2應用程序才能在瀏覽器中運行。

12.拖動應用程序的窗口的邊緣,使應用程序的窗口變大或變小。
組件仍然保持與窗口的左與上邊緣的絕對坐標位置,在重設置應用程序窗口大小時,他們不會伸長與縮小。例如:如果你將窗口縮小, Button控件將消失, TextInput與TextArea控件將被留下一部分。

下一個步驟設置對控件有約束性的布局,當用戶在重設置應用程序窗口大小時,他們會自動調整大小。

定義約束的布局

給組件在你的布局定位完后, 你將定義約束的布局,它能使組件跟隨應用程序窗口自我調整大小。

1.在設計視圖,選擇TextInput組件。

2.在Flex屬性面板,確定Layout類別已被展開。

Layout類別包含設置固定的選項。



3.定義約束的布局,在Layout類別中點擊左邊與右邊的固定選框,并在左邊文本框輸入90,右邊文文本框輸入60。這是TextInput控件與Canvas容器的左邊與右邊保持的距離,如下:



這兩個固定選框, 跟隨窗口固定TextInput控件的左右兩邊。在文本框中輸入的數字是指定TextInput控件與Canvas容器保持的距離有多遠(單位:像素(pixels))。

這些約束在MXML代碼里被表示如下：

程序代碼：

<mx:TextInput y="60"> <mx:layoutConstraints> <mx:EdgeAnchor left="90" right="60"/> </mx:layoutConstraints> </mx:TextInput>

4.在Canvas容器中選擇TextArea控件,在Flex屬性面板中,選擇所有的四個固定選框并輸入與邊緣保持的距離,如下:
■ left: 90
■ right: 60
■ top: 90
■ bottom: 190

TextArea的Flex屬性面板如下:



5.在Canvas容器中選擇TextArea控件,在Flex屬性面板中,選上右邊與下邊的固定選框,并在右邊文本框輸入60,下邊文本框輸入150。



6.保存文件,等待Flex Builder直到編譯完成應用程序,再點擊工具條上的Run按鈕。

瀏覽器自動打開并運行你的Flex應用程序。



7.拖動應用程序的窗口的邊緣,使應用程序的窗口變大或變小。
例如, 如果你將應用程序的窗口縮小, Button控件會向內移動, TextInput與TextArea控件將會跟隨縮小。



如果你將應用程序的窗口拖長, Button控件會向外移動, TextInput與TextArea控件將會跟隨拖長。



這個速學教程中,已教會你該如何在Flex Builder中創建基于約束的布局。