Flex中Tree控件的开发

Flex中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 >

 

希望我的方法对大家的开发有所帮助。

---------------------------------------------------------
专注移动开发
Android, Windows Mobile, iPhone, J2ME, BlackBerry, Symbian