• 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. }  
     
  • 相关阅读:
    pow()函数结果强制转化为int造成误差的分析
    warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]
    博客园鼠标点击特效代码
    codeblocks更改颜色主题
    codeblocks1712设置中文
    SQl
    项目中nodejs包高效升级插件npm-check-updates
    正则表达式的整理（将金钱数变成带有千分位）
    从一个数组中过滤出另外一个数组中相关字段相等的数据
    IONIC3 打包安卓apk详细过程（大量图文）
  • 原文地址：https://www.cnblogs.com/nianshi/p/1732844.html
Copyright © 2020-2023  润新知