uiMenuBar

uiMenuBar

Required: Aspire UI Components Standard Edition

The uiMenuBar control is used to display a horizontal, top-level menu bar that contains one or more menu items. Clicking on a top-level menu item opens a popup menu that is an instance of the uiMenu control.

When using uiWindow containers, you do not need to instantiate uiMenuBar controls manually - if the uiWindow instance has its menuModel property defined, it will display a menu bar automatically¹⁾.

Using uiMenuBar

ActionScript 3.0 Example

import com.ghostwire.ui.containers.*;
import com.ghostwire.ui.controls.*;
import com.ghostwire.ui.data.*;
import com.ghostwire.ui.enums.*;
import com.ghostwire.ui.events.*;
import com.ghostwire.ui.managers.*;
 
var menuXML:XML =
<menu>
    <item label="File" >
        <item label="New..." />
        <item label="Open..." />
        <item label="Open Recent" >
            <item label="Document 1" />
            <item label="Document 2" />
            <item label="Document 3" />
        </item>
        <!-- comment: empty item denotes a separator -->
        <item />
        <item label="Save" enabled="false" />
        <item />
        <item label="Exit" />
    </item>
    <item label="Edit" >
        <item label="Undo" />
        <item label="Redo" enabled="false" />
        <item />
        <item label="Cut" enabled="false" />
        <item label="Copy" enabled="false" />
        <item label="Paste" enabled="false" />
    </item>
    <item label="View" >
        <!-- comment: check items -->
        <item label="Line Numbers" checked="true" />
        <item label="Word Wrap" checked="false" />
        <item />
        <item label="Language" >
            <!-- comment: a group of radio items -->
            <item label="English" group="Lang" checked="true" />
            <item label="French" group="Lang" />
            <item label="Japanese" group="Lang" />
        </item>
    </item>
    <item label="Help" >
        <item label="About..." />
    </item>
</menu>
 
var menuModel:uiModel = new uiModel(menuXML);
 
var myMenuBar:uiMenuBar = new uiMenuBar();
myMenuBar.model = menuModel;
myMenuBar.width = stage.stageWidth;
myMenuBar.addEventListener(uiMenuEvent.MENU_SELECT,on_menuSelect,false,0,true);
addChild(myMenuBar);
 
var feedbackText:uiText = new uiText();
feedbackText.move(0,30);
addChild(feedbackText);
 
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:

Menu Items

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:

Attribute	Type	Description
checked	Boolean	Applicable only for check and radio items. Specifies whether a check or radio item is selected. If the checked property is defined, but the group property is undefined, the item is treated as a check item.
enabled	Boolean	Specifies whether the user can select the menu item (true), or not (false). If not specified, a default value of true is used.
group	String	If defined, the item is treated as a radio item. If undefined, the item is a normal menu item.
icon	String	Specifies the source of an image asset to display in the menu item (will be displayed to the left of the text label). This property is ignored for check and radio items.
id	String	Optional. If defined, the data object can be accessed via the getItemById() method of the model. This property should be unique (no two item should use the same identifier). This is useful in case you need to access deeply nested items in your application code.
label	String	Specifies the text to display in the menu item.

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).

API Reference

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

¹⁾ The menu bar contained within a uiWindow container is placed below the window title bar, above the window content.