這個(gè)速學(xué)教程教你該如何在Flex Builder中創(chuàng)建基于約束的布局。
一個(gè)基于約束的布局確保當(dāng)在用戶重設(shè)置應(yīng)用程序窗口大小時(shí)，應(yīng)用程序中的組件會(huì)聰明地自我調(diào)節(jié)大小。
開始之前開始這個(gè)速學(xué)教程之前，確定你完成下面的任務(wù):
■在Flex Builder中
創(chuàng)建QuickStart項(xiàng)目。
■在Flex Builder中打開
Project菜單中確認(rèn)
Build Automatically選項(xiàng)已選上,如下:
學(xué)習(xí)在Flex中基于約束的布局當(dāng)用戶重設(shè)置Flex應(yīng)用程序窗口大小時(shí),你想組件在你的布局中是聰明地自我調(diào)節(jié)大小時(shí)，
基于約束的布局就能發(fā)揮它的作用。
你將使用
Canvas容器創(chuàng)建
基于約束的布局。
Canvas容器使組件的大小與位置更有彈性。它附屬你當(dāng)
Canvas容器重設(shè)置大小時(shí)自動(dòng)伸縮與移動(dòng)組件的能力。
例如，如果當(dāng)用戶將應(yīng)用程序窗口拖大，你想
TextInput文件本框的寬度跟著伸長(zhǎng)，你能固定文件本框與
Canvas容器左邊與右邊的位置，那么文件本框的寬度將被窗口的寬度而設(shè)定。
注意：在Flex中，所有的約束是相對(duì)于Canvas容器邊緣設(shè)置的。不能相對(duì)于其它的控件而設(shè)置。。現(xiàn)在你明白基本概念後,你能在FlexBuilder中創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序與
定義約束的布局。
插入與放置組件創(chuàng)建
基于約束的布局的第一個(gè)步驟是在
Canvas容器中放置組件。在Flex的容器中,只有
Canvas容器是支持絕對(duì)坐標(biāo)。
像
Macromedia Flash的場(chǎng)景一樣,你能拖放與放置組件到
Canvas容器的任何位置。對(duì)于象素點(diǎn)的準(zhǔn)確性來(lái)說(shuō)，你能設(shè)置x與y軸。
在這部分里,將插入與放置組件來(lái)組成一個(gè)簡(jiǎn)單的反饋表單。
1.打開
QuickStart項(xiàng)目,選擇
File > New > MXML Application,在
File Name中輸
入Layout.mxml。
2.在
Navigator視圖中右擊
Layout.mxml文件,選擇
Application Management > Set As Default Application,將它指定為
默認(rèn)被編譯的文件。
3.在設(shè)計(jì)視圖中,從
Components面板(Window > Show View > Components)中拖放一個(gè)
Label與一個(gè)
TextInput控件到
Canvas容器里。
4. 使用鼠標(biāo)拖動(dòng)
Label與
TextInputl控件肩并肩在
Canvas容器3 分之1下的位置上(其實(shí)只要放到
Canvas容器里就可以,下面會(huì)進(jìn)行具體的調(diào)整)。
5.在Flex屬性面板中,展開
General與
Layout屬性面板。
設(shè)置
General與
Layout屬性的選項(xiàng)出現(xiàn)。
如果你看到的視圖與上面的不一樣,那請(qǐng)點(diǎn)擊視圖工具條上
的View As Form按鈕。
6.在
Canvas容器上,選擇
Label控件與在Flex屬性面板給
Label設(shè)置以下屬性:
■ text: Email
■ x: 20
■ y: 607. 在
Canvas容器上,選擇
TextInput控件與在Flex屬性面板給
TextInput設(shè)置以下屬性:
■ x: 90
■ y: 60
■ width: 3008. 在工具條上點(diǎn)擊
Code按鈕,將視圖轉(zhuǎn)為代碼視圖。
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>標(biāo)簽后面輸入下面的代碼來(lái)插入剩下的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"/>
|
你能通過工具條上點(diǎn)擊
Design按鈕來(lái)預(yù)覽已做好的布局。這個(gè)布局將如下圖:
10.保存文件。
11.點(diǎn)擊工具條上的
Run按鈕。
瀏覽器自動(dòng)打開并運(yùn)行你的Flex應(yīng)用程序。
注意: 瀏覽器必須了安裝Flash Player 8.5，F(xiàn)lex 2應(yīng)用程序才能在瀏覽器中運(yùn)行。12.拖動(dòng)應(yīng)用程序的窗口的邊緣,使應(yīng)用程序的窗口變大或變小。
組件仍然保持與窗口的左與上邊緣的絕對(duì)坐標(biāo)位置,在重設(shè)置應(yīng)用程序窗口大小時(shí),他們不會(huì)伸長(zhǎng)與縮小。例如:如果你將窗口縮小,
Button控件將消失,
TextInput與
TextArea控件將被留下一部分。
下一個(gè)步驟設(shè)置對(duì)控件有約束性的布局,當(dāng)用戶在重設(shè)置應(yīng)用程序窗口大小時(shí),他們會(huì)自動(dòng)調(diào)整大小。
定義約束的布局給組件在你的布局定位完后, 你將
定義約束的布局,它能使組件跟隨應(yīng)用程序窗口自我調(diào)整大小。
1.在設(shè)計(jì)視圖,選擇
TextInput組件。
2.在Flex屬性面板,確定
Layout類別已被展開。
Layout類別包含設(shè)置固定的選項(xiàng)。
3.
定義約束的布局,在
Layout類別中點(diǎn)擊左邊與右邊的
固定選框,并在左邊文本框輸入
90,右邊文文本框輸入
60。這是
TextInput控件與
Canvas容器的左邊與右邊保持的距離,如下:
這兩個(gè)固定選框, 跟隨窗口固定
TextInput控件的左右兩邊。在文本框中輸入的數(shù)字是指定
TextInput控件與
Canvas容器保持的距離有多遠(yuǎn)(
單位:像素(pixels))。
這些約束在MXML代碼里被表示如下：
| 程序代碼： |
|
<mx:TextInput y="60">
<mx:layoutConstraints>
<mx:EdgeAnchor left="90" right="60"/>
</mx:layoutConstraints>
</mx:TextInput>
|
4.在
Canvas容器中選擇
TextArea控件,在Flex屬性面板中,選擇所有的四個(gè)
固定選框并輸入與邊緣保持的距離,如下:
■ left: 90
■ right: 60
■ top: 90
■ bottom: 190TextArea的Flex屬性面板如下:
5.在
Canvas容器中選擇
TextArea控件,在Flex屬性面板中,選上右邊與下邊的
固定選框,并在右邊文本框輸入
60,下邊文本框輸入
150。
6.保存文件,等待Flex Builder直到編譯完成應(yīng)用程序,再點(diǎn)擊工具條上的
Run按鈕。
瀏覽器自動(dòng)打開并運(yùn)行你的Flex應(yīng)用程序。
7.拖動(dòng)應(yīng)用程序的窗口的邊緣,使應(yīng)用程序的窗口變大或變小。
例如, 如果你將應(yīng)用程序的窗口縮小,
Button控件會(huì)向內(nèi)移動(dòng),
TextInput與
TextArea控件將會(huì)跟隨縮小。
如果你將應(yīng)用程序的窗口拖長(zhǎng),
Button控件會(huì)向外移動(dòng),
TextInput與
TextArea控件將會(huì)跟隨拖長(zhǎng)。
這個(gè)速學(xué)教程中,已教會(huì)你該如何在Flex Builder中創(chuàng)建
基于約束的布局。