flex拖动式生成菜单 - flex

其实很久以前我就有过用Flash动态生成xml菜单的想法，可是…(种种原因)…没实现，当时非常不甘心。

现在有Flex了，我又想把xml菜单做一下，昨天搞了一天，终于小有成果，就来和大家分享一下，我认为代码其实写的不好，因为我是从网上七拼八凑拿来的代码，好的是一种思路，‘拖动式的思路’（暂且用这个词吧）

代码说明：主要代码段都在Panel组件里，而在Panel里Tree的作用举足轻重，Tree的功能很强大，在内部就拖动根节点和叶节点，任意拖动节点就免去了代码实现节点们顺序的问题，我当时就被它这点折服了，还又个垃圾箱，你可以将根节点或叶节点拖到垃圾箱里，这样也免去了删除节点的麻烦，我其实就只完成了个增加节点的功能，并且还只是在最后增加节点（不过由于其天生可拖动性，我这样就完全可以了，你可以把生成的最后节点拖到想要的位置啊！！）。好了，我也不多说了，取之于网民，给之于网民，代码和大体效果下面都有，(里面又很多效果，希望你都理解！毕竟flex太强大了)Enjoy it!!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
  <![CDATA[
   import mx.collections.XMLListCollection;

   [Bindable]
   var companyList:XMLListCollection=new XMLListCollection();

   private function addFolder():void
   {
    var newNode:XML = <node label="单击此处修改" url="" isBranch="true">
          <node label="单击此处修改" url=""/>
                                </node>;
    companyList.addItem(newNode);
   }

   private function addLeaf():void
   {
    var newNode:XML =<node label="单击此处修改" url=""/>
    companyList.addItem(newNode);
   }

  ]]>
</mx:Script>

<mx:Panel id="panel" width="500" height="450" layout="absolute" horizontalCenter="-1" verticalCenter="0" title="修改Lebel">

        <mx:Tree id="XmlTree" width="282" height="223" x="0" showRoot="false" editable="true"
            dataProvider="{companyList}" labelField="@label" dragEnabled="true" dropEnabled="true"/>

        <mx:Tree id="DirtyTree" width="75" height="25" x="302" showRoot="false" dropEnabled="true" y="198"/>

  <mx:Button x="96" y="231" label="Creater Xml"
   click="txt.text=''+XmlTree.dataProvider;menu.dataProvider=XmlTree.dataProvider;menu.labelField='@label'"/>

  <mx:TextArea id="txt" x="0" y="261" width="100%" height="127"/>
  <mx:Button x="290" y="71" label="Add Folder" click="addFolder()" width="97"/>
  <mx:Button x="290" y="118" label="Add Leaf" width="97" click="addLeaf()"/>

  <mx:ComboBox x="290" y="19" id="cobox"
   dataProvider="{[{label:'修改Label', data:'@label'}, {label:'修改Url', data:'@url'}]}"
   change="XmlTree.labelField=cobox.selectedItem.data;panel.title=cobox.selectedLabel">
  </mx:ComboBox>
  <mx:Label x="324" y="172" text="垃圾箱" width="35" textAlign="center"/>


</mx:Panel>

<mx:MenuBar id="menu" y="97" horizontalCenter="0">
</mx:MenuBar>

</mx:Application>