flex DataGrid控件2 学习 获取xml数据

刚开始学习flex datagrid的时候都是写固定的数据，要不就是放在数组中。

可是以后用到的数据就是动态的大多也都是存放在xml中。

让我来分享一下我学习DataGrid的成果吧，希望大家多交流。

1    HTTPService

如果和xml交互就要 通过<mx:HTTPService>标签创建一个HTTPService实例对象，他通过调用send()方法向指定的url发送一个http请求，并得到http回应。

<mx:HTTPService
        id="gxml"
        url="xml/DataGrid_Data.xml"                                        //提供数据的url
        resultFormat="xml"                                                                         //返回数据的格式
        result="getResult(event)"                                            //返回后响应函数
        fault="geterr(event)"                                                //出错时响应函数
    />

2.创建一个按钮Button，负责显示数据的开关。

<mx:Button label="获取数据" click="gxml.send()"/>

 

3.DataGrid控件

 <mx:DataGrid id="mydatagrid" fontSize="12" fontWeight="bold" textAlign="center" color="#526BBE" borderColor="#C0C8CC" themeColor="#A9B1B3" alpha="0.86" alternatingItemColors="[#E9E9E9, #EFF8F9]" borderStyle="inset">
  <mx:columns>
   <mx:DataGridColumn headerText="名称" dataField="Name"/>
   <mx:DataGridColumn headerText="公司" dataField="Company"/>
   <mx:DataGridColumn headerText="版本" dataField="Version"/>
  </mx:columns>
 </mx:DataGrid>

 

4.函数方法

   import mx.rpc.events.FaultEvent;
   import mx.collections.*; 
   import mx.rpc.events.ResultEvent;
   import mx.controls.Alert;

     [Bindable]
     private var xmlResult:XML;
     private function getResult(event:ResultEvent):void  //获取xml的数据结果
     {
         xmlResult=XML(event.result);
         mydatagrid.dataProvider=xmlResult.children();
      }

   private function geterr(event:FaultEvent):void //提交出现异常时出发
   {
    Alert.show(event.fault.message, "error message");
   }

 

 

完整代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

 <mx:Script>
  <![CDATA[
   import mx.rpc.events.FaultEvent;
   import mx.collections.*; 
   import mx.rpc.events.ResultEvent;
   import mx.controls.Alert;
    
        [Bindable]
        private var xmlResult:XML;
        private function getResult(event:ResultEvent):void
        {
         xmlResult=XML(event.result);
         mydatagrid.dataProvider=xmlResult.children();
        }

   private function geterr(event:FaultEvent):void
   {
    Alert.show(event.fault.message, "error message");
   }
  ]]>
 </mx:Script>

 
 <mx:HTTPService id="gxml" url="xml/DataGrid_Data.xml" useProxy="false" resultFormat="xml" result="getResult(event)" fault="geterr(event)"></mx:HTTPService>

 <mx:DataGrid id="mydatagrid" fontSize="12" fontWeight="bold" textAlign="center" color="#526BBE" borderColor="#C0C8CC" themeColor="#A9B1B3" alpha="0.86" alternatingItemColors="[#E9E9E9, #EFF8F9]" borderStyle="inset">
  <mx:columns>
   <mx:DataGridColumn headerText="名称" dataField="Name"/>
   <mx:DataGridColumn headerText="公司" dataField="Company"/>
   <mx:DataGridColumn headerText="版本" dataField="Version"/>
  </mx:columns>
 </mx:DataGrid>

 <mx:Button label="获取数据" click="gxml.send()"/>
</mx:Application>

 

xml文件

<?xml version="1.0" encoding="UTF-8"?>

<root>

    <node label="Flash">

        <Name>Flash</Name>

        <Company>Adobe</Company>

        <Version>9.0</Version>

    </node>

    <node label="Java">

        <Name>Java</Name>

        <Company>Sun</Company>

        <Version>6.0</Version>

    </node>

    <node label=".Net">

        <Name>.Net</Name>

        <Company>Microsoft</Company>

        <Version>2.0</Version>

    </node>

    <node label="Flex">

        <Name>Flex</Name>

        <Company>Adobe</Company>

        <Version>2.0</Version>

    </node>

    <node label="OICQ">

        <Name>OICQ</Name>

        <Company>腾讯</Company>

        <Version>2007</Version>

    </node>

</root>

 

显示效果：

点击显示按钮：

 

呵呵希望就flex多多交流。