在Flex的开发中,Tree控件是比较常用的控件,Flex开发文档为我们提供了丰富的示例,但在实际开发中,我们经常要从自己的XML文件中获取数据,而开发文档中这方面资料比较欠缺。
下面我介绍一种比较有用的Tree控件开发方法。
下面我介绍一种比较有用的Tree控件开发方法。
<
mx:Tree
id
="MusicTypeTree"
left ="5" right ="5"
showRoot ="false"
labelField ="@label"
bottom ="5" top ="40"
click ="click(event)" />
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"
/>
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 >
<! [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 >
< 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 >