Display Custom menu on right click

In flex, when you right click on any component or any place in the swf, you see the menu displayed with default options like Print, Copy, Paste, Settings, etc. But sometimes there could be a scenario where you may have to show custom menu items on the right click menu apart from default ones. How will you do it? How can you add menu items in addition to the existing ones. Well, its very simple.

In the below example, right click and you will see three custom menu items in the "Right Click Menu" that are displayed as first three items and you can enable/disable second menu item or visible/invisible third menu item by selecting first menu item.


Lets go step by step and see how easy it is to add menu items on right click menu.

Step 1: The first thing you need to do is create the "ContextMenu". ContextMenu will be available on all Interactive objects as Application, Panel, Button, etc but they would not have been instantiated except for Application. As the first step, check and instantiate the ContextMenu. ContextMenu is the right click menu, hence you need to instantiate it and add menu items to it.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    backgroundColor="#FFFFFF"
    creationComplete="creationCompleteHandler(event)" 
	>

<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.controls.Alert;

        private var menu1:ContextMenuItem;
        private var menu2:ContextMenuItem;
        private var menu3:ContextMenuItem;
        
        private function creationCompleteHandler(event:FlexEvent):void {
            customizeContextMenu();    
        }
        
        private function customizeContextMenu():void
        {
            // Check and initialize ContextMenu 
            if (!contextMenu) {
                contextMenu = new ContextMenu();
            }
			
            ...
			
        }
   
    ]]>

</mx:Script>

	<mx:VBox horizontalCenter="0" paddingTop="40" paddingLeft="50">
		<mx:Text text="Right Click and select the menu Item 'New Customized menu item'. An alert will show 
		validating that you have clicked on the respective menu item. Right click again and verify the 
		additional menu items vanished (Enable/Diable menu and Visible/Invisible menu). Right click again 
		and select 'New Customized menu item'. Again right click and verify the additional menu items 
		displayed (Enable/Diable menu and Visible/Invisible menu)." width="500" fontSize="12" fontWeight="bold"/> 
	</mx:VBox>
    
</mx:Application>


Step 2: After creating the ContextMenu, create your ContextMenuItems and set the handler for each menu item so that when you click on any menu item, specific/custom operation is performed like navigating to other screen etc. Then add these Custom ContextMenuItems to the ContextMenu as customItems. Note that all custom menu items will be displayed as first menu items in the Right Click Menu.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    backgroundColor="#FFFFFF"
    creationComplete="creationCompleteHandler(event)" 
	>

<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.controls.Alert;

        private var menu1:ContextMenuItem;
        private var menu2:ContextMenuItem;
        private var menu3:ContextMenuItem;
        
        private function creationCompleteHandler(event:FlexEvent):void {
            customizeContextMenu();    
        }
        
        private function customizeContextMenu():void
        {
            // Check and initialize ContextMenu 
            if (!contextMenu) {
                contextMenu = new ContextMenu();
            }
			
            // By default, the ContextMenu contains some Flash Player related menu items as
            // Print, Zoom, etc...
            // These menu items can be hidden as done below.
            contextMenu.hideBuiltInItems();
            
            //The second parameter "true/false" is to add the separator before (above) menu item
            menu1 = new ContextMenuItem("New Customized Menu", true);
            menu2 = new ContextMenuItem("Enable/Disable Menu", true);
            menu3 = new ContextMenuItem("Visible/Invisible Menu");
            
            
            // Add handlers to the menus so that any specific 
            // operation can be performed on selecting each menu item
            menu1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, customMenuItemHandler);
            menu2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, customMenuItemHandler);
            menu3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, customMenuItemHandler);
            
            // Add your customized entries to the context menu            
            contextMenu.customItems.push(menu1);
            contextMenu.customItems.push(menu2);
            contextMenu.customItems.push(menu3);
			
            ...
        }
   
    ]]>

</mx:Script>

	<mx:VBox horizontalCenter="0" paddingTop="40" paddingLeft="50">
        ... 
	</mx:VBox>
		    
</mx:Application>


Step 3: Now add the logic you wish to perform when you click on each custom menu item in the respective handler functions. Here I am displaying an alert message when you click on each menu item and also enabling/disabling or visible/invisible the menu items whenever you click on "New Customized menu item". Similarly you can have your custom functionality like navigating to different screen or performing computations in the handler. Additionally you can add a handler to execute any logic whenever you open "Right Menu" on right click using "contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT, menuSelectHandler);" - here "menuSelectHandler" is the handler where you can write your logic.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    backgroundColor="#FFFFFF"
    creationComplete="creationCompleteHandler(event)" 
	>

<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.controls.Alert;

        private var menu1:ContextMenuItem;
        private var menu2:ContextMenuItem;
        private var menu3:ContextMenuItem;
        
        private function creationCompleteHandler(event:FlexEvent):void {
            customizeContextMenu();    
        }
        
        private function customizeContextMenu():void
        {
            // Check and initialize ContextMenu 
            if (!contextMenu) {
                contextMenu = new ContextMenu();
            }
                                           
            // By default, the ContextMenu contains some Flash Player related menu items as
            // Print, Zoom, etc...
            // These menu items can be hidden as done below.
            contextMenu.hideBuiltInItems();
            
            //The second parameter "true/false" is to add the separator before (above) menu item
            menu1 = new ContextMenuItem("New Customized Menu", true);
            menu2 = new ContextMenuItem("Enable/Disable Menu", true);
            menu3 = new ContextMenuItem("Visible/Invisible Menu");
            
            
            // Add handlers to the menus so that any specific 
            // operation can be performed on selecting each menu item
            menu1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, customMenuItemHandler);
            menu2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, customMenuItemHandler);
            menu3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, customMenuItemHandler);
            
            // Add your customized entries to the context menu            
            contextMenu.customItems.push(menu1);
            contextMenu.customItems.push(menu2);
            contextMenu.customItems.push(menu3);
            
            // Manage Menu selection when the menu is opened on right click
            contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT, menuSelectHandler);
        }

        // Handler when customized menu items are selected.       
        private function customMenuItemHandler(event:ContextMenuEvent):void {
            switch (event.target) {
                case menu1:
                    Alert.show("New Customized Menu is selected.", event.currentTarget.caption);
                    menu2.enabled = !menu2.enabled;
	            	menu3.visible = !menu3.visible;
                    break;
                case menu2:
                    Alert.show("Enable/Disable menu is selected.", event.currentTarget.caption);
                    break;
                case menu3:
                    Alert.show("Visible/Invisible menu is selected.", event.currentTarget.caption);
                    break;
            }
        }
        
        // Handler when context menu is opened by right click.
        private function menuSelectHandler(event:ContextMenuEvent):void {
        	
        }
        
        
   
    ]]>

</mx:Script>

	<mx:VBox horizontalCenter="0" paddingTop="40" paddingLeft="50">
        ... 
	</mx:VBox>
		    
</mx:Application>


Small piece of code.



You can download the example source code here.

Download the example code.





blog comments powered by Disqus