本文和大家重點(diǎn)討論一下Flex數(shù)據(jù)綁定的概念，F(xiàn)lex獲取數(shù)據(jù)的途徑有三種，分別為HTTPService、WebService、DataModule。以下介紹通過(guò)<mx:HTTPService>對(duì)象來(lái)獲取xml數(shù)據(jù)，并綁定下拉列表或表格對(duì)象的實(shí)現(xiàn)方法。

Flex數(shù)據(jù)綁定

Flex獲取數(shù)據(jù)的途徑有三種，分別為HTTPService、WebService、DataModule。以下介紹通過(guò)<mx:HTTPService>對(duì)象來(lái)獲取xml數(shù)據(jù)，并綁定下拉列表或表格對(duì)象的實(shí)現(xiàn)方法。

一、Flex數(shù)據(jù)綁定DataGrid

1．先進(jìn)入下述菜單新建一個(gè)flex工程：File->New->FlexApplication。此時(shí)將會(huì)出現(xiàn)向?qū)?duì)話框。

選擇默認(rèn)的數(shù)據(jù)訪問(wèn)方式后，接下來(lái)需要在下面的窗口中設(shè)置工程名稱以及存儲(chǔ)路徑。設(shè)置完成后，點(diǎn)擊“Finish”按鈕。

2．建立工程后，在主窗口中將會(huì)顯示一個(gè)擴(kuò)展名為*.mxml的頁(yè)面，并且該頁(yè)面的文件名與工程名相同。例如，在如下窗口中，開發(fā)人員可以在Source模式或Design模式下切換來(lái)對(duì)頁(yè)面進(jìn)行編輯。
其中，Design模式為所見即所得設(shè)計(jì)方式，開發(fā)人員可以從左側(cè)的控件列表中選擇需要的對(duì)象拖入設(shè)計(jì)頁(yè)面中。如下圖所示，可選的可視化對(duì)象包含按鈕、復(fù)選框、標(biāo)簽等常用對(duì)象。

3．選擇DataGrid對(duì)象，在設(shè)計(jì)模式下放入頁(yè)面中。該對(duì)象在默認(rèn)情況下顯示為三列。

4．為頁(yè)面提供服務(wù)器端所產(chǎn)生的xml數(shù)據(jù)。

為了簡(jiǎn)化實(shí)現(xiàn)難度，而又能夠闡明實(shí)現(xiàn)思路，此處提供數(shù)據(jù)的服務(wù)器端文件由一個(gè)本地文件所替代。

找到工程文件所在的目錄，建立一個(gè)能夠產(chǎn)生xml數(shù)據(jù)的網(wǎng)頁(yè)文件，該文件名稱可以任意指定，此處命名為dataSource.html。該文件包含的內(nèi)容如下：

<?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
 
<root> 
 
<node> 
 
<name>蟋蟀</name> 
 
<address>廣東</address> 
 
</node> 
 
<node> 
 
<name>飄飄</name> 
 
<address>北京</address> 
 
</node> 
 
<node> 
 
<name>水月</name> 
 
<address>四川</address> 
 
</node> 
 
</root> 
 

 注意：在對(duì)上述文件進(jìn)行保存時(shí)，需要將文件的編碼指定為UTF-8，從而與該文件包含的xml編碼格式保持一致。

5．接下來(lái)需要切換到頁(yè)面的代碼編輯模式中，加入一個(gè)<mx:HTTPService>對(duì)象，加入該對(duì)象的作用為載程序中可以獲取指定文件所產(chǎn)生的數(shù)據(jù)。由于該對(duì)象在組件面板中不顯示，因而需要手工方式錄入。需要修改的屬性為url的值，其余屬性默認(rèn)即可。

6．Flex數(shù)據(jù)綁定對(duì)DataGrid對(duì)象的屬性進(jìn)行修改。

ndataProvider屬性為數(shù)據(jù)源，其值為：dataProvider="{userRequest.lastResult.root.node}"

n數(shù)據(jù)列對(duì)象的dataField需要指定為xml數(shù)據(jù)中的字段名，可以為“name”或“address”。

nHeaderText屬性為列標(biāo)題。

注意，userRequest.lastResult代表從數(shù)據(jù)源對(duì)象取得的數(shù)據(jù)集，userRequest.lastResult.root.node相當(dāng)于xml數(shù)據(jù)中子節(jié)點(diǎn)的集合。

7．<mx:userRequest>對(duì)象不會(huì)主動(dòng)發(fā)送請(qǐng)求，仍然需要在程序中來(lái)調(diào)用該對(duì)象的send()方法，從而實(shí)現(xiàn)一個(gè)http請(qǐng)求。

可以在<mx:Application>對(duì)象的creationComplete事件中來(lái)執(zhí)行userRequest對(duì)象的send請(qǐng)求。creationComplete事件相當(dāng)于網(wǎng)頁(yè)中的onload事件。設(shè)置方法如下：

<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"creationComplete="userRequest.send()"> 

運(yùn)行工程文件后，將會(huì)彈出如下窗口。

二、Flex數(shù)據(jù)綁定ComboBox

當(dāng)然可以利用ActionScript來(lái)遍歷數(shù)據(jù)的同時(shí)添加下拉列表的每一個(gè)選項(xiàng)。也可以采用綁定的策略。

1．設(shè)置數(shù)據(jù)源，方法為：

dataProvider="{userRequest.lastResult.root.node}" 

2．其次，設(shè)置標(biāo)簽字段labelField：

labelField="name"

3、剩下來(lái)需要找一個(gè)類似dataField的屬性，但好像沒有，我再找找。

4、事件：

creationComplete="userRequest.send()" 

5、Flex數(shù)據(jù)綁定效果：

【編輯推薦】

1. Flex數(shù)據(jù)綁定簡(jiǎn)單技巧
2. Flex數(shù)據(jù)綁定的概念解讀
3. 解析三大Flex數(shù)據(jù)綁定方式
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則