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