Flex右键菜单扫盲

怎么添加右键？在 Flex 中，只有应用程序中的顶层组件才能拥有上下文菜单。例如，如果 DataGrid 控件是 TabNavigator 或 VBox 容器的子级，则 DataGrid 控件不能拥有其自己的上下文菜单。组件一般都有个“contextMenu”属性，对通过实例化 ContextMenu 类，可以控制上下文菜单中显示的项。为了向 ContextMenu 对象中添加新项，可以创建一个 ContextMenuItem 对象，然后将该对象添加到 ContextMenu.customItems 数组。对该对象进行侦听可以响应单击事件，例如：pasteMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemPasteHandler);

使该对象不可见可以设置其visiable属性，使其不可用可使用enable属性；

separatorBefore指示指定的菜单项上方是否显示分隔条。

相关使用代码如下：

diagramBox.contextMenu=popupMenuFactory.getPopupMenu(); /// // Licensed Materials - Property of IBM // 5724-Z78 // © Copyright IBM Corporation 2007, 2010. All Rights Reserved. // // Note to U.S. Government Users Restricted Rights: // Use, duplication or disclosure restricted by GSA ADP Schedule // Contract with IBM Corp. /// package { import bpm.graphic.SubProcess; import bpm.graphic.Task; import com.ibm.ilog.elixir.diagram.Diagram; import com.ibm.ilog.elixir.diagram.Node; import com.ibm.ilog.elixir.diagram.Renderer; import com.ibm.ilog.elixir.diagram.Subgraph; import com.ibm.ilog.elixir.diagram.editor.DiagramEditor; import flash.events.ContextMenuEvent; import flash.events.MouseEvent; import flash.external.ExternalInterface; import flash.geom.Point; import flash.ui.ContextMenu; import flash.ui.ContextMenuItem; import mx.core.FlexGlobals; import mx.resources.IResourceManager; /** * Creates the popup menu for the Diagram. */ public class DiagramMenuFactory { private var diageditor:DiagramEditor; private var resourceManager:IResourceManager; private var diagramPopupMenu:ContextMenu; // Custom menu items private var selectAllMenuItem:ContextMenuItem; private var deleteMenuItem:ContextMenuItem; private var cutMenuItem:ContextMenuItem; private var copyMenuItem:ContextMenuItem; private var pasteMenuItem:ContextMenuItem; private var groupSubMenuItem:ContextMenuItem; private var ungroupMenuItem:ContextMenuItem; private var layoutMenuItem:ContextMenuItem; private var connectMenuItem:ContextMenuItem; private var renameMenuItem:ContextMenuItem; private var conneMenuItem:ContextMenuItem; private var enterConnectMenuItem:ContextMenuItem; // Cache for labels used in popup menu private var deleteSelectedObjectsLabel:String; private var deleteObjectLabel:String; private var cutSelectedObjectsLabel:String; private var cutObjectLabel:String; private var copySelectedObjectsLabel:String; private var copyObjectLabel:String; private var layoutAllLabel:String; private var layoutObjectLabel:String; private var conneObjectLabel:String; private var enterConnectObjectLabel:String; // Renderer that is currently with the mouse public var currentObject:Object; private var currentMouseLocationX:Number=NaN; private var currentMouseLocationY:Number=NaN; private var menuLocationX:Number=NaN; private var menuLocationY:Number=NaN; public var projectId:String=""; /** * Factory to create the Diagram popup menu */ public function DiagramMenuFactory(resourceMgr:IResourceManager, editor:DiagramEditor, diagram:Diagram) { diageditor=editor; resourceManager=resourceMgr; diagram.addEventListener(MouseEvent.MOUSE_MOVE, diagramMouseMoveHandler); } private function diagramMouseMoveHandler(event:MouseEvent):void { currentMouseLocationX=event.stageX; currentMouseLocationY=event.stageY; currentObject=diageditor.graph.getHitRenderer(event.target); } // ----------------------------------------------------- // Popup Menu for the Diagram // ----------------------------------------------------- private function populatePopupMenu():void { diagramPopupMenu=new ContextMenu(); diagramPopupMenu.hideBuiltInItems(); addCustomItems(diagramPopupMenu); diagramPopupMenu.addEventListener(ContextMenuEvent.MENU_SELECT, popupMenu_menuSelect); } /** * Enables or disables the menu items according to * the number of selected objects. */ private function popupMenu_menuSelect(evt:ContextMenuEvent):void { // Store the position of the mouse at the moment when the menu is opened menuLocationX=currentMouseLocationX; menuLocationY=currentMouseLocationY; var selObjs:Vector.; if (currentObject != null) { // The popup menu has been opened for a specific object. selObjs=diageditor.getSelectedObjects(); if (selObjs.indexOf(currentObject) < 0) { // The object is not in the selected objects list diageditor.deselectAll(); diageditor.setSelected(currentObject as Renderer, true); deleteMenuItem.caption=deleteObjectLabel; copyMenuItem.caption=copyObjectLabel; cutMenuItem.caption=cutObjectLabel; renameMenuItem.visible=true; } else if (selObjs.length == 1) { // This is the only selected object deleteMenuItem.caption=deleteObjectLabel; copyMenuItem.caption=copyObjectLabel; cutMenuItem.caption=cutObjectLabel; renameMenuItem.visible=true; } else { // The object is in the selected list, so apply popup menu // functions to all selected objects deleteMenuItem.caption=deleteSelectedObjectsLabel; copyMenuItem.caption=copySelectedObjectsLabel; cutMenuItem.caption=cutSelectedObjectsLabel; renameMenuItem.visible=false; } selectAllMenuItem.visible=diageditor.canUngroup; layoutMenuItem.caption=layoutObjectLabel; layoutMenuItem.visible=diageditor.canUngroup; // Enable layout item only when something is configured selObjs=diageditor.getSelectedObjects(); var layoutEnabled:Boolean=false; for each (var s:Renderer in selObjs) { if (s is Subgraph) { if ((Subgraph(s).graph.getCurrentLinkLayout() != null) || (Subgraph(s).graph.getCurrentNodeLayout() != null)) { layoutEnabled=true; break; } } } layoutMenuItem.enabled=layoutEnabled; conneMenuItem.visible=true; enterConnectMenuItem.visible=true; if (currentObject is Task) { if (Task(currentObject).processId == '') { enterConnectMenuItem.enabled=false; } else { enterConnectMenuItem.enabled=true; } } } else { // This is the background popup menu renameMenuItem.visible=false; selectAllMenuItem.visible=true; selectAllMenuItem.enabled=(diageditor.graph.numElements > 0); deleteMenuItem.caption=deleteSelectedObjectsLabel; copyMenuItem.caption=copySelectedObjectsLabel; cutMenuItem.caption=cutSelectedObjectsLabel; layoutMenuItem.caption=layoutAllLabel; layoutMenuItem.visible=true; layoutMenuItem.enabled=((diageditor.graph.numElements > 0) && ((diageditor.graph.nodeLayout != null) || (diageditor.graph.linkLayout != null))); conneMenuItem.visible=false; enterConnectMenuItem.visible=false; } // Connect objects is only available if two nodes are selected selObjs=diageditor.getSelectedObjects(); if (selObjs.length == 2) { if (selObjs[0] is Node && selObjs[1] is Node) { connectMenuItem.visible=true; } else { connectMenuItem.visible=false; } } else { connectMenuItem.visible=false; } var hasSelection:Boolean=diageditor.hasSelection; deleteMenuItem.enabled=hasSelection; cutMenuItem.enabled=diageditor.canCopy; copyMenuItem.enabled=diageditor.canCopy; pasteMenuItem.enabled=diageditor.canPaste; groupSubMenuItem.enabled=FlexGlobals.topLevelApplication.canGroup; ungroupMenuItem.visible=diageditor.canUngroup; copyApplicationCustomItems(); } // The first visible item of the diagran context menu, // used by copyApplicationCustomItems to set/clear the separator. private var firstVisibleItem:ContextMenuItem=null; /** * Copies the custom menu items from the toplevel application's context menu * (typically the View Source and About Elixir Enterprise... items) */ private function copyApplicationCustomItems():void { var appMenu:ContextMenu=FlexGlobals.topLevelApplication.contextMenu; if (appMenu) { var index:int=-1; // scan custom items in the application context menu for each (var item:ContextMenuItem in appMenu.customItems) { // has the item already been copied to the diagram context menu? index=-1; for (var i:int=0; i < diagramPopupMenu.customItems.length; i++) { if (ContextMenuItem(diagramPopupMenu.customItems[i]).caption == item.caption) { index=i; break; } } if (index < 0) { // item has not yet been copied: copy it. index=appMenu.customItems.indexOf(item); var newItem:ContextMenuItem=item.clone(); newItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(event:ContextMenuEvent):void { // when the copied item is selected, we redispatch the event to the original // item in the application menu (we find it by its caption) for each (var appItem:ContextMenuItem in appMenu.customItems) { if (appItem.caption == ContextMenuItem(event.currentTarget).caption) { appItem.dispatchEvent(event); break; } } }); // add the copied item at the same position as in the application menu: diagramPopupMenu.customItems.splice(index, 0, newItem); } } // separate the application items from the diagram items by putting a separator // on the first visible item of the diagram menu: if (index >= 0) { if (firstVisibleItem) firstVisibleItem.separatorBefore=false; for (var j:int=index + 1; j < diagramPopupMenu.customItems.length; j++) { var nextItem:ContextMenuItem=ContextMenuItem(diagramPopupMenu.customItems[j]); if (nextItem.visible) { nextItem.separatorBefore=true; firstVisibleItem=nextItem; break; } } } } } /** * Add custom items for nodes. */ private function addCustomItems(cmenu:ContextMenu):void { renameMenuItem=new ContextMenuItem(resourceManager.getString("bpmeditor", "bpmeditor.renameCurrent.label")); cmenu.customItems.push(renameMenuItem); renameMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemRenameHandler); connectMenuItem=new ContextMenuItem(resourceManager.getString("bpmeditor", "bpmeditor.connect.label")); cmenu.customItems.push(connectMenuItem); connectMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemConnectHandler); selectAllMenuItem=new ContextMenuItem(resourceManager.getString("bpmeditor", "bpmeditor.selectall.label")); cmenu.customItems.push(selectAllMenuItem); selectAllMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemSelectAllHandler); deleteSelectedObjectsLabel=resourceManager.getString("bpmeditor", "bpmeditor.delete.label"); deleteObjectLabel=resourceManager.getString("bpmeditor", "bpmeditor.deleteCurrent.label"); deleteMenuItem=new ContextMenuItem(deleteSelectedObjectsLabel); cmenu.customItems.push(deleteMenuItem); deleteMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemDeleteHandler); cutSelectedObjectsLabel=resourceManager.getString("bpmeditor", "bpmeditor.cut.label"); cutObjectLabel=resourceManager.getString("bpmeditor", "bpmeditor.cutCurrent.label"); cutMenuItem=new ContextMenuItem(cutSelectedObjectsLabel); cmenu.customItems.push(cutMenuItem); cutMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemCutHandler); copySelectedObjectsLabel=resourceManager.getString("bpmeditor", "bpmeditor.copy.label"); copyObjectLabel=resourceManager.getString("bpmeditor", "bpmeditor.copyCurrent.label"); copyMenuItem=new ContextMenuItem(label); cmenu.customItems.push(copyMenuItem); copyMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemCopyHandler); var label:String=resourceManager.getString("bpmeditor", "bpmeditor.paste.label"); pasteMenuItem=new ContextMenuItem(label); cmenu.customItems.push(pasteMenuItem); pasteMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemPasteHandler); label=resourceManager.getString("bpmeditor", "bpmeditor.groupSubprocess.label"); groupSubMenuItem=new ContextMenuItem(label); groupSubMenuItem.separatorBefore=true; cmenu.customItems.push(groupSubMenuItem); groupSubMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemGroupSubgraphHandler); label=resourceManager.getString("bpmeditor", "bpmeditor.ungroup.label"); ungroupMenuItem=new ContextMenuItem(label); cmenu.customItems.push(ungroupMenuItem); ungroupMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemUngroupHandler); layoutAllLabel=resourceManager.getString("bpmeditor", "bpmeditor.layout.label"); layoutObjectLabel=resourceManager.getString("bpmeditor", "bpmeditor.layoutCurrent.label"); layoutMenuItem=new ContextMenuItem(layoutAllLabel); layoutMenuItem.separatorBefore=true; cmenu.customItems.push(layoutMenuItem); layoutMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemLayoutHandler); conneObjectLabel='关联流程'; conneMenuItem=new ContextMenuItem(conneObjectLabel); conneMenuItem.separatorBefore=true; cmenu.customItems.push(conneMenuItem); conneMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemConneHandler); enterConnectObjectLabel='进入关联流程'; enterConnectMenuItem=new ContextMenuItem(enterConnectObjectLabel); enterConnectMenuItem.separatorBefore=false; cmenu.customItems.push(enterConnectMenuItem); enterConnectMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, applMenuItemEnterConneHandler); } private function applMenuItemEnterConneHandler(event:ContextMenuEvent):void { if (currentObject is Task) { var idStr:String=Task(currentObject).id; ExternalInterface.call('nextProcess', idStr); } } private function applMenuItemConneHandler(event:ContextMenuEvent):void { if (currentObject is Task) { ExternalInterface.call('setConnectProcess', projectId); trace(Task(currentObject).id); // Task(currentObject).processId='sadfasdfdafasfafsd'; } } /** * Open text editor to edit object text. */ private function applMenuItemRenameHandler(event:ContextMenuEvent):void { diageditor.startEditingText(diageditor.getSelectedObjects()[0]); } /** * Connect two selected nodes. */ private function applMenuItemConnectHandler(event:ContextMenuEvent):void { FlexGlobals.topLevelApplication.connectNodes(); } /** * Select all objects in the graph or subgraph. * Selection does not recursive in subgraphs. */ private function applMenuItemSelectAllHandler(event:ContextMenuEvent):void { if (currentObject is Subgraph) { diageditor.deselectAll(); for each (var node:Renderer in Subgraph(currentObject).graph.getNodes()) { diageditor.setSelected(node, true); } for each (var link:Renderer in Subgraph(currentObject).graph.getLinks()) { diageditor.setSelected(link, true); } } else { diageditor.deselectAll(); diageditor.selectAll(); } } /** * Delete selected objects. */ private function applMenuItemDeleteHandler(event:ContextMenuEvent):void { diageditor.deleteSelection(); } /** * Cut selected objects. */ private function applMenuItemCutHandler(event:ContextMenuEvent):void { diageditor.cut(); } /** * Copy selected objects. */ private function applMenuItemCopyHandler(event:ContextMenuEvent):void { diageditor.copy(); } /** * Paste selected objects. */ private function applMenuItemPasteHandler(event:ContextMenuEvent):void { // Do it diageditor.paste(); // Coordinate space of the parent var minx:Number=Number.MAX_VALUE; var miny:Number=Number.MAX_VALUE; var maxx:Number=Number.MIN_VALUE; var maxy:Number=Number.MIN_VALUE; var pastedObjects:Vector.=diageditor.getSelectedObjects(); var pasted:Renderer=null; for each (pasted in pastedObjects) { if (pasted is Node) { minx=Math.min(minx, Number(pasted.x)); miny=Math.min(miny, Number(pasted.y)); maxx=Math.max(maxx, Number(pasted.x + pasted.width)); maxy=Math.max(maxy, Number(pasted.y + pasted.height)); } } if (pasted != null) { var p:Point=pasted.parent.globalToLocal(new Point(menuLocationX, menuLocationY)); var dx:Number=p.x - minx; var dy:Number=p.y - miny; diageditor.translateSelectionOfDelta(dx, dy); } } /** * Group selected objects as children of a subgraph. */ private function applMenuItemGroupSubgraphHandler(event:ContextMenuEvent):void { var subgraph:Subgraph=new SubProcess(); subgraph.collapsed=false; subgraph.width=resourceManager.getNumber("bpmeditor", "bpmeditor.subprocess.default.width"); subgraph.height=resourceManager.getNumber("bpmeditor", "bpmeditor.subprocess.default.height"); subgraph.label=resourceManager.getString("bpmeditor", "bpmeditor.subprocess.default.label"); FlexGlobals.topLevelApplication.groupObjects(subgraph); } /** * Ungroup any selected subgraphs. */ private function applMenuItemUngroupHandler(event:ContextMenuEvent):void { diageditor.ungroup(); } /** * Perform layout on the whole diagram or on the selected subgraph. */ private function applMenuItemLayoutHandler(event:ContextMenuEvent):void { if (currentObject == null) { FlexGlobals.topLevelApplication.layoutAll(); } else { FlexGlobals.topLevelApplication.layoutSelectedSubgraph(); } } /** * Returns the menu displayed for the diagram. */ public function getPopupMenu():ContextMenu { if (diagramPopupMenu == null) populatePopupMenu(); return diagramPopupMenu; } } }