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



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

通过HTTPService获取XML数据

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

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

[xhtml] view plaincopy

  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>
  61. </mx:Application>

在<mx:Script>中导入两个类，代码如下

 

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

在<mx:Script>下面添加<mx:HTTPServic>标签，代码如下

 

[xhtml] view plaincopy

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

[javascript] view plaincopy

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

[xhtml] view plaincopy

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

 

[xhtml] view plaincopy

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

creationComplete=”catRPC.send()”

 

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

[xhtml] view plaincopy

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

运行结果如下

 

在Tree控件中使用XML数据

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


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

[xhtml] view plaincopy

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

添加数据绑定，代码如下

 

[xhtml] view plaincopy

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

添加tree控件，代码如下

 

[xhtml] view plaincopy

  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文件的代码如下

 

[xhtml] view plaincopy

  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;
  9.             public function fileBrowse():void{
  10.                 var myFileRef:FileReferenceList = new FileReferenceList();
  11.                 myFileRef.browse();
  12.             }
  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.             }
  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”/>
  42.     <mx:XMLListCollection id=”foodColl” source=”{prodByCatRPC.lastResult.category}”/>
  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. }