Saturday, October 20, 2012

Customizing Flash Right- Click Menu

   The menu which appears on right click of a flash object can be customized to include items of your choice. The following code segment adds options, "Expand", "Hide Outcomes", "Hide Inputs", "Hide Outputs", "Hide Privileges" and "Keys Only" to the menu. Further it removes/ hides some existing items of the menu. Code segment to do this is posted below.


            var contextMenu: ContextMenu = new ContextMenu();
            contextMenu.clipboardMenu = false;   
            var showAll : ContextMenuItem = new ContextMenuItem("Expand");
            var hideOutcomes : ContextMenuItem = new ContextMenuItem("Hide Outcomes");
            var hideInputs : ContextMenuItem = new ContextMenuItem("Hide Inputs");
            var hideOutputs : ContextMenuItem = new ContextMenuItem("Hide Outputs");
            var hidePrivileges : ContextMenuItem = new ContextMenuItem("Hide Privileges");
            var hideAll : ContextMenuItem = new ContextMenuItem("Keys Only");
            showAll.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleShowAll);
            hideOutcomes.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHideOutcomes);
            hideInputs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHideInput);
            hideOutputs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHideOutput);
            hidePrivileges.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHidePrivileges);
            hideAll.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,      handleHideAll);

            component.contextMenu = contextMenu;  
            // component is of type mx.core.UIComponent


   First a 'flash.ui.ContextMenu' instance is created. Subsequently, its inbuilt and clip board items are removed [contextMenu.hideBuiltInItems(); contextMenu.clipboardMenu = false;]. Then new menu items are created and added to the menu. Each menu items is registered with an event listener to be fired when the same is selected.
  For an example, it "Hide Outputs" item is selected the following method will be triggered.

private function handleHideOutcomes (event: ContextMenuEvent) : void {
        // operational code


Finally, the menu created this way is assigned as the context menu of the respective UI component (mx.core.UIComponent). Following is the figure of the right click menu.


No comments:

Post a Comment