uiMenu

Required: Aspire UI Components Standard Edition

The uiMenu control creates a popup menu of individually selectable choices, similar to the File or Edit menu found in most software applications. The popup menu can have as many levels of submenus as needed.

Typically, you would not instantiate popup menus using this class directly; you would use the uiMenuBar control instead. There may be times however where it would be useful to create a popup menu using a specific context, eg. listening to a button click and using the uiMenu.popup() method to show a popup menu below the button.

import com.ghostwire.ui.controls.*;
import com.ghostwire.ui.data.*;
import com.ghostwire.ui.containers.*;
import com.ghostwire.ui.enums.*;
import com.ghostwire.ui.managers.*;
import com.ghostwire.ui.events.*;
 
var btn:uiLabelButton = new uiLabelButton("Help");
btn.addEventListener(MouseEvent.CLICK,on_btnClick);
addChild(btn);
 
var feedbackText:uiText = new uiText();
feedbackText.move(0,30);
addChild(feedbackText);
 
var popMenuXML:XML =
<menu>
    <item label="ItemA" />
    <item label="ItemB" enabled="false" />
    <item label="ItemC" >
        <!-- a group of radio items -->
        <item label="ItemCSubMenuItemA" group="RadioGroup1" />
        <item label="ItemCSubMenuItemB" group="RadioGroup1" />
        <item label="ItemCSubMenuItemC" group="RadioGroup1" checked="true" />
    </item>
    <!-- an empty item denotes a separator -->
    <item />
    <!-- a check item -->
    <item label="ItemD" checked="true" />
    <item />
    <item label="ItemE" checked="false" />
</menu>
 
var popMenuModel:uiModel = new uiModel(popMenuXML);
 
function on_btnClick(evt:Event):void
{
    var menu:uiMenu = uiMenu.popup(popMenuModel,btn);
    menu.addEventListener(uiMenuEvent.MENU_SELECT,on_menuSelect,false,0,true);
}
 
function on_menuSelect(evt:uiMenuEvent):void
{
    feedbackText.text = "Label: "+evt.item.label+" has been selected";
    feedbackText.text += "\ngroup property value: "+evt.item.group;
    feedbackText.text += "\nchecked property value: "+evt.item.checked;
 
}

Using the “classic” skin:

Each menu item can specify several attributes that determine how the item is displayed and behave. The following table lists the attributes you can specify:

Notice that a type attribute is absent and unnecessary since the following rules apply:

• all menu items are created as normal menu items by default;
• if an item has the checked property defined, it is created as a check item;
• if an item has the group property defined, it is created as a radio item;
• if an item is empty or does not define the label property, it is created as a separator.

Where an item has child nodes (submenu items), the data object created from the parsing of the XML will also contain a child property indicating an Array of the child menu items. An item with submenu items is non-selectable (clicking on it does not dispatch a uiMenuEvent.SELECT event).

When a uiMenu control is shown, the user can use the following keys to interact with the control:

• uiMenu: Implementing “long press” contextual menu

For more information on the members of the com.ghostwire.ui.controls.uiMenu class, please refer to the API Reference.