Flex中为各种控件绑定远程XML数据

通过HTTPService获 取XML数据

在浏览器中输入：http://www.flexgrocer.com/units.xml， 可以看到XML格式文档，将使用HTTPService获 取该xml中的数据。

打开前面完成的DataEntry.mxml文件，代码如下

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
3.     layout="absolute">  
4.     <mx:Model id="prodModel">  
5.         <groceries>  
6.             <catName>Dairy</catName>  
7.             <prodName>Milk</prodName>  
8.             <imageName>assets/dairy_milk.jpg</imageName>  
9.             <cost>1.20</cost>  
10.             <listPrice>1.99</listPrice>  
11.             <isOrganic>true</isOrganic>  
12.             <isLowFat>true</isLowFat>  
13.             <description>Direct from California where cows are happiest!</description>  
14.         </groceries>  
15.     </mx:Model>  
16. <mx:Script>  
17.     <!--[CDATA[  
18.         import flash.net.FileReference;  
19.         public function fileBrowse():void{  
20.             var myFileRef:FileReferenceList = new FileReferenceList();  
21.             myFileRef.browse();  
22.         }  
23.     ]]-->  
24. </mx:Script>  
25.     <mx:Form>  
26.         <mx:FormHeading label="{prodModel.catName}"/>  
27.         <mx:FormItem label="Product Name">  
28.             <mx:TextInput id="product" text="{prodModel.prodName}"/>  
29.         </mx:FormItem>  
30.         <mx:FormItem label="ProductNameUnit" direction="horizontal">  
31.             <mx:ComboBox/>  
32.             <mx:TextInput/>  
33.         </mx:FormItem>  
34.         <mx:FormItem label="Cost">  
35.             <mx:TextInput id="cost" text="{prodModel.cost}"/>  
36.         </mx:FormItem>  
37.         <mx:FormItem label="List Price">  
38.             <mx:TextInput id="listPrice" text="{prodModel.listPrice}"/>  
39.         </mx:FormItem>  
40.         <mx:FormItem label="Description">  
41.             <mx:TextInput id="Description" text="{prodModel.description}"/>  
42.         </mx:FormItem>  
43.         <mx:FormItem label="Organic">  
44.             <mx:CheckBox id="isOrganic" selected="{prodModel.isOrganic}"/>  
45.         </mx:FormItem>  
46.         <mx:FormItem label="Is Low Fat?">  
47.             <mx:CheckBox id="isLowFat" selected="{prodModel.isLowFat}"/>  
48.         </mx:FormItem>  
49.         <mx:FormItem label="Image Path">  
50.             <mx:TextInput id="imageName" text="{prodModel.imageName}"/>  
51.             <mx:Button label="Browse" click="fileBrowse()"/>  
52.         </mx:FormItem>  
53.         <mx:FormItem>  
54.             <mx:HBox>  
55.             <mx:Button label="Update"/>  
56.             <mx:Button label="Delete"/>  
57.             </mx:HBox>  
58.         </mx:FormItem>  
59.     </mx:Form>  
60.       
61. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Model id="prodModel"> <groceries> <catName>Dairy</catName> <prodName>Milk</prodName> <imageName>assets/dairy_milk.jpg</imageName> <cost>1.20</cost> <listPrice>1.99</listPrice> <isOrganic>true</isOrganic> <isLowFat>true</isLowFat> <description>Direct from California where cows are happiest!</description> </groceries> </mx:Model> <mx:Script> <!--[CDATA[ import flash.net.FileReference; public function fileBrowse():void{ var myFileRef:FileReferenceList = new FileReferenceList(); myFileRef.browse(); } ]]--> </mx:Script> <mx:Form> <mx:FormHeading label="{prodModel.catName}"/> <mx:FormItem label="Product Name"> <mx:TextInput id="product" text="{prodModel.prodName}"/> </mx:FormItem> <mx:FormItem label="ProductNameUnit" direction="horizontal"> <mx:ComboBox/> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Cost"> <mx:TextInput id="cost" text="{prodModel.cost}"/> </mx:FormItem> <mx:FormItem label="List Price"> <mx:TextInput id="listPrice" text="{prodModel.listPrice}"/> </mx:FormItem> <mx:FormItem label="Description"> <mx:TextInput id="Description" text="{prodModel.description}"/> </mx:FormItem> <mx:FormItem label="Organic"> <mx:CheckBox id="isOrganic" selected="{prodModel.isOrganic}"/> </mx:FormItem> <mx:FormItem label="Is Low Fat?"> <mx:CheckBox id="isLowFat" selected="{prodModel.isLowFat}"/> </mx:FormItem> <mx:FormItem label="Image Path"> <mx:TextInput id="imageName" text="{prodModel.imageName}"/> <mx:Button label="Browse" click="fileBrowse()"/> </mx:FormItem> <mx:FormItem> <mx:HBox> <mx:Button label="Update"/> <mx:Button label="Delete"/> </mx:HBox> </mx:FormItem> </mx:Form> </mx:Application>  在<mx:Script>中导入两个类，代码如下

view plain copy to clipboard print ?

1. import mx.rpc.events.ResultEvent;  
2. import utils.Util;  

import mx.rpc.events.ResultEvent; import utils.Util;  在<mx:Script>下面添加<mx:HTTPServic>标签，代码如下

 

view plain copy to clipboard print ?

1. <mx:HTTPService id="unitRPC" url="http://www.flexgrocer.com/units.xml" result="unitPRCResult(event)"/>  

<mx:HTTPService id="unitRPC" url="http://www.flexgrocer.com/units.xml" result="unitPRCResult(event)"/> 当id为unitRPC的httpservice执行一个send方法的时候，会从url指定的xml文件里面返回该xml的数据，成功返回以后执行unitPRCResult()函数。

在<mx:Script>里 面添加unitPRCResult函数，代码如下

view plain copy to clipboard print ?

1. private function unitPRCResult(event:ResultEvent):void {  
2.     trace(event.result)  
3. }  

private function unitPRCResult(event:ResultEvent):void { trace(event.result) }  在<mx:Application>中添加creationComplete事件，代码如下

creationComplete="unitRPC.send()"

当页面中所有的控件创建完成以后，执行creationComplete事件，调用unitRPC的send方法，调用HTTPService。ResultEvent中的result就能得到xml中的数据。

将HTTPService数 据填入ArrayCollection

ArrayCollection是 将数据填入到一个列表块里面，可以作为数据的提供者。

<ms:Script>中 添加相关代码，代码如下

view plain copy to clipboard print ?

1. import mx.collections.ArrayCollection;  
2.               
3. [Bindable]  
4. private var units:ArrayCollection = new ArrayCollection();  
5. private function unitPRCResult(event:ResultEvent):void {  
6.     units = event.result.allUnits.unit;  
7. }  

import mx.collections.ArrayCollection; [Bindable] private var units:ArrayCollection = new ArrayCollection(); private function unitPRCResult(event:ResultEvent):void { units = event.result.allUnits.unit; }  这样就把xml中所有的unit节 点数据保持到units变量里面。

在控件中使用该units， 代码如下

view plain copy to clipboard print ?

1. <mx:List id="unitID" rowCount="4" dataProvider="{units}  " labelField="unitName"/>  

<mx:List id="unitID" rowCount="4" dataProvider="{units} " labelField="unitName"/> 运行结果如下

将数据填入ComboBox控 件并用编程方法添加选项

同上，把远程http://www.flexgrocer.com/category.xml文件的内容保存到categories变 量中，编写的代码如下

view plain copy to clipboard print ?

1. import mx.rpc.events.ResultEvent;  
2. import mx.collections.ArrayCollection;  
3. [Bindable]  
4. private var categories:ArrayCollection = new ArrayCollection();  
5. private function catHandler(event:ResultEvent):void {  
6.     categories = event.result.catalog.category;  
7.     var catObject:Object = new Object();  
8.     catObject.name = "All";  
9.     catObject.ID = 0;  
10.     categories.addItemAt(catObject, 0);  
11.     catCombo.selectedIndex = 0;  
12. }  

import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Bindable] private var categories:ArrayCollection = new ArrayCollection(); private function catHandler(event:ResultEvent):void { categories = event.result.catalog.category; var catObject:Object = new Object(); catObject.name = "All"; catObject.ID = 0; categories.addItemAt(catObject, 0); catCombo.selectedIndex = 0; }  

view plain copy to clipboard print ?

1. <mx:HTTPService id="catRPC" url="http://www.flexgrocer.com/category.xml" result="catHandler(event)"/>  

<mx:HTTPService id="catRPC" url="http://www.flexgrocer.com/category.xml" result="catHandler(event)"/> creationComplete="catRPC.send()"

添加ComboBox控 件，使用categories数据，代码如下

view plain copy to clipboard print ?

1. <mx:ComboBox id="catCombo" dataProvider="{categories}" labelField="name"/>  

<mx:ComboBox id="catCombo" dataProvider="{categories}" labelField="name"/> 运 行结果如下

在Tree控 件中使用XML数据

 

xml数据来 源: http://www.flexgrocer.com/categorizedProducts.xml。

打开前面完成的DataEntry.mxml文 件，添加HTTPService，代码如下

view plain copy to clipboard print ?

1. <mx:HTTPService id="prodByCatRPC" url="http://www.flexgrocer.com/categorizedProducts.xml" resultFormat="e4x"/>  

<mx:HTTPService id="prodByCatRPC" url="http://www.flexgrocer.com/categorizedProducts.xml" resultFormat="e4x"/> 添加数据绑定，代码如下

view plain copy to clipboard print ?

1. <mx:XMLListCollection id="foodColl" source="{prodByCatRPC.lastResult.category}"/>  

<mx:XMLListCollection id="foodColl" source="{prodByCatRPC.lastResult.category}"/> 添 加tree控件，代码如下

view plain copy to clipboard print ?

1. <mx:Tree id="productTree" height="100%" dataProvider="{foodColl}" labelField="@name" change="populateForm(event)"/>  

<mx:Tree id="productTree" height="100%" dataProvider="{foodColl}" labelField="@name" change="populateForm(event)"/> 添加populateForm(event)方法，代码如下

view plain copy to clipboard print ?

1. private function populateForm(event:Event):void {  
2.     var selectedNode:Object = event.target.selectedItem;  
3.     if(selectedNode.@prodName != undefined) {  
4.         prodName.text = selectedNode.@prodName;  
5.         cost.text = selectedNode.@prodName;  
6.         listPrice.text = selectedNode.@listPrice;  
7.         description.text = selectedNode.@description;  
8.         isOrganic.selected = Util.yesNoToBoolean(selectedNode.@isOrganic);  
9.         isLowFat.selected = Util.yesNoToBoolean(selectedNode.@isLowFat);  
10.         imageName.text = selectedNode.@imageName;  
11.     } else {  
12.         resetForm();  
13.     }  
14. }  

private function populateForm(event:Event):void { var selectedNode:Object = event.target.selectedItem; if(selectedNode.@prodName != undefined) { prodName.text = selectedNode.@prodName; cost.text = selectedNode.@prodName; listPrice.text = selectedNode.@listPrice; description.text = selectedNode.@description; isOrganic.selected = Util.yesNoToBoolean(selectedNode.@isOrganic); isLowFat.selected = Util.yesNoToBoolean(selectedNode.@isLowFat); imageName.text = selectedNode.@imageName; } else { resetForm(); } }  添加resetForm()方法，代码如下

view plain copy to clipboard print ?

1. private function resetForm():void {  
2.     prodName.text = "";  
3.     cost.text = "";  
4.     listPrice.text = "";  
5.     description.text = "";  
6.     isOrganic.selected = false;  
7.     isLowFat.selected = false;  
8.     imageName.text = "";  
9. }  

private function resetForm():void { prodName.text = ""; cost.text = ""; listPrice.text = ""; description.text = ""; isOrganic.selected = false; isLowFat.selected = false; imageName.text = ""; }  此时的DataEntry.mxml文件的代码如下

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="prodByCatRPC.send()">  
3.     <mx:Script>  
4.         <!--[CDATA[  
5.             import flash.net.FileReference;  
6.             import mx.rpc.events.ResultEvent;  
7.             import utils.Util;  
8.       
9.             public function fileBrowse():void{  
10.                 var myFileRef:FileReferenceList = new FileReferenceList();  
11.                 myFileRef.browse();  
12.             }  
13.               
14.             private function populateForm(event:Event):void {  
15.                 var selectedNode:Object = event.target.selectedItem;  
16.                 if(selectedNode.@prodName != undefined) {  
17.                     prodName.text = selectedNode.@prodName;  
18.                     cost.text = selectedNode.@prodName;  
19.                     listPrice.text = selectedNode.@listPrice;  
20.                     description.text = selectedNode.@description;  
21.                     isOrganic.selected = Util.yesNoToBoolean(selectedNode.@isOrganic);  
22.                     isLowFat.selected = Util.yesNoToBoolean(selectedNode.@isLowFat);  
23.                     imageName.text = selectedNode.@imageName;  
24.                 } else {  
25.                     resetForm();  
26.                 }  
27.             }  
28.               
29.             private function resetForm():void {  
30.                 prodName.text = "";  
31.                 cost.text = "";  
32.                 listPrice.text = "";  
33.                 description.text = "";  
34.                 isOrganic.selected = false;  
35.                 isLowFat.selected = false;  
36.                 imageName.text = "";  
37.             }  
38.         ]]-->  
39.     </mx:Script>  
40.     <mx:HTTPService id="prodByCatRPC" url="http://www.flexgrocer.com/categorizedProducts.xml" resultFormat="e4x"/>  
41.       
42.     <mx:XMLListCollection id="foodColl" source="{prodByCatRPC.lastResult.category}"/>  
43.       
44.     <mx:HBox>  
45.         <mx:Tree id="productTree" height="100%" dataProvider="{foodColl}" labelField="@name" change="populateForm(event)"/>  
46.         <mx:Form>  
47.             <mx:FormItem label="Product Name">  
48.                 <mx:TextInput id="prodName"/>  
49.             </mx:FormItem>  
50.             <mx:FormItem label="Cost">  
51.                 <mx:TextInput id="cost"/>  
52.             </mx:FormItem>  
53.             <mx:FormItem label="List Price">  
54.                 <mx:TextInput id="listPrice"/>  
55.             </mx:FormItem>  
56.             <mx:FormItem label="Description">  
57.                 <mx:RichTextEditor id="description" height="200"/>  
58.             </mx:FormItem>  
59.             <mx:FormItem label="Specialties">  
60.                 <mx:CheckBox id="isOrganic" label="Is Organic"/>  
61.                 <mx:CheckBox id="isLowFat" label="Is Low Fat"/>  
62.             </mx:FormItem>  
63.             <mx:FormItem label="Image Name" direction="horizontal">  
64.                 <mx:TextInput id="imageName"/>  
65.                 <mx:Button label="Browse" click="fileBrowse()"/>  
66.             </mx:FormItem>  
67.             <mx:FormItem>  
68.                 <mx:HBox>  
69.                 <mx:Button label="Update"/>  
70.                 <mx:Button label="Delete"/>  
71.                 </mx:HBox>  
72.             </mx:FormItem>  
73.         </mx:Form>  
74.     </mx:HBox>  
75. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="prodByCatRPC.send()"> <mx:Script> <!--[CDATA[ import flash.net.FileReference; import mx.rpc.events.ResultEvent; import utils.Util; public function fileBrowse():void{ var myFileRef:FileReferenceList = new FileReferenceList(); myFileRef.browse(); } private function populateForm(event:Event):void { var selectedNode:Object = event.target.selectedItem; if(selectedNode.@prodName != undefined) { prodName.text = selectedNode.@prodName; cost.text = selectedNode.@prodName; listPrice.text = selectedNode.@listPrice; description.text = selectedNode.@description; isOrganic.selected = Util.yesNoToBoolean(selectedNode.@isOrganic); isLowFat.selected = Util.yesNoToBoolean(selectedNode.@isLowFat); imageName.text = selectedNode.@imageName; } else { resetForm(); } } private function resetForm():void { prodName.text = ""; cost.text = ""; listPrice.text = ""; description.text = ""; isOrganic.selected = false; isLowFat.selected = false; imageName.text = ""; } ]]--> </mx:Script> <mx:HTTPService id="prodByCatRPC" url="http://www.flexgrocer.com/categorizedProducts.xml" resultFormat="e4x"/> <mx:XMLListCollection id="foodColl" source="{prodByCatRPC.lastResult.category}"/> <mx:HBox> <mx:Tree id="productTree" height="100%" dataProvider="{foodColl}" labelField="@name" change="populateForm(event)"/> <mx:Form> <mx:FormItem label="Product Name"> <mx:TextInput id="prodName"/> </mx:FormItem> <mx:FormItem label="Cost"> <mx:TextInput id="cost"/> </mx:FormItem> <mx:FormItem label="List Price"> <mx:TextInput id="listPrice"/> </mx:FormItem> <mx:FormItem label="Description"> <mx:RichTextEditor id="description" height="200"/> </mx:FormItem> <mx:FormItem label="Specialties"> <mx:CheckBox id="isOrganic" label="Is Organic"/> <mx:CheckBox id="isLowFat" label="Is Low Fat"/> </mx:FormItem> <mx:FormItem label="Image Name" direction="horizontal"> <mx:TextInput id="imageName"/> <mx:Button label="Browse" click="fileBrowse()"/> </mx:FormItem> <mx:FormItem> <mx:HBox> <mx:Button label="Update"/> <mx:Button label="Delete"/> </mx:HBox> </mx:FormItem> </mx:Form> </mx:HBox> </mx:Application>  运行结果如下

获取XML数 据并将这些数据转换为自定义类型的ArrayCollection

同上利用HTTPService获 取XML数据，转化方法代码如下

view plain copy to clipboard print ?

1. private function prodHandler(event:ResultEvent):void{  
2.     var prodArray:Array = new Array();  
3.     for each (var p:XML in event.result..product){  
4.         var prod:Product = new Product(  
5.         Number(p.@catID),  
6.         String(p.@prodName),  
7.         Number(p.@unitID),  
8.         Number(p.@cost),  
9.         Number(p.@listPrice),  
10.         String(p.@description),  
11.         Boolean(p.@isOrganic=="Yes"),  
12.         Boolean(p.@isLowFat=="Yes"),  
13.         String(p.@imageName));  
14.         prodArray.push(prod);  
15.     }  
16.     groceryInventory=new ArrayCollection(prodArray);  
17. }  

private function prodHandler(event:ResultEvent):void{ var prodArray:Array = new Array(); for each (var p:XML in event.result..product){ var prod:Product = new Product( Number(p.@catID), String(p.@prodName), Number(p.@unitID), Number(p.@cost), Number(p.@listPrice), String(p.@description), Boolean(p.@isOrganic=="Yes"), Boolean(p.@isLowFat=="Yes"), String(p.@imageName)); prodArray.push(prod); } groceryInventory=new ArrayCollection(prodArray); }