Menus in Flex with ActionScript

The Menu control creates pop-up menus of individually selectable choices, that can have cascading sub-menus. (Similar to the application menus (e.g. File, Edit) or right-click menus in most application.)

Menu Flex Example

After a Menu control has opened, it remains visible until it is closed by any of the following actions:

A call to the Menu.hide() method.
When a user selects an enabled menu item.
When a user clicks outside of the Menu control.
When a user selects another component in the application.

The Menu class has no corresponding MXML tag. You must create it using ActionScript.

Basic Menu Concepts

Creating a Menu

A Menu is created with a call to the Menu class static createMenu() function. Of course you'll have to pass some data representing the menu items and structure to the createMenu() call.

   // create the menu data structure
   var menuData:Array = [ "Item 1", "Item 2", "Item 3" ];
   
   // create the menu
   var menu:Menu = Menu.createMenu( parent, menuData, false );
   
   // show the menu
   menu.show();

Menu.createMenu() arguments:

parent - container that the PopUpManager uses to place the Menu control in
menuData - the data provider for the Menu control
showRoot - boolean flag that specifies whether to display the root node of the data provider

Showing a Menu

Showing a menu is easy; just call it's show() method.

   // show the menu
   menu.show();

Usually though we'll want to show a menu at a specific location. For instance, the below snippet will position and show the menu at a point where a mouse click occurred.

Snippet: Positioning a Menu based on where a mouse-click occurred... (This is a great function for a MenuHelper class...)

   protected function showMenu( menu:Menu, mouseEvent:MouseEvent ):void
   {
      // get the menu parent from the mouse event
      var parent:DisplayObjectContainer = 
         DisplayObjectContainer( mouseEvent.currentTarget );
      
      // position menu relative to the parent
      var point:Point = new Point( mouseEvent.localX, mouseEvent.localY );
      point = parent.localToGlobal( point );
      
      // show the menu
      menu.show( point.x, point.y );
   }

Responding to Menu Click Events

Responding to Menu clicks takes two steps:

Register an event listener with the menu
Provide a function to handle the click menu event

   // register menu click handler
   menu.addEventListener( MenuEvent.ITEM_CLICK, handleMenuClick );

   protected function handleMenuClick( menuEvent:MenuEvent ):void
   {
      Alert.show( "Menu Item Clicked: "+menuEvent.item, "Menu Click" );
   }

Advanced Menu Concepts

The data provider for a menu may be of several forms:

An Array of Strings (seen in examples above)
An Object tree
An XML/E4X object

Object Based Menu data

Snippet: Create a Flex menu using an Object tree as the menu data...

   // create menu items (using ActionScript shorthand for objects and arrays)
   var fruits:Object = { label: "Fruits", children: [ "Apple", "Orange", "Banana" ] };
   var colors:Object = { label: "Colors", children: [ "Red", "Blue", "Green" ] };
   var separator:Object = { type: "separator" };
   
   // creat the root menu structure
   var menuData:Object = { children: [ fruits, separator, colors ] };
      
   // create menu
   var menu:Menu = Menu.createMenu( parent, menuData, false );

XML Based Menu data

Snippet: Creating a Flex Menu using XML as the menu data...

   // construct the menu data from XML
   var menuData:XML = 
      <root>
         <item label="Fruits">
            <item label="Apple" />
            <item label="Orange" />
            <item label="Banana" />
            <item label="Kiwi" enabled="false" />
         </item>
         <item type="separator" />
         <item label="Colors">
            <item label="Red" />
            <item label="Blue" />
            <item label="Green" />
            <item label="Black" enabled="false" />
         </item>
      </root>
      
      // create menu
      var menu:Menu = Menu.createMenu( parent, menuData, false );
      // set the menu's label field to use the XML item's label attribute
      menu.labelField = "@label";

The result of the code is a menu with a separator and some items disabled.