Menu

Menu is a composite control of submenu panels that displays developer-defined options.

Usage

The following example creates a Menu specifying the model for the "More" menu item if necessary in creation of option panels:

[Embed(source="/assets/more_icon.png")]
public var moreIconClass:Class;
...
var menu:Menu = Menu.initWithDelegates( this, this );
menu.width = 240;
menu.moreMenuItem = new MenuItem( "More", new moreIconClass() as Bitmap );
menu.dataProvider = getMenuItems( 10 );
...
protected function getMenuItems( amount:int ):Vector.<MenuItem>
{
    var menuItems:Vector.<MenuItem> = new Vector.<MenuItem>();
    var i:int;
    for( i = 0; i < amount; i++ )
    {
        menuItems.push( new MenuItem( "item " + i ) );
    }
    return menuItems;
}

To show the menu, invoke Menu:show() with a target display and the base origin for the menu. In the following the menu is attached to the parenting display and shown originally at top-left origin at 0x and 480y, then transitioned upward based on its internal height:

menu.show( this, new Point( 0, 480 ) );

To close the menu, Invoke Menu:close():

menu.close();

You can also go back in history within the menu using the Menu:back() method. If the history has reached its end, back() is considered a close operation:

menu.back();

Display Context

The construction of a menu and it submenu panel displays is based on MenuPanelDisplayContext objects. A MenuPanelDisplayContext is used to render the main menu subpanel (the one first seen when opened) and another MenuPanelDisplayContext is used to render the subsequent submenu panels (if available, based on supplied data and maximum display amount).

The MenuPanelDisplayContext is, generally, a display model and a manager of object pools for re-usable instances. The API for MenuPanelDisplayContext shows that it exposes properties that relate to a MenuPanelDisplay. The properties are the fully-qualified classname String of the corresponding instance to create and use:

+ menuPanelType:String
+ layoutType:String
+ skinType:String
+ itemRendererType:String
+ itemRendererSkinType:String

Internally, by default, Menu creates and uses two different MenuPanelDisplayContext objects to render its main and submenu panel(s). However, these can be modified by supplying custom MenuPanelDisplayContexts to the Menu:mainMenuPanelDisplayContext and Menu:submenuPanelDisplayContext properties:

var menu:Menu = Menu.initWithDelegates( this, this );

var mainContext:MenuPanelDisplayContext = new MenuPanelDisplayContext( getQualifiedClassName( MyCustomMainPanel ) );
mainContext.layoutType = getQualifiedClassName( MyCustomMainLayout );

var submenuContext:MenuPanelDisplayContext = new MenuPanelDisplayContext( getQualifiedClassName( MyCustomSubmenuPanel ) );
submenuContext.skinType = getQualifiedClassName( MyCustomSubmenuSkin );
submenuContext.itemRendererType = getQualifiedClassName( MyCustomSubmenuItemRenderer );

menu.mainMenuPanelDisplayContext = mainContext;
menu.submenuPanelDisplayContext = submenuContext;

The role of MenuPanelDisplayContext is to manage the creation and pooling of MenuPanelDisplay instances based on its properties. In essence, when the dataProvider of the Menu is changed, the context is invoked to access instances of panel displays to show. Keeping re-usability and object recycling in mind, the MenuPanelDisplayContext re-uses previously instantiated instances of panel displays and allows for the use of a single Menu component throughout an application whose dataProvider is updated based on the context.

Though model roughly on the options menu from the Android SDK, Menu is extensible enough to change the look-and-feel as well as behaviour to suit your needs.

Demo: http://www.custardbelly.com/android/froyo/as3flobile/menu/