Customizing Right Click Menu of Flex Applications

Right clicking on Flex Applications displays a menu: the Flex Context Menu.

Learn how to customize Flex Context Menus to:

• add your own entries,
• assign different menus to different elements of your application,
• workaround some of the Flex Context Menu limitations.

If you prefer, check the sample application with source code enabled that illustrates all the points discussed here .

• Flex Context Menu principles
• Flex Context Menu structure
• Flex Context Menu customization
• Flex Customized Context Menu application with source code

Flex Context Menu principles

There are three types of Flex Context Menus: the standard menu, the edit menu and the error menu.

The Flex standard Context Menu is displayed when right clicking on Flex elements¹. It contains several menu items provided by the Flash Player or by the application developer.

The Flex Edit Context Menu is displayed when right clicking a selectable or editable text field. It contains additional specific clipboards menu items such as Cut/Copy/Paste.

The Flex Error Context Menu is displayed when a SWF file has failed to load into the Flash Player.

Both standard and edit menus can be customized, the error one cannot be changed in any way.

All InteractiveObject (such as Application, Panel, TextField, Button, …) contain a contextMenu property holding a reference to the contextual menu associated with the element².

By default, the contextMenu property is often null. In such cases, when right clicking on the component, the context menu will be retrieved using the display list hierarchy, up to the Application object if no customized context menu has been defined. Indeed, the contextMenu property of the Application object is initialized by the Flex framework.

Defining a customized Flex Context Menu for a given element just means creating an instance of ContextMenu and assigning it to the contextMenu property of the element.

Flex Context Menu structure

The default Flex Context Menu contains several entries grouped by categories. The displayed categories depend on several factors such as: running with Flash debugger version, source code enabled option, standard or edit version of the menu, …

Let’s take a quick glance at these categories:

• View Source menu entry
• Customized menu entries
• Flash Player optional menu entries
• Debugging menu entries
• Flash Player menu entries

View Source menu entry

If the Flex application has been published with source code enabled, the first default category contains one single menu item, “View Source”, allowing to… view the Application source code.

This category will always be the first category of the Flex Context Menu when available.

Customized menu entries

The second category contains all customized entries added by developers as explained in Flex Context Menu customization section.

Flash Player optional menu entries

The next category contains flash player optional entries such as Print, Zoom, Play, Loop, Quality settings, etc. The complete list of items displayed in this category depends on factors such as Single Frame SWF or not, Macromedia shockmachine availability as described in the ContextMenu documentation on Adobe LiveDoc.

We’ll see in Flex default menu entries customization section how to customize the default entries.

Debugging menu entries

This category is visible only when running the Flash Debug Player. It contains the two options Show Redraw regions and Debugger.

This category can not be customized or hidden.

Flash Player menu entries

This last category contains the Settings and About Flash Player entries that can not be customized or hidden.

Flex Context Menu customization

Flex default menu entries customization

The Flash Player optional menu entries can be customized in two different ways.

You can remove all of them:

// Hide all Flash Player optional menu entries (as Print, Play, Zoom, ...).
// The Settings/About menu entries can not be hidden.
contextMenu.hideBuiltInItems();

Or you can remove only specific entries:

// Hide the Print menu entry (keeping the other Play, Zoom, ... entries).
contextMenu.builtInItems.print=false;

Adding customized menu entries to Flex Context Menu

Creating customized menu entries

Adding your own custom menu entries to the Flex Context Menu just consists in creating ContextMenuItem objects and adding them to the ContextMenu.customItems array:

// Instantiate a ContextMenuItem
var customItem:ContextMenuItem = new ContextMenuItem("Custom menu entry");

// Add it in the customItems array of the context menu
contextMenu.customItems.push(customItem);

Note: When creating ContextMenuItem, you can define the text displayed in the menu (caption), whether a separator line must appear before the entry (separatorBefore), whether the menu entry is enabled or disable (enabled) and whether it is visible or not (visible).

Managing customized menu entry events

Add event listeners to your custom menu entries to handle user selection of the menu items:

var customItem:ContextMenuItem = new ContextMenuItem("Custom menu entry");
contextMenu.customItems.push(customItem);
customItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);

function menuItemHandler(event:ContextMenuEvent) : void{
	Alert.show("You clicked on menu entry " + event.currentTarget.caption);
}

Dynamically managing customized menu entries

If you want to dynamically manage visibility or enablement of particular customized menu entries, listen to MENU_SELECT events and implement your visibility or enablement logic in the associated handler:

contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT, menuHandler);

// Implement enablement or visibility logic
function menuHandler(event:ContextMenuEvent) : void {
	// Toggle visibility of the customItem each time the menu is accessed.
	customItem.visible = !customItem.visible;
}

Customized context menu limitations

There are a lot of limitations to be aware of when customizing Flex Context Menu. These restrictions are described in the ContextMenuItem documentation.

The major ones are:

• No more than 15 customized menu entries can be defined,
• Length of a menu entry caption is limited to 100 characters,
• Sub menus are not allowed,
• Reserved keywords cannot be used as captions (Save, Copy, Paste, …)

Concerning the last restriction (reserved keywords), there is a possible workaround consisting in adding a special space character (unicode \u00A0) at the end of the reserved keyword.

To add a Copy menu entry, for example, do:

// To create a custom entry using one of the reserved keywords, add a special
// space character (\u00A0) at the end of the caption
customCopyItem = new ContextMenuItem("Copy\u00A0");

Flex Customized Context Menu application

To conclude, here is a simple Flex application illustrating all points discussed in this article. Three customized sections are added to the Context Menu. Some of the customized menu items are enabled/disabled or made visible/invisible each time you open the context menu.

The source code of the application is available by choosing “View Source” from the context menu.