ContextMenu in Adobe Flex (or, the right-click menu)

17 01 2008

Well, another wonder of Adobe is trying to modify the members of the right-click menu.

This is known as the ContextMenu. The example below is a modification from the Adobe Help files. It is interesting to note that

  1. You cannot just add the Sprite object directly to the Application; you must contain it within a Component; and
  2. If you do not do the hideBuiltInItems() call, then the Flash menu comes up on right click, instead of the Flex menu. (ie. you see Play, Loop, Quality, etc, rather than Settings, Debugger, etc).

Note that the Panel – myPanel – isn’t required. You can just add the newComponent to the Application via a sole addChild() call.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
initialize=”init(event)” xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute>
<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.core.UIComponent;

private var square:Sprite = new Sprite();

public function init(event:Event):void
{

square.graphics.beginFill(0x000000);
square.graphics.drawRect(0,0,100,100);

square.graphics.endFill();

var newComponent:UIComponent = new UIComponent();

//must set the UI component to wrap the sprite - so set width and height
newComponent.width = 100;

newComponent.height = 100;

newComponent.addChild(square);
myPanel.addChild(newComponent);

var menuItem:ContextMenuItem = new ContextMenuItem("Change Color");
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,changeColor);

var customContextMenu:ContextMenu = new ContextMenu();

//hide the Flash menu
customContextMenu.hideBuiltInItems();

customContextMenu.customItems.push(menuItem);

square.contextMenu = customContextMenu;

}

public function changeColor(event:ContextMenuEvent):void
{square.transform.colorTransform = getRandomColor();
}

public function getRandomColor():ColorTransform
{
return new ColorTransform(Math.random(), Math.random(), Math.random(),1,(Math.random() * 512) - 255, (Math.random() * 512) -255, (Math.random() * 512) - 255, 0);}

]]>

</mx:Script>

<mx:Panel id=”myPanel></mx:Panel>

</mx:Application>

About these ads

Actions

Information

5 responses

27 01 2008
Dom

Awesome! I’ve been trying to figure this out for a while.

Thanks.

3 10 2008
Lisa Pappas

Have you experimented with extending the popup so that it can be posted via keyboard only (for accessibility compliance)?

3 10 2008
Justin J. Moses

Lisa,

Do you mean opening up and navigating the context menu via the keyboard alone?

I’ll assume you did. I’ve been having a look but honestly can’t see how to manually dispatch an event to open the context menu. Unfortunately the “MouseEvent.RIGHT_CLICK” event type is only available via AIR.

I’m suspicious there must be a way deeper inside the flash.display.InteractiveObject class, as that is where the event originates…. I’ll keep looking.

justin

25 12 2009
Tahir Alvi

Nice,
but i want to know that if we add context menue for more then one component in air application from parent application?

28 10 2010
Aditya

very nice Posts thank You

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

%d bloggers like this: