flex中对XML的使用-dataProvider

      在flex中对XML文件的使用大体有两种，其一是在Model中使用，另外就是在HttpService中使用。我们在assets文件夹下创建data.xml文件，内容如下：

<data>

<result month="Jan-04">

<apple>81768</apple>

<orange>60310</orange>

<banana>43357</banana>

</result>

<result month="Feb-04">

<apple>81156</apple>

<orange>58883</orange>

<banana>49280</banana>

</result>

</data>

先看代码

在Model中对其调用：

<?xml version="1.0"?>
<!-- charts/XMLFileDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Model id="results" source="assets/data.xml"/>
  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart" dataProvider="{results.result}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="banana" displayName="Banana"/>
           <mx:LineSeries yField="apple" displayName="Apple"/>
           <mx:LineSeries yField="orange" displayName="Orange"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>
</mx:Application>

使用HttpService调用：

<?xml version="1.0"?>
<!-- charts/HTTPServiceDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%" creationComplete="srv.send()">
  <mx:HTTPService id="srv" url="../assets/data.xml"/>

  <mx:Panel title="Line Chart">
     <mx:LineChart id="chart"
        dataProvider="{srv.lastResult.data.result}"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries yField="apple" name="Apple"/>
           <mx:LineSeries yField="orange" name="Orange"/>
           <mx:LineSeries yField="banana" name="Banana"/>
        </mx:series>
     </mx:LineChart>
  </mx:Panel>  
</mx:Application>

比较两者，mx:Model作为一个模型标签，将source路径下的内容直接加载到XMLFileDataProvider.mxml中。经过编译器编译后，存储在生成的swf文件中。就是说数据是存储在客户端的。mx:HTTPService则不同，文件存储在服务器端，在服务器端提供这样一个service接口，creationComplete="srv.send()"的意思就是在初始化完毕会调用这个service,从服务器端去获取这个文件，传到客户端，通过srv.lastResult.data.result来获取。如果不调用这个send方法，客户端的srv.lastResult.data.result就是空的。

还有一点不同的是，调用Model中的result数据是用results.result,而在调用HTTPService中的result时，使用的是srv.lastResult.data.result;区别就在于前者没有父级标签data.后者有。如果在data标签之外再加一层父标签呢？是不是说Model可以直接指定到子标签，而HTTPService必须制定路径才能定义到子标签呢？如下：

 

<father>

<data>

<result month="Jan-04">

<apple>81768</apple>

<orange>60310</orange>

<banana>43357</banana>

</result>

<result month="Feb-04">

<apple>81156</apple>

<orange>58883</orange>

<banana>49280</banana>

</result>

</data>

</father>

如果我想的没错的话，那么XMLFileProvider是可以正确运行显示数据的，而HTTPServiceProvider中显示的图表中使没有数据的。测试一下看看。。。。

结果。。。两个都没有数据，呃。。。

再将XMLFileProvider中的<mx:LineChart id="chart" dataProvider="{results.result}">改成<mx:LineChart id="chart" dataProvider="{results.data.result}">试试看呢？果然，行了。再试试，改成<mx:LineChart id="chart" dataProvider="{results.father.data.result}">,结果没有数据。

经实践，证明：使用Model时，是不需要调根标签的。

那么就有一个新问题，我的xml文件里如果只有一个根标签，如下：

<data>12345</data>

我想通过Model在一个text中将数据显示出来怎么办呢？

先写一个XMLFlieRootTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Model id="results" source="assets/data.xml"/>
 <mx:HBox>
  <mx:Label text="data value="/>
  <mx:Text text="{results.data}"/>
 </mx:HBox>
</mx:Application>
运行一下，是没有数据的。暂时只能在外面再加一层父标签，才能够调到data的值。而且在这个xml文件中有且只有一个根标签，只做框架使用，不存数据。

使用Model的时候可以先将数据存储到ArrayCollection中

如下：

<?xml version="1.0"?> <!-- charts/XMLFileToArrayCollectionDataProvider.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"> <mx:Script> import mx.utils.ArrayUtil; </mx:Script> <mx:Model id="results" source="../assets/data.xml"/> <mx:ArrayCollection id="myAC" source="{ArrayUtil.toArray(results.result)}" /> <mx:Panel title="Line Chart"> <mx:LineChart id="chart" dataProvider="{myAC}"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="banana" displayName="Banana"/> <mx:LineSeries yField="apple" displayName="Apple"/> <mx:LineSeries yField="orange" displayName="Orange"/> </mx:series> </mx:LineChart> </mx:Panel> </mx:Application>

 
这样做的好处是一次存储，多次调用。不用每次都到model里面去取。
同样，HTTPService也可以使用ArrayCollection
<?xml version="1.0"?> <!-- charts/HTTPServiceToArrayCollectionDataProvider.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()"> <mx:Script><![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myData:ArrayCollection; ]]></mx:Script> <mx:HTTPService id="srv" url="../assets/data.xml" useProxy="false" result="myData=ArrayCollection(srv.lastResult.data.result)" /> <mx:Panel title="Line Chart"> <mx:LineChart id="chart" dataProvider="{myData}"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="apple" name="Apple"/> <mx:LineSeries yField="orange" name="Orange"/> <mx:LineSeries yField="banana" name="Banana"/> </mx:series> </mx:LineChart> </mx:Panel> </mx:Application> 
 
 
HTTPService还可以使用XMLListCollection来存储。将服务器端传过来的数据首先设置成E4X就可以了，如下：
<?xml version="1.0"?> <!-- charts/HTTPServiceToXMLListCollection.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()"> <mx:Script><![CDATA[ import mx.utils.ArrayUtil; ]]></mx:Script> <mx:HTTPService id="srv" url="../assets/data.xml" resultFormat="e4x" /> <mx:XMLListCollection id="myAC" source="{srv.lastResult.result}" /> <mx:Panel title="Line Chart"> <mx:LineChart id="chart" dataProvider="{myAC}"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="apple" name="Apple"/> <mx:LineSeries yField="orange" name="Orange"/> <mx:LineSeries yField="banana" name="Banana"/> </mx:series> </mx:LineChart> </mx:Panel> </mx:Application> 
 
 
值得一提的是在flexbuilder2中对内存的管理不完善，创建的ArrayCollection, XMLListCollection每次编译都会贮存在内存里，没有及时回收就会造成内存泄漏。善用。
不信你就在flexbuilder2里面建这样几个文件，然后多改几次，它在自动编译的模式下，就会出现outofmemory的错误。
 
 
 
 
 
 

 

  


  

    
1 
顶
1 
踩
    
分享到：
      
      
    
  

  

    

      E4X对XML的操作
      |
      flex实现企业及开发的经验总结http://xunig ...
    
  
  

    

      
2008-09-05 13:33
      
浏览 5108
      
评论(0)
      
      
      
分类:编程语言
      
      
查看更多