FlexContextMenu

Overview

ContextMenu that can be applied across an application or to specific instances of UIComponents.

Flex SDK ContextMenu Limitations

The Flex SDK ContextMenu class has some limitations. No nested menus, no icons, max 15 items, 100 chars or less, and many reserved words. The FlexContextMenu component solves those problems and makes customization much easier, including extra flexibility regarding implementation.

Creating the FlexContextMenu

Declare in Actionscript, inline within the "flexContextmenu" property of UIComponent subclasses, or in the <fx:declarations> tag of the MXML document.

Using the FlexContextMenu

There are 3 ways to attach a FlexContextMenu to a visual element:

• Call flexContextMenu.setContextMenu(visualElement).
• Pass a reference to the FlexContextMenu to the target control's "flexContextMenu" property.
• Create the FlexContextMenu inline via MXML.

Data Binding

<sampleApp:FlexContextMenu id="cm" />

<s:BorderContainer id="bc" flexContextMenu={cm} />

MXML

<s:Button label="Right Click - Applied Inline'">
	<s:flexContextMenu>
		<flexContextMenu:FlexContextMenu>
			<flexContextMenu:dataProvider>
				<s:ArrayCollection>
					<fx:Object label="Inline ContextMenu"/>
				</s:ArrayCollection>
			</flexContextMenu:dataProvider>
		</flexContextMenu:FlexContextMenu>
	</s:flexContextMenu>
</s:Button>

Actionscript

var cm:FlexContextMenu = new FlexContextMenu();
var bc:BorderContainer = new BorderContainer();
cm.setContextMenu(bs);

All 3 blocks above above accomplish the same thing.

UIComponent's "flexContextMenu " Property

Thanks to the flexContextMenu property present on all UIComponents, it is very easy to set this control as the context menu for controls that extend UIComponent.

Ardisia Menu

This component extends the Ardisia Menu class. See the docs for the Menu class for instructions on populating and customizing an Ardisia Menu.

By default, the FlexContextMenu and sub-menus are a minimum of 190 pixels wide.

ItemRenderer

The default itemRenderer, FlexContextMenuItemRenderer, extends MenuItemRenderer to make customization easier. Can be changed via styling.

Event Listeners and Removal From the Display List

By default, once a component has a FlexContextMenu set, if the component is removed from the stage the context menu links are also severed. In other words, if a component is removed from the stage and added back to the stage, context menus must be re-added. This is to facilitate garbage collection.

Compatibility and Support

This control only works for users who have Flash player 11.2+ (supports right click). Note, Flex 4.6 requires Flash player version 11.1.

Right click will not work without a few steps before compiling:

Make sure you are compiling with at least playerGlobal.swc 11.1+ and make sure that the swf version is at least 15.

Add the following flag to the compiler to enforce version 15.

-swf-version=15

Selected Custom Styles

itemRenderer
default ardisia.components.flexContextMenu.themes.spark.itemRenderers.FlexContextMenuItemRenderer
The itemRenderer to use with the control.

Example

See the FlexContextMenu demo application for example code.

Back To Top