Tree控件使用

在Flex的开发中，Tree控件是比较常用的控件，Flex开发文档为我们提供了丰富的示例，但在实际开发中，我们经常要从自己的XML文件中获取数据，而开发文档中这方面资料比较欠缺。

下面我介绍一种比较有用的Tree控件开发方法。

    <mx:Tree id="MusicTypeTree"
        left="5" right="5" 
        showRoot="false"
        labelField="@label"        
        bottom="5" top="40"
        click="click(event)"/>
        

这是我定义的一个Tree，labelField你可以自己定义成你的XML文件中Label Attribute的Name

 <mx:HTTPService
  id="SrvTreeList"
  url="{urlTREELIST}"
  useProxy="false"
  result="init()"
   resultFormat="xml"
  />

定义一个HTTPService，当然也可以是WebService，看你从哪里获得数据了，切记这里的resultFormat一定要是XML，否则无法解析

<mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import flash.net.URLRequest;
   private var XMLTreeList:XML;
   private var u:URLRequest;
   private function init():void
   {
    //先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
    XMLTreeList=XML(SrvTreeList.lastResult.toString());
    MusicTypeTree.dataProvider=XMLTreeList;
   }
   
   private function click(obj:Event):void
   {
    //如果有value属性，也就是子node，直接打开相关页面
    if(MusicTypeTree.selectedItem.hasOwnProperty("value"))
    {
     u=new URLRequest(MusicTypeTree.selectedItem.@value);
     navigateToURL(u);
    }else{
     //没有那就展开，如果展开了就收缩
     MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
    }
   }
  ]]>
 </mx:Script>

这就是上面两个控件牵扯到的init()和click()方法的代码，别忘了HTTPService先要在页面加载完成后send()下，否则没数据。init()方法让Tree显示出来，click方法接受事件的触发，当然click事件可以根据程序需要进行修改。

下面是我的XML文件

<?xml version="1.0" encoding="utf-8"?>
<MyMusicOnline>
    <node label="Piano">
        <node label="Piano1" value="http://www.gcoresoft.com/"/>
        <node label="Piano2"/>
    </node>
    <node label="Bass">
        <node label="Bass1"/>
        <node label="Bass2"/>
    </node>
    <node label="Sax">
        <node label="Sax1"/>
        <node label="Sax2"/>
    </node>
    <node label="Guitar">
        <node label="Guitar1"/>
        <node label="Guitar2"/>
    </node>
</MyMusicOnline>