用flex做一个树

想用flex写一个树；查看了blazeds自带的数据库管理的例子，发现这个树形很有局限，只能显示一级。（如果不正确请赐教）于是在网上找例子，都是将xml文件导入到flex中。开始还不想用这样的方法。折腾了两个星期，最后决定还是使用这种方法了；那么思路就很清晰了，从数据库中查出数据，然后用dom4j来生成xml文件，然后将xml文件导入到flex工程中。如果要实现动态加载再改。一步一步来。先实现将数据转换为xml文件；
1.找一个使用dom4j来生成xml文件的例子
XmlBuild.java

package main;
import java.io.FileWriter;
import java.io.IOException;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

public class XmlBuild {
	public Document Create() {
		String filepath = this.getClass().getResource("/").getPath();// 得到当前WEB-INF相对路径
		Document document = DocumentHelper.createDocument(); // 创建document对象
		Element root = document.addElement("menus"); // 新加�1个menus元素
		//root.addComment("An XML Catalog"); // 加注释
		//root.addProcessingInstruction("target", "text"); // 加一个指�?
		Element journalElement = root.addElement("node"); // 在menus下加�?个name节点
		journalElement.addAttribute("label", "内容"); // 给name添加title属性，并设置他的值�为XML
															// Zone
		journalElement.addAttribute("href", "链接地址");
		journalElement.addAttribute("target", "在那一页面显示");
		
		
		Element articleElement = journalElement.addElement("node"); // 给name节点添加�?个article节点
		articleElement.addAttribute("label", "内容"); // 给article添加level属�?�，并设置他的�?�为Intermediate
		articleElement.addAttribute("href", "链接地址");
		articleElement.addAttribute("target", "在那一页面显示");
		/*Element titleElement = articleElement.addElement("title");
		// 使用 setText() 方法设置 article 元素的文�?
		titleElement.setText("Java configuration with XML Schema"); // 设置title的文本内�?
		// 向article元素中添加author元素
		Element authorElement = articleElement.addElement("author");
		// 向author元素中添加firstname,lastname元素,并用setText()设置他们的文�?
		Element firstNameElement = authorElement.addElement("firstname");
		firstNameElement.setText("Marcello");
		Element lastNameElement = authorElement.addElement("lastname");
		lastNameElement.setText("Vitaletti");*/
		// return document;
		// }
		// 使用 addDocType() 方法添加文档类型说明
		// document.addDocType("catalog",null,"file://c:/Dtds/catalog.dtd");
		try {
			OutputFormat format = OutputFormat.createCompactFormat(); // 按格式输出xml文挡
			format.setEncoding("UTF-8"); // 设置encoding为utf-8
			XMLWriter output = new XMLWriter(new FileWriter(filepath
					+ "mycatalog.xml"), format); // 按格式新建一个xml文档
			output.write(document); // 将document对象写入xml文档
			output.close(); // 关闭XMLWriter对象
		} catch (IOException e) {
			System.out.println(e.getMessage());
		}
		return document;
	}

	/**
	 * @param args
	 */

	public static void main(String[] args) {
		XmlBuild create = new XmlBuild();
		create.Create();
	}
}

2.将生成的的xml文件放到一个可以调用xml文件生成树的mxml中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     fontFamily="simsun" fontSize="12" 
     layout="absolute" creationComplete="menu.send();" initialize="init()">
<mx:Script>
    <![CDATA[
    	import mx.controls.Alert;
    	import mx.events.ListEvent;
         import mx.collections.ArrayCollection;
         import mx.rpc.events.ResultEvent;
         import mx.managers.PopUpManager;
         
         [Bindable]//这里就是导入xml文件的地方
         private var strUrl:String = "mycatalog.xml";
         [Bindable]
         private var menus:XML;
         
         [Bindable]
         [Embed("open.gif")]
         public var openicon:Class;
          [Bindable]
          [Embed("close.gif")]
         public var closeicon:Class;
          [Bindable]
          [Embed("leaf.gif")]
         public var leaficon:Class;
         
         private var myContextMenu:ContextMenu = new ContextMenu();
         
         private function init():void
		 {
		 	// this.strUrl = this.parameters.url;
		 	 //设置了可编辑树再初始化右键菜单
		 	// if(this.parameters.edit == "true")
		 	 //{
		 	 	this.initContextMenu();
		 	// }
		 	 this.tree1.contextMenu = myContextMenu;
		 }
         
         private function initContextMenu():void
         {
         	myContextMenu.hideBuiltInItems();
         	var add:ContextMenuItem = new ContextMenuItem("添加");
         	var rename:ContextMenuItem = new ContextMenuItem("重命名");
         	var remove:ContextMenuItem = new ContextMenuItem("删除");
         	myContextMenu.customItems.push(add);
         	myContextMenu.customItems.push(rename);
         	myContextMenu.customItems.push(remove);
         	
         	add.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,function():void
         	{
         		//可以对弹出的子窗口进行操作
                 var win:window = showAlertWindow();
         	});
         	//删除节点事件
         	remove.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,function():void
         	{
         	    tree1.dataDescriptor.removeChildAt(
				tree1.selectedItem.parent(),
				tree1.selectedItem,
				tree1.selectedItem.childIndex(),
				tree1.dataProvider
				);
         	});
         }
         
         private function showAlertWindow():window
         {
         	//window是自定义组件window.mxml
             var myPanel:window = window(PopUpManager.createPopUp(this, window, true)); // 这里第三个参数 true 表示: 弹出myPanel窗口后, 是否可以对父级操作, 值为true时, 就会产生背景模糊的效果, 并不能对父级的东西进行操作
             return myPanel;
           }
         
         private function LoadMenu(event:ResultEvent):void
         {
             menus = XML(event.result);
             var results:XMLList = menus.node;
             tree1.dataProvider = results;
         }
		 //菜单图标设置
         private function treeIcon(item:Object):Class
         {
         	
              var node:XML = XML(item);
              trace('icon:' + node.@icon);
              var str : String = node.@icon;
              //已经设置图标
              if(node.hasOwnProperty("@icon"))
              {
	              if(node.@icon == 'openicon')
	              {
	              	  return openicon;
	              }
	              if(node.@icon == 'closeicon')
	              {
	              	  return closeicon;
	              }
	              if(node.@icon == 'leaficon')
	              {
	              	  return leaficon;
	              }
              }
              else
              {
				//如果没定义icon就直接用默认的　              		
              	if(!tree1.dataDescriptor.isBranch(item))
              	{
			          return tree1.getStyle("defaultLeafIcon");
			    }
			    if(tree1.isItemOpen(item))
			    {
			          return tree1.getStyle("folderOpenIcon");
			    }
			    else
			    {
			        return tree1.getStyle("folderClosedIcon");
			    }
              }
              return null;
        }
        
         /**
         * 菜单树单项点击事件
         * */
         private function itemClickHandler(evt:ListEvent):void
		   {
				var item:Object = Tree(evt.currentTarget).selectedItem;
				if (tree1.dataDescriptor.isBranch(item)) 
				{
				   //tree1.expandItem(item, !groupTree.isItemOpen(item), true);
		        }
		        else
		        {
					//得到节点对象
					var node:XML = XML(item);
					//如果有属性href
					if(node.hasOwnProperty("@href") && node.hasOwnProperty("@target"))
					{
						openURL(node.@href,node.@target);
					}
					if(node.hasOwnProperty("@href") && (node.hasOwnProperty("@target") == false))
					{
						//没有指定target默认在新窗口中打开
						openURL(node.@href,"_blank");
					}
		        }
          }
         	
         //页面跳转的方法　
          private function openURL(url:String ,target:String):void
          {
			 var request:URLRequest = new URLRequest(url); 
			 navigateToURL(request,target);
          }
    ]]>
</mx:Script>
    <mx:HTTPService url="{strUrl}" id="menu" useProxy="false" 
         showBusyCursor="true" result="LoadMenu(event)" resultFormat="xml"/>
    <mx:Tree iconFunction="treeIcon" id="tree1" width="100%" height="100%" labelField="@label"  itemClick="itemClickHandler(event)"/>
</mx:Application>

可以正常显示
3.就是将先有的数据库内容生成xml文件了；
我上传了工程 可以下载看看；