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

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

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

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

1．先進入下述菜單新建一個flex工程：File->New->FlexApplication。此時將會出現(xiàn)向?qū)υ捒颉?/p>

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

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

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

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

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

找到工程文件所在的目錄，建立一個能夠產(chǎn)生xml數(shù)據(jù)的網(wǎng)頁文件，該文件名稱可以任意指定，此處命名為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> 
 

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

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

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

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

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

nHeaderText屬性為列標題。

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

7．<mx:userRequest>對象不會主動發(fā)送請求，仍然需要在程序中來調(diào)用該對象的send()方法，從而實現(xiàn)一個http請求。

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

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

運行工程文件后，將會彈出如下窗口。

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

當然可以利用ActionScript來遍歷數(shù)據(jù)的同時添加下拉列表的每一個選項。也可以采用綁定的策略。

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

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

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

labelField="name"

3、剩下來需要找一個類似dataField的屬性，但好像沒有，我再找找。

4、事件：

creationComplete="userRequest.send()" 

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

【編輯推薦】

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