建立一个树形的列表在flex中可以很简单了。
如图:
在开发视图下,拉8个label和一个tree到面板上,其中4个在没有显示,分别定义其id为
nam,sex,age,clazz。
源代码如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- 如果存在多个httpservice的send()方法,使用分号隔开。 -->
3 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="xmlData.send()">
4 <mx:HTTPService id="xmlData" url="xml/student.xml" resultFormat="e4x"/>
5 <mx:XMLListCollection id="students" source="{xmlData.lastResult.person}"/>
6
7 <mx:Script>
8 <![CDATA[
9 private function populaTree(event:Event):void{
10 var selectNode:Object = event.target.selectedItem;
11 if(selectNode.@sikname != undefined){
12 nam.text = selectNode.@choose;
13 sex.text = selectNode.@sex;
14 age.text = selectNode.@age;
15 clazz.text = selectNode.@clazz;
16 }else{
17 nam.text = "";
18 sex.text = "";
19 age.text = "";
20 clazz.text = "";
21 }
22 }
23 ]]>
24 </mx:Script>
25 <mx:Tree x="66" y="24" width="217" height="291" id="studentTree"
26 dataProvider="{students}" labelField="@choose" change="populaTree(event)"/>
27
28 <mx:Label x="359" y="67" text="姓名:" fontSize="14" fontWeight="bold"/>
29 <mx:Label x="359" y="93" text="性别:" fontWeight="bold" fontSize="14"/>
30 <mx:Label x="359" y="119" text="年龄:" fontWeight="bold" fontSize="14"/>
31 <mx:Label x="359" y="145" text="班级:" fontWeight="bold" fontSize="14"/>
32 <mx:Label x="477" y="67" id="nam" fontSize="14"/>
33 <mx:Label x="477" y="93" id="sex" fontSize="14"/>
34 <mx:Label x="477" y="119" id="age" fontSize="14"/>
35 <mx:Label x="477" y="145" id="clazz" fontSize="14"/>
36
37 </mx:Application>
38
其中在<mx:Script>中的selectNode.@属性名,就是e4x解析xml。
xml文件:
1 <?xml version="1.0" encoding="UTF-8"?>
2 <persons>
3 <person choose="man" >
4 <student choose="金浩" sikname="金浩" sex="man" age="23" clazz="数学一班" id="1">
5 </student>
6
7 <student choose="张伟" sikname="张伟" sex="man" age="22" clazz="英语四班" id="2">
8 </student>
9
10 <student choose="蒋天傲" sikname="蒋天傲" sex="man" age="23" clazz="计算机四班" id="2">
11 </student>
12
13 <student choose="熊敏之" sikname="熊敏之" sex="man" age="23" clazz="计算机一班" id="2">
14 </student>
15
16 </person>
17
18 <person choose="woman">
19 <student choose="张洋" sikname="张洋" sex="woman" age="22" clazz="英语一班" id="2">
20 </student>
21
22 <student choose="谢敏" sikname="谢敏" sex="woman" age="22" clazz="计算机二班" id="6">
23 </student>
24
25 <student choose="廖洁" sikname="廖洁" sex="woman" age="22" clazz="英语二班" id="7">
26 </student>
27
28 </person>
29
30 </persons>
其中 <mx:Tree x="66" y="24" width="217" height="291" id="studentTree"
dataProvider="{students}" labelField="@choose" change="populaTree(event)"/>
是树形列表显示的内容,由xml上看,就可以知道。
但是在那个xml中似乎有点数据冗余了。
如:那个skiname和choose就冗余了。
还有就是sex啦,
sex可以利用查找父节点的sex属性得到。但是自己并不擅长于actionscript编程也就只能用这种笨办法了。
大家充分感受flex的魅力吧。