Flex使用ArrayCollection实现动态Tree
接触Flex4一个多月，系统地了解了Flex4主要技术。近日想做一个Tree控件的Demo，但发现关于Flex4的很多书籍中主要描述的数据展现控件为DataGrid,List,几乎不涉及Tree，查阅Flex4官方API，看到了Tree控件的简单Demo，使用Flex4内置的XML数据结构填充Tree的dataProvider属性。数据源如下：
<fx:Declarations><fx:XMLList id="treeData"><node label="MailBox"><node label="Inbox"><node label="Marketing"/><node label="Product Management"/><node label="Personal"/></node><node label="Outbox"><node label="Professional"/><node label="Personal"/></node><node label="Spam"/><node label="Sent"/></node></fx:XMLList></fx:Declarations>
<mx:Tree id="myTree" width="50%" height="100%" dataProvider="{treeData}" labelField="@label" showRoot="true”></mx:Tree>package com.ls.vo;import java.util.List;public class Spec {private String id;private String name;private String type;private List<Spec> children;public Spec(){}public Spec(String id, String name, String type) {super();this.id = id;this.name = name;this.type = type;}public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getType() {return type;}public void setType(String type) {this.type = type;}public List<Spec> getChildren() {return children;}public void setChildren(List<Spec> children) {this.children = children;}}package com.ls.service;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;import com.longshine.indigo.dbutils.DBUtils;import com.ls.vo.Spec;public class SpecService {public List<Spec> getDevMainTypeList() {List<Spec> list = new ArrayList<Spec>();String sql = "select distinct asset_main_type_id id,asset_main_type_name name from scgl.t_jx_spec";ResultSet res = DBUtils.executeQuery(sql, null);try {while (res.next()) {Spec spec = new Spec(res.getString("id"),res.getString("name"), "devmaintype");spec.setChildren(new ArrayList<Spec>());list.add(spec);}} catch (SQLException e) {e.printStackTrace();}return list;}public List<Spec> getSpecListByDevMainTypeID(String id) {String sql = "select * from t_jx_spec where asset_main_type_id=?";List<Spec> list = new ArrayList<Spec>();ResultSet res = DBUtils.executeQuery(sql, new Object[] { id });try {while (res.next()) {Spec spec = new Spec(res.getString("id"),res.getString("name"), "spec");spec.setChildren(new ArrayList<Spec>());list.add(spec);}} catch (SQLException e) {e.printStackTrace();}return list;}public List<Spec> getPropListBySpecID(String id) {String sql = "select * from t_jx_prop where spec_id=?";List<Spec> list = new ArrayList<Spec>();ResultSet res = DBUtils.executeQuery(sql, new Object[] { id });try {while (res.next()) {Spec spec = new Spec(res.getString("id"),res.getString("name"), "prop");list.add(spec);}} catch (SQLException e) {e.printStackTrace();}return list;}}<destination id="specService"><properties><source>com.ls.service.SpecService</source></properties></destination>
package vo{import mx.collections.ArrayCollection;[RemoteClass(alias="com.ls.vo.Spec")]public class SpecVO{public var id:String;public var name:String;public var type:String;public var children:ArrayCollection;public function SpecVO(){}}}<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="initApp()"><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.events.ListEvent;import mx.events.TreeEvent;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;import vo.SpecVO;[Bindable][ArrayElementType("vo.SpecVO")]private var treeData:ArrayCollection=new ArrayCollection();[Bindable]private var selectedNode:SpecVO;protected function initApp():void{remoteService.getDevMainTypeList();}protected function remoteService_faultHandler(event:FaultEvent):void{Alert.show(event.fault.message);}protected function getDevMainTypeList_resultHandler(event:ResultEvent):void{treeData=event.result as ArrayCollection;}protected function getSpecListByDevMainTypeID_resultHandler(event:ResultEvent):void{selectedNode.children=event.result as ArrayCollection; treeData.itemUpdated(selectedNode);}protected function getPropListBySpecID_resultHandler(event:ResultEvent):void{selectedNode.children=event.result as ArrayCollection;treeData.itemUpdated(selectedNode);}protected function specTree_itemOpeningHandler(event:TreeEvent):void{selectedNode=event.item as SpecVO;if(!specTree.isItemOpen(event.item)&&selectedNode.children.length==0){if(selectedNode.type=="devmaintype")remoteService.getSpecListByDevMainTypeID(selectedNode.id);else if(selectedNode.type=='spec')remoteService.getPropListBySpecID(selectedNode.id);}}]]></fx:Script><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --><s:RemoteObject id="remoteService" destination="specService"fault="remoteService_faultHandler(event)"><s:method name="getDevMainTypeList" result="getDevMainTypeList_resultHandler(event)"/><s:method name="getSpecListByDevMainTypeID" result="getSpecListByDevMainTypeID_resultHandler(event)"/><s:method name="getPropListBySpecID" result="getPropListBySpecID_resultHandler(event)"/></s:RemoteObject></fx:Declarations><s:Panel width="75%" height="75%" horizontalCenter="0" title="Halo Tree Control Example" verticalCenter="0"><s:VGroup left="10" right="10" top="10" bottom="10"><s:Label width="100%" color="blue" text="Select a node in the Tree control."/><mx:HDividedBox width="100%" height="100%"><mx:Tree id="specTree" width="50%" height="100%" dataProvider="{treeData}" itemOpening="specTree_itemOpeningHandler(event)" labelField="name" showRoot="true"></mx:Tree><s:TextArea width="50%" height="100%" text="Selected Item:"/></mx:HDividedBox></s:VGroup></s:Panel></s:Application>