Posts Tagged ‘CustomMenu’

Flex: Creating a custom context menu item for an application

Wednesday, February 13th, 2008

Here is a little piece of code I would like to share with all my fellow Flex Geeks out there. This code explains how to create a custom context menu item for an app. If you have any questions, please feel free to ask. There are other similar flex resources at http://blog.flexexamples.com.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.mygeeklife.net/creating-a-custom-context-menu-for-an-application/ –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
creationComplete=”contextMenuItems();”
backgroundGradientColors=”[#ffffff, #a9b4d8]”>

<mx:Script>
<![CDATA[

// Declare a bindable private variable

[Bindable]
private var cm:ContextMenu;

// This function initializes a new Context Menu

private function contextMenuItems():void {

// Declare ContextMenuItem variable

var myGeekLifeLink:ContextMenuItem = new ContextMenuItem(”MyGeekLife”);

// Add event listener which calls the myGeekLifeLink_menuItemSelect function declared below

myGeekLifeLink.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, myGeekLifeLink_menuItemSelect);

// Create new context menu

cm = new ContextMenu();

// Hide default context menu items

cm.hideBuiltInItems();

// Add link

cm.customItems.push(myGeekLifeLink);

// Apply context menu to application

application.contextMenu = cm;
}

// Navigates to new url when link is clicked

private function myGeekLifeLink_menuItemSelect(evt:ContextMenuEvent):void {
navigateToURL(new URLRequest(’http://www.mygeeklife.net/’));
}

]]>
</mx:Script>

<mx:VBox width=”100%” height=”100%” horizontalAlign=”center” verticalAlign=”middle”>
<mx:Panel width=”250″ height=”200″ title=”Example App”>
<mx:Text text=”Right click anywhere on the application to initialize the Context Menu. Click on MyGeekLife to be taken to the URL. ” width=”229″ height=”160″ fontFamily=”Arial” fontSize=”17″ color=”#000000″/>
</mx:Panel>
</mx:VBox>

</mx:Application>