Flex中操作XML(下)

 

四 在Flex中使用XML的例子

大的XML文档用来显示数据或者显示列表的情况比较多，比如显示数据时作为Datagrid的数据源，或者为List,Combobox,Tree等的显示列表。

 

当我们使用List或者Combobox的时候，往往会把XML对象转换为ArrayCollection对象，看下面的例子

外部Xml文件

view plaincopy to clipboardprint?
<books>                     
    <book name="flex tutorial">                 
        <price>30</price>             
        <author>adobe</author>            
    </book>                 
    <book name="air tutorial">                  
        <price>40</price>             
        <author>adobe</author>            
    </book>                 
    <book name="java tutorial">                 
        <price>50</price>             
        <author>sun</author>              
    </book>                 
</books>                   
<books>     
<book name="flex tutorial">    
   <price>30</price>   
   <author>adobe</author>   
</book>    
<book name="air tutorial">    
   <price>40</price>   
   <author>adobe</author>   
</book>    
<book name="java tutorial">    
   <price>50</price>   
   <author>sun</author>   
</book>    
</books>

Flex文件

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>                  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                  
layout="absolute"                
creationComplete="init()">                
<mx:Script>               
<!--[CDATA[                  
      import mx.collections.ArrayCollection;                  
      import mx.rpc.events.ResultEvent;               
      //用于数据绑定的ArrayCollection                
      [Bindable]private var externalData:ArrayCollection = new ArrayCollection();                 
                      
      private function init():void {                  
          //发送请求                  
          myService.send();               
      }               
                          
      private function resultHandler(event:ResultEvent):void {                
          //取得Xml对象中book节点的集合                 
          externalData = event.result.books.book;                 
      }//断点处                  
]]-->                
</mx:Script>                  
<!--创建Httpservice对象加载外部Xml-->                 
<mx:HTTPService id="myService"               
      url="xmlFile.xml"               
      result="resultHandler(event)"/>                  
<!--用于显示的list-->                  
<mx:List id="datalist" dataProvider="{externalData}" labelField="name"/>                          
</mx:Application>              
<?xml version="1.0" encoding="utf-8"?>    
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
layout="absolute"    
creationComplete="init()">    
<mx:Script>    
<!--[CDATA[    
      import mx.collections.ArrayCollection;    
      import mx.rpc.events.ResultEvent;    
      //用于数据绑定的ArrayCollection    
      [Bindable]private var externalData:ArrayCollection = new ArrayCollection();     
         
      private function init():void {    
          //发送请求    
          myService.send();    
      }    
             
      private function resultHandler(event:ResultEvent):void {    
          //取得Xml对象中book节点的集合    
          externalData = event.result.books.book;    
      }//断点处    
]]-->    
</mx:Script>    
<!--创建Httpservice对象加载外部Xml-->    
<mx:HTTPService id="myService"    
      url="xmlFile.xml"    
      result="resultHandler(event)"/>    
<!--用于显示的list-->    
<mx:List id="datalist" dataProvider="{externalData}" labelField="name"/>             
</mx:Application>

将上面的代码以debug模式执行，程序停在断点处，在variables视图中我们可以很清晰的看到程序HttpService对象在加载外部 XML后已经把它转换成了ArrayCollection对象，如下图。这样就可以很轻松的将数据源绑定到显示列表对象List中。

 

 

另外一种情况，当我们使用Tree组件的时候，需要在HTTPService对象中加上resultFormat="e4x"以XML的格式读取进来而不要转换为ArrayCollection。

外部XML文件

view plaincopy to clipboardprint?
<books>     
<category name="RIA">   
    <book name="flex tutorial" price="30" author="adobe">  
    </book>     
    <book name="air tutorial" price="40" author="adobe">    
    </book>     
</category>         
<category name="Java">          
    <book name="java tutorial" price="50" author="sun">     
    </book>     
</category>         
</books>       
<books>
<category name="RIA">
<book name="flex tutorial" price="30" author="adobe">
</book>
<book name="air tutorial" price="40" author="adobe">
</book>
</category>  
<category name="Java">  
<book name="java tutorial" price="50" author="sun">
</book>
</category>  
</books>

Flex文件

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>              
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"              
layout="absolute"            
creationComplete="myService.send()">              
<mx:HTTPService id="myService"           
    url="xmlFile.xml"         
    resultFormat="e4x"/>       
              
<mx:XMLListCollection id="booktreesrc"             
    source="{myService.lastResult.category}"/>         
              
<mx:Tree id="bookTree"             
    height="100%"         
    dataProvider="{booktreesrc}"          
    labelField="@name"/>       
                      
</mx:Application>          
<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
layout="absolute"   
creationComplete="myService.send()">   
<mx:HTTPService id="myService"   
url="xmlFile.xml"  
resultFormat="e4x"/>  
   
<mx:XMLListCollection id="booktreesrc"   
source="{myService.lastResult.category}"/>  
   
<mx:Tree id="bookTree"   
height="100%"  
dataProvider="{booktreesrc}"  
labelField="@name"/>  
           
</mx:Application>

画面显示

Flex中操作XML(下)