Adobe AIR nested(submenu) menu items for context menu

Adobe AIR nested(submenu) menu items for context menu

February 21st, 2010

Filed under: AIR — Alex Bylim @ 2:41 am

Hi, yesterday I was looking for fast answer on question “Can I have sub-menu for context menu in my adobe AIR application ?” Could not fast quick answer on 1st google page, with code example or explanation. It’s can be confusing cause actually Flex Web-based application can not implement context sub-menu, but in AIR application you can and it’s very simple! So I hope this post will be displayed on google 1st page when somebody will type similar question above.

So how to make it ?

First we need create our context menu:

var myContextMenu:ContextMenu = new ContextMenu();

Make our application use this contex menu:

this.contextMenu = myContextMenu;

Then we need to add some menu items for it:

var menuItem1:ContextMenuItem = new ContextMenuItem('Menu 1');
var menuItem2:ContextMenuItem = new ContextMenuItem('Menu 12);

Now will assign this items to our context menu:

// we should assign array of items to customItems property of the context menu
myContextMenu.customItems = [menuItem1, menuItem2 ];

For now you’ll see context menu consists from two items on right click. Now we will add nested sub-menu.

Again we need to create context menu with items:

var subMenuItem1:ContextMenuItem = new ContextMenuItem('Sub-Menu 1');
var myContextSubMenu:ContextMenu = new ContextMenu();
myContextSubMenu.customItems = [subMenuItem1];

And now magic line that will assign our context sub-menu to one of main context-menu items:

menuItem1.submenu = myContextSubMenu;

So all about this property submenu that enable for AIR but not for Flex.

Btw to run some action when click for some menu item you can use code below:

subMenuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemClick);
 
private function menuItemClick(event:Event):void{
    Alert.show('TADA');
}

You can download simple source code.

Read Comments (4)

http://www.intelisea.com Phil Heinz

Hi, thanks for the great example! I couldn’t get the submenu to work as a ContextMenu so I looked up ContextMenuItem.submenu. I found that a submenu of a ContextMenuItem should be a NativeMenu. Once I changed this it works great. The only problem is that with ContextMenu you have contextMenuOwner so you can tell what component you right-clicked on to get the menu. With NativeMenuItem, the simple Event.SELECT that it generates does not seem to give me what component was right clicked. This is a bummer Anyway – for what it’s worth. Thanks again, Phil.
flexlearner

Hi,
In web application using ExternalInterface.addcallBack it is possible to remove default menu items. BUt in case of the AIR application it does not work.
I want to remove the richtexteditor’s default menuitem(cut,copy,paste,select all) in AIR, please help.
Alex Bylim

Hello flexlearner, i can give you quick tip about how to find out things in flex, you always can check source code of Flex framework (that can be found int Flex SDK folder), and get answers to all your questions
Tahir Alvi

great post!

I have wandering here and there for search how add sub menu item in AIR but no solution is catch, Thanks a lot for this post and sharing for code.

Tahir Alvi

Flex Software Engineer
Islamabad -Pakistan