Flex中为控件使用远程XML数据

通过HTTPService获取XML数据

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

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

<?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>中导入两个类，代码如下

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

 

<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函数，代码如下

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>中添加相关代码，代码如下

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，代码如下

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

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

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

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; }  <mx:HTTPService id="catRPC" url="http://www.flexgrocer.com/category.xml" result="catHandler(event)"/> creationComplete="catRPC.send()"

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

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

在Tree控件中使用XML数据

 

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

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

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

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

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

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()方法，代码如下

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

<?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数据，转化方法代码如下

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); }