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

通过HTTPService获 取XML数据

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

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

  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>  
 在<mx:Script>中导入两个类,代码如下

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

 

  1. <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函数,代码如下

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

creationComplete="unitRPC.send()"

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

HTTPService数 据填入ArrayCollection

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

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

  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. }  
 这样就把xml中所有的unit节 点数据保持到units变量里面。

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

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

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

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

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

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

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

Tree控 件中使用XML数据

 

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

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

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

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

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

  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. }  
 添加resetForm()方法,代码如下

  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. }  
 此时的DataEntry.mxml文件的代码如下

  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数 据并将这些数据转换为自定义类型的ArrayCollection

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

  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. }  
 


posted on 2010-05-11 17:56  念时  阅读(743)  评论(0编辑  收藏  举报

细节决定成败!态度决定一切!