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

Flex數據綁定

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

一、Flex數據綁定DataGrid

1．先進入下述菜單新建一個flex工程：File->New->FlexApplication。此時將會出現向導對話框。

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

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

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

4．為頁面提供服務器端所產生的xml數據。

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

找到工程文件所在的目錄，建立一個能夠產生xml數據的網頁文件，該文件名稱可以任意指定，此處命名為dataSource.html。該文件包含的內容如下：

<?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>對象，加入該對象的作用為載程序中可以獲取指定文件所產生的數據。由于該對象在組件面板中不顯示，因而需要手工方式錄入。需要修改的屬性為url的值，其余屬性默認即可。

6．Flex數據綁定對DataGrid對象的屬性進行修改。

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

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

nHeaderText屬性為列標題。

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

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

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

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

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

二、Flex數據綁定ComboBox

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

1．設置數據源，方法為：

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

2．其次，設置標簽字段labelField：

labelField="name"

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

4、事件：

creationComplete="userRequest.send()" 

5、Flex數據綁定效果：

【編輯推薦】

1. Flex數據綁定簡單技巧
2. Flex數據綁定的概念解讀
3. 解析三大Flex數據綁定方式
4. 解析Flex全屏模式設置方法
5. Flex內存泄露解決方法和內存釋放優化原則