Chapter 11: Using Menu-Based Controls--MenuBar control

A MenuBar control displays the top level of a menu as a horizontal bar of menu items, where each item on the bar
can pop up a submenu. The MenuBar control interprets the data provider in the same way as the Menu control,
and supports the same events as the Menu control. Unlike the Menu control, a MenuBar control is static; that is,
it does not function as a pop-up menu, but is always visible in your application. Because the MenuBar is static,
you can define it directly in MXML.
For complete reference information, see the Adobe Flex Language Reference. For more information on the Menu
control, see Menu control events– on page 3.

 

About the MenuBar control
The following example shows a MenuBar control:

 

The control shows the labels of the top level of the data provider menu. When a user selects a top-level menu item,

the MenuBar control opens a submenu. The submenu stays open until the user selects another top-level menu
item, selects a submenu item, or clicks outside the MenuBar area.

Creating a MenuBar control
You define a MenuBar control in MXML by using the <mx:MenuBar> tag. Specify an id value if you intend to refer
to a component elsewhere in your MXML application, either in another tag or in an ActionScript block.
You specify the data for the MenuBar control by using the dataProvider property. The MenuBar control uses
the same types of data providers as does the Menu control. For more information on data providers for Menu and
MenuBar controls, see Defining menu structure and data– on page 3. For more information on hierarchical
data providers, see Hierarchical data objects– on page 1.
In a simple case for creating a MenuBar control, you might use an
<mx:XML> or <mx:XMLList> tag and standard
XML node syntax to define the menu data provider. When you used an XML-based data provider, you must keep
the following rules in mind: With the <mx:XML> tag you must have a single root node, and you set the showRoot property of the MenuBar
control to
false. (otherwise, your MenuBar would have only the root as a button). With the <mx:XMLList> tag
you define a list of XML nodes, and the top level nodes define the bar buttons. If your data provider has a label attribute (even if it is called label–), you must set the MenuBar control
labelField property and use the E4X @ notation for the label; for example:
labelField=!±@label
The dataProvider property is the default property of the MenuBar control, so you can define the XML or
XMLList object as a direct child of the
<mx:MenuBar> tag, as the following example shows:

 

 

 

<?xml version="1.0"?><!-- menus/MenuBarControl.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" > <!-- Define the menu; dataProvider is the default MenuBar property. Because this uses an XML data provider, specify the labelField and showRoot properties. --> <mx:MenuBar id="myMenuBar" labelField="@label"> <mx:XMLList> <menuitem label="MenuItem A"> <menuitem label="SubMenuItem A-1" enabled="false"/> <menuitem label="SubMenuItem A-2"/> </menuitem> <menuitem label="MenuItem B"/> <menuitem label="MenuItem C"/> <menuitem label="MenuItem D"> <menuitem label="SubMenuItem D-1" type="radio" groupName="one"/> <menuitem label="SubMenuItem D-2" type="radio" groupName="one" selected="true"/> <menuitem label="SubMenuItem D-3" type="radio" groupName="one"/> </menuitem> </mx:XMLList> </mx:MenuBar></mx:Application>

The top-level nodes in the MenuBar control correspond to the buttons on the bar. Therefore, in this example, the
MenuBar control displays the four labels shown in the preceding image.
You can assign any name to node tags in the XML data. In the previous example, each node is named with the
generic
<menuitem> tag, but you can use <node>, <subNode>, <person>, <address>, and so on. Several
attributes or fields, such as the
type attribute, have meaning to the MenuBar control. For information on how Flex
interprets and uses the data provider data, see Specifying and using menu entry information– on page 3.

MenuBar control user interaction
The user interaction of the MenuBar is the same as for the Menu control, with the following difference: when the
MenuBar control has the focus, the left arrow opens the previous menu. If the current menu bar item has a closed
pop-up menu, the right arrow opens the current menu; if the pop-up menu is open, the right arrow opens the next
menu. (The behavior wraps around the ends of the MenuBar control.)
For more information, see Menu control user interaction– on page 3.