[Flex] 组件Tree系列 —— 实现右键拓展功能

主程序mxml：

 <?xml version="1.0" encoding="utf-8"?>

 <!--功能描述：结合tree拓展右键功能 必须在index.template.html设置params.wmode = "opaque"以屏蔽flash右键;-->

 <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"
                initialize="init()">
     <fx:Script>
         <![CDATA[
             import com.render.TreeRightClickManager;

             import mx.controls.Alert;
             import mx.controls.Menu;
             import mx.controls.listClasses.IListItemRenderer;
             import mx.events.MenuEvent;

             [Event(name="rightClick",type="flash.events.ContextMenuEvent")]

             private var rightClickRegisted:Boolean = false;
             private var menu:Menu;
             [Bindable]
             private var data:XML;

             private function init():void{
                 data=
                     <actor label="周星驰" level="0">
                         <year label="1988" level="1">
                             <item label="《霹雳先锋》香港票房8916612 " level="2"/>
                             <item label="《捕风汉子》香港票房3149395" level="2"/>
                              <item label="《最佳女婿》香港票房5807710" level="2"/>
                         </year>
                     </actor>;
                 if (!rightClickRegisted){
                     TreeRightClickManager.regist();
                     rightClickRegisted = true;
                 }
                 //加载右击事件
                 tree.addEventListener(TreeRightClickManager.RIGHT_CLICK,treeRightClickHandler);
             }

             /**
              *树右击事件
              **/
             private function treeRightClickHandler(event:ContextMenuEvent):void
             {
                 tree_onRightClicked(event);
                 tree_removeMenu();
                 tree_InitMenu();
             }

             private function tree_onRightClicked(e:ContextMenuEvent):void
             {
                 var rightClickItemRender:IListItemRenderer;
                 var rightClickIndex:int;
                 if(e.mouseTarget is IListItemRenderer)
                 {
                     rightClickItemRender = IListItemRenderer(e.mouseTarget);         }

                 else if(e.mouseTarget.parent is IListItemRenderer)
                 {
                     rightClickItemRender = IListItemRenderer(e.mouseTarget.parent);
                 }
                 if(rightClickItemRender != null)
                 {
                     rightClickIndex = tree.itemRendererToIndex(rightClickItemRender);
                     if(tree.selectedIndex != rightClickIndex)
                     {
                         tree.selectedIndex = rightClickIndex;
                     }
                 }
             }

             /**
              * 删除右键菜单
              **/
             private function tree_removeMenu():void
             {
                 if(menu!=null)
                 {
                     menu.hide();
                     menu.removeEventListener(MenuEvent.ITEM_CLICK,tree_MenuItemSelected);
                     menu=null;
                 }
             }

             /**
              * 生成右键菜单
              **/
             private var selectedId:String="";
             private var selectedLabel:String="";
             private function tree_InitMenu():void
             {
                 var currentItem:XML=tree.selectedItem as XML;
                 selectedId=currentItem.@id;
                 selectedLabel=currentItem.@label;
                 var level:String=currentItem.@level;

                 menu = Menu.createMenu(this, tree_createMenuItems(level), false);
                 menu.iconField="itemIcon";//右键菜单的图标
                 menu.labelField="label";  //右键菜单的名称
                 menu.variableRowHeight = true;
                 menu.addEventListener(MenuEvent.ITEM_CLICK, tree_MenuItemSelected);  //右键菜单的事件
                 var point:Point = new Point(mouseX,mouseY);
                 point = localToGlobal(point);
                 menu.show(point.x,point.y);  //显示右键菜单
             }

             /**
              * 根据节点不同，生成不同的菜单
              **/
             private function tree_createMenuItems(level:String):Array  

             {
                 var menuItems:Array = new Array();
                 var menuXs:Object= new Object;
                 menuXs.label = '刷新';
                 //menuXs.itemIcon = this.menu_TZ_add;  //给菜单加图标
                 menuItems.push(menuXs);
                 var menuExpand:Object=new Object();
                 menuExpand.label="展开当前节点";
                 menuItems.push(menuExpand);
                 var menuClose:Object=new Object();
                 menuClose.label="关闭当前节点";
                 menuItems.push(menuClose);
                 var menuExpandAll:Object=new Object();
                 menuExpandAll.label="展开所有节点";
                 menuItems.push(menuExpandAll);
                 var menuCloseAll:Object=new Object();
                 menuCloseAll.label="关闭所有节点";
                 menuItems.push(menuCloseAll);
                 switch(level){
                     case "0":
                         var menuAddNj:Object = new Object;
                         menuAddNj.label = "添加明星";
                         menuItems.push(menuAddNj);
                         var menuDelNj:Object=new Object();
                         menuDelNj.label="删除明星";
                         menuItems.push(menuDelNj);
                         break;
                     case "1":
                         var menuAddBj:Object=new Object();
                         menuAddBj.label="添加年份";
                         menuItems.push(menuAddBj);
                         var menuDelBj:Object=new Object();
                         menuDelBj.label="删除年份";
                         menuItems.push(menuDelBj);
                         var menuAddStu:Object=new Object();
                         menuAddStu.label="添加影片";
                         menuItems.push(menuAddStu);
                         break;
                     case "2":
                         var menuEditStu:Object=new Object();
                         menuEditStu.label="修改影片";
                         menuItems.push(menuEditStu);
                         var menuDelStu:Object=new Object();
                         menuDelStu.label="删除影片";
                         menuItems.push(menuDelStu);
                         break;
                 }            

                 return menuItems;

             }
             /**
              * 点击菜单，相应方法
              **/
             private function tree_MenuItemSelected(event:MenuEvent):void

             {
                 var menuItem:Object = event.menu.selectedItem as Object;
                 switch(menuItem.label)
                 {
                     case "展开当前节点":
                         nodeExpand();
                         break;
                     case "关闭当前节点":
                         nodeClose();
                         break;
                     case "展开所有节点":
                         nodeExpandAll();
                         break;
                     case "关闭所有节点":
                         nodeCloseAll();
                         break;
                     case "删除影片":
                         delStuNode();
                         break;
                     case "添加影片":
                         addStuNode();
                         break;

                 }
             }

             private function treeChanged(event:Event):void{
                 var selectedTreeNode:XML;
                 selectedTreeNode=Tree(event.target).selectedItem as XML;
                 //Alert.show("您点击了："+selectedTreeNode.@label,"提示");

             }

             /**
              * 展开当前节点
              **/
             private function nodeExpand():void{
                 tree.expandItem(tree.selectedItem,true);
             }

             /**
              * 关闭当前节点
              **/
             private function nodeClose():void{
                 tree.expandItem(tree.selectedItem,false);

             } 

             /**
              * 展开所有节点
              **/
             private function nodeExpandAll():void{
                 for each(var item:XML in tree.dataProvider) {
                     tree.expandChildrenOf(item,true);
                 }
             }

             /**
              * 关闭所有节点
              **/
             private function nodeCloseAll():void{
                 //方法1：studentTree.openItems = [];
                 //方法2：
                 for each(var item:XML in tree.dataProvider) {
                     tree.expandChildrenOf(item,false);
                 }
             }

             /**
              * 删除节点
              **/
             private function delStuNode():void{
                 Alert.show("删除影片 ID="+selectedId+"  名称="+selectedLabel,"提示",4,null,ok);
                 function ok():void
                 {
                     var delStuItemPar:Object=new Object();
                     delStuItemPar=tree.selectedItem.parent();
                     var delStuInx:int=tree.selectedItem.childIndex();
                     tree.dataDescriptor.removeChildAt(delStuItemPar,tree.selectedItem,delStuInx,tree.dataProvider);
                 }

             }

             /**
              * 添加影片
              **/
             private function addStuNode():void{
                 var node:XML=<item label="新影片" level="2"/>;
                 (tree.selectedItem as XML).appendChild(node);
             }

         ]]>
     </fx:Script>
     <fx:Declarations>
         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
     </fx:Declarations>
     <s:Panel x="25" y="23" width="250" height="448" title="喜剧之王">
         <mx:Tree id="tree" left="0" top="0" width="100%" height="100%" labelField="@label" change="treeChanged(event)" dataProvider="{data}" allowMultipleSelection ="true"/>
     </s:Panel>
 </s:Application>

com.render.TreeRightClickManager类：

 package com.render
 {
     import flash.display.InteractiveObject;
     import flash.events.ContextMenuEvent;
     import flash.events.MouseEvent;
     import flash.external.ExternalInterface;

     import mx.core.Application;
     import mx.core.FlexGlobals;

     public class TreeRightClickManager
     {
         static private var rightClickTarget:*;
         static public const RIGHT_CLICK:String = "rightClick";
         static private const javascript:XML =
             <script>
                 <![CDATA[
                     function(flashObjectId)
                     {
                         var RightClick = {
                                 init: function (flashObjectId) {
                                 this.FlashObjectID = flashObjectId;
                                 this.Cache = this.FlashObjectID;
                                 if(window.addEventListener){
                                      window.addEventListener("mousedown", this.onGeckoMouse(), true);
                                 } else {
                                     document.getElementById(this.FlashObjectID).parentNode.onmouseup = function() { document.getElementById(RightClick.FlashObjectID).parentNode.releaseCapture(); }
                                     document.oncontextmenu = function(){ if(window.event.srcElement.id == RightClick.FlashObjectID) { return false; } else { RightClick.Cache = "nan"; }}
                                     document.getElementById(this.FlashObjectID).parentNode.onmousedown = RightClick.onIEMouse;
                                 }
                             },
                             /**
                              * GECKO / WEBKIT event overkill
                              * @param {Object} eventObject
                              */
                             killEvents: function(eventObject) {
                                 if(eventObject) {
                                     if (eventObject.stopPropagation) eventObject.stopPropagation();
                                     if (eventObject.preventDefault) eventObject.preventDefault();
                                     if (eventObject.preventCapture) eventObject.preventCapture();
                                        if (eventObject.preventBubble) eventObject.preventBubble();
                                 }
                             },
                             /**
                              * GECKO / WEBKIT call right click
                              * @param {Object} ev
                              */
                             onGeckoMouse: function(ev) {
                                   return function(ev) {
                                 if (ev.button != 0) {
                                     RightClick.killEvents(ev);
                                     if(ev.target.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) {
                                         RightClick.call();
                                     }
                                     RightClick.Cache = ev.target.id;
                                 }
                               }
                             },
                             /**
                              * IE call right click
                              * @param {Object} ev
                              */
                             onIEMouse: function() {
                                   if (event.button > 1) {
                                     if(window.event.srcElement.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) {
                                         RightClick.call();
                                     }
                                     document.getElementById(RightClick.FlashObjectID).parentNode.setCapture();
                                     if(window.event.srcElement.id)
                                     RightClick.Cache = window.event.srcElement.id;
                                 }
                             },
                             /**
                              * Main call to Flash External Interface
                              */
                             call: function() {
                                 document.getElementById(this.FlashObjectID).rightClick();
                             }
                         }

                         RightClick.init(flashObjectId);
                     }
                 ]]>
             </script>;

         public function TreeRightClickManager()
         {
             return;
         }

         static public function regist() : Boolean
         {
             if (ExternalInterface.available)
             {
                 ExternalInterface.call(javascript, ExternalInterface.objectID);
                 ExternalInterface.addCallback("rightClick", dispatchRightClickEvent);
                 //Application.application.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
                 FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);

             }
             return true;
         }

         static private function mouseOverHandler(event:MouseEvent) : void
         {
             rightClickTarget = InteractiveObject(event.target);
             return;
         }

         static private function dispatchRightClickEvent() : void
         {
             var event:ContextMenuEvent;
             if(rightClickTarget !=null)
             {
                 event =new ContextMenuEvent(RIGHT_CLICK,true,false, rightClickTarget as InteractiveObject, rightClickTarget as InteractiveObject);
                 rightClickTarget.dispatchEvent(event);
             }
             return;
         }

     }
 }

注：必须在index.template.html设置params.wmode = "opaque"以屏蔽flash右键