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. For more information on hierarchical
data providers, see Hierarchical data objects.
In a simple case for creating a MenuBar control, you might use
an <fx:XML> or <fx: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 <fx: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 <fx: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’s 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 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<!-- 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">
<fx: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>
</fx:XMLList>
</mx:MenuBar>
</s:Application>The executing SWF file for the previous example is shown below:
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.
