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

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>

---

Possibly related posts: (automatically generated)

• Assign a menu item(on right click menu list) to DataGrid control in Flex.