本文和大家重點(diǎn)討論一下FlexBuilder教程中數(shù)據(jù)綁定，界面布局和導(dǎo)航方面的內(nèi)容，以MXML標(biāo)記來描述UI，數(shù)據(jù)綁定(Databinding)來連接數(shù)據(jù)，這樣就真正實(shí)現(xiàn)了UI和程序邏輯的分離。

一，F(xiàn)lexBuilder教程中的數(shù)據(jù)綁定

以MXML標(biāo)記來描述UI，數(shù)據(jù)綁定(Databinding)來連接數(shù)據(jù)，這樣就真正實(shí)現(xiàn)了UI和程序邏輯的分離。Databinding可以一綁多或者多綁一。

1，在MXML中使用大括號(hào){}語句:格式為:{源對(duì)象.屬性}?？芍苯觽魉徒o目標(biāo)對(duì)象；高級(jí)用法是在{}中包含AS表達(dá)式、AS函數(shù)或者E4X表達(dá)式

2，在MXML中使用<mx:Binding>標(biāo)簽:這是{}語句的替代用法，格式為:<mx:Bindingsource="源對(duì)象.屬性"destination="目標(biāo)對(duì)象.屬性"/>；

高級(jí)用法是在標(biāo)簽中包含AS表達(dá)式或者E4X表達(dá)式//在Model數(shù)據(jù)中使用{}語句來綁定數(shù)據(jù)

<mx:Modelidmx:Modelid="thing1"> 
<data> 
<part>{input1.text}</part> 
</data> 
</mx:Model> 
//用<mx:Binding>標(biāo)簽來綁定數(shù)據(jù)  
<mx:Bindingsourcemx:Bindingsource="input2.text"destination="thing1.part"/> 
 
<mx:TextInputidmx:TextInputid="input1"/> 
<mx:TextInputidmx:TextInputid="input2"/> 
 
<mx:TextAreatextmx:TextAreatext="{thing1.part}"/> 
 

 
3，使用AS類來綁定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法

二，F(xiàn)lexBuilder教程中界面布局和導(dǎo)航

容器定義了FlashPlayer的繪圖表面的一個(gè)矩形區(qū)域。子容器包括控件和容器。Container類是所有Flex容器類的基本類。擴(kuò)展Container類的容器添加它們自己的功能以進(jìn)行子組件布局。Application容器是的Flex應(yīng)用程序的唯一根部容器,代表整個(gè)FlashPlayer繪圖表面。

1，布局容器:

使用FlexBuilder教程中布局容器可進(jìn)行用戶界面布局。

A,面板(Panel)容器顯示一個(gè)標(biāo)題欄、一個(gè)標(biāo)題、一個(gè)邊框及其子級(jí)。默認(rèn)情況下,Panel容器會(huì)對(duì)子組件進(jìn)行垂直布局,并且可以通過將布局屬性設(shè)置為"absolute"或"horizontal"來覆蓋此設(shè)置。

B,HDividedBox容器對(duì)子組件進(jìn)行水平布局,除了在子級(jí)之間插入一個(gè)可調(diào)整的分割線之外,它與HBox容器很相似。VDividedBox容器對(duì)子組件進(jìn)行垂直布局,而且也在子級(jí)之間插入一個(gè)可調(diào)整的分割線。

C,平鋪(Tile)容器以多行或多列的形式排列其子級(jí)。

D,表單(Form)容器以標(biāo)準(zhǔn)的表單格式排列其子級(jí)。

E,ApplicationControlBar容器容納提供全局導(dǎo)航和應(yīng)用程序命令的組件,并可以?？吭贏pplication容器的上邊緣。

F,ControlBar容器將控件置于Panel或TitleWindow容器的下邊緣。

G,另外可使用Spacer控件來輔助布局。Spacer控件并非容器，而是基于百分比的可用于擠占留空以準(zhǔn)確定位的一個(gè)不可見控件。

2,導(dǎo)航容器:

使用FlexBuilder教程中導(dǎo)航容器可以控制其他容器的多個(gè)子級(jí)之間的用戶移動(dòng)或?qū)Ш?。?dǎo)航器容器不能直接嵌套控件，只能嵌套容器。

A，手風(fēng)琴(Accordion)容器定義一個(gè)子面板序列,但一次僅顯示一個(gè)面板。若要導(dǎo)航容器,用戶會(huì)單擊與他們需要訪問的子面板相對(duì)應(yīng)的導(dǎo)航按鈕。使用Accordion容器,用戶可以按任何順序訪問子面板以在表單中前后移動(dòng)。

B,TabNavigator容器創(chuàng)建和管理一組選項(xiàng)卡,使用它們可在其子級(jí)中間導(dǎo)航。TabNavigator容器的子級(jí)是其他容器。TabNavigator容器為每個(gè)子級(jí)創(chuàng)建一個(gè)選項(xiàng)卡。當(dāng)用戶選中某個(gè)選項(xiàng)卡時(shí),TabNavigator容器會(huì)顯示相關(guān)聯(lián)的子級(jí)。

C,ViewStack容器由彼此堆疊在一起的子容器的一個(gè)集合組成,一次只有一個(gè)容器是可見的或活動(dòng)的。ViewStack容器不為用戶定義切換當(dāng)前活動(dòng)容器的內(nèi)置機(jī)制；您必須使用LinkBar、TabBar、ButtonBar或ToggleButtonBar控件或自己在ActionScript中構(gòu)建邏輯讓用戶來更改當(dāng)前活動(dòng)的子級(jí)。

3,使用容器Containers進(jìn)行定位布局

定位方式有三種:

A,自動(dòng)定位:多數(shù)Flex容器使用默認(rèn)預(yù)定義的規(guī)則來自動(dòng)定位你在其中定義的所有的子組件。

B,使用絕對(duì)定位:用于使控件重疊

C,使用基于約束的布局:可以錨定容器的邊緣或者中心點(diǎn)，然后控件就會(huì)隨著容器的伸縮而伸縮

Canvas容器，和layout屬性為absolute的Application或Panel容器才能進(jìn)行絕對(duì)定位，或約束布局。

4，使用視圖狀態(tài)(或ViewStack導(dǎo)航容器)進(jìn)行用戶界面切換導(dǎo)航

可以為一個(gè)Flex程序或組件定義幾種視圖狀態(tài)，然后通過改變(切換)視圖狀態(tài)而改變用戶界面。(ViewStack導(dǎo)航容器可實(shí)現(xiàn)同樣效果)

1)，設(shè)計(jì)基礎(chǔ)狀態(tài)(Basestate,Start,currentState=''):就是在默認(rèn)狀態(tài)下設(shè)計(jì)用戶界面。

2)，設(shè)計(jì)視圖狀態(tài)(currentState='SomeState'):在設(shè)計(jì)模式中，在狀態(tài)查看（Window>States）上點(diǎn)擊新狀態(tài)/NewState按鈕。然后在此狀態(tài)下編輯的界面即為該視圖的對(duì)應(yīng)界面。

3)，創(chuàng)建用戶行為切換控件:定義用戶變換狀態(tài)的點(diǎn)擊事件處理器。一般是使用一個(gè)LinkButtun，激活currentState='SomeState'以切換到某界面，激活currentState=''以回到默認(rèn)界面。

【編輯推薦】

1. 解析Flexbuilder4十大新特性
2. 從Flex Builder更名看Flash平臺(tái)戰(zhàn)略
3. Flex及FlexBuilder2.0開發(fā)環(huán)境詳解
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件