[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右键