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>
- import mx.rpc.events.ResultEvent;
- import utils.Util;
- <mx:HTTPService id="unitRPC" url="http://www.flexgrocer.com/units.xml" result="unitPRCResult(event)"/>
在<mx:Script>里 面添加unitPRCResult函数,代码如下
- private function unitPRCResult(event:ResultEvent):void {
- trace(event.result)
- }
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;
- }
在控件中使用该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)"/>
添加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}"/>
- <mx:Tree id="productTree" height="100%" dataProvider="{foodColl}" labelField="@name" change="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();
- }
- }
- private function resetForm():void {
- prodName.text = "";
- cost.text = "";
- listPrice.text = "";
- description.text = "";
- isOrganic.selected = false;
- isLowFat.selected = false;
- imageName.text = "";
- }
- <?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);
- }