Question

New with Flex and mxml. How I can bind AS3 class’ function to a menubar item? My menubar code is this:

<mx:MenuBar id="myMenubar" labelField="@label">
    <fx:XMLList xmlns="">
        <item label="File">
            <item label="New" />
            <item label="Open"/>
            <item label="Save"/>
            <item label="Save As"/>
            <item label="Quit"/>
        </item>

        <item label="Edit">
            <item label="Undo"/>
            <item label="Redo"/>
            <item label="Preferences"/>
        </item>

        <item label="Level">
            <item label="New Room"/>
            <item label="Properties"/>
        </item>

        <item label="Objects">
            <item label="Clickable"/>
            <item label="Character"/>
            <item label="Door"/>
            <item label="Treasure"/>
        </item>
    </fx:XMLList>
</mx:MenuBar>

I looked through few examples in Google but couldn’t find definite explanation or example how to trigger AS3 class functions. I presume that I should somehow make click event listener for my subitems and make a call to my class. However, mxml syntax confuses me.

Answer 1

MXML is just a way to describe data and components declaratively, in the end it’s compiled to pure ActionScript anyways, so you can simply subscribe an appropriate listener to myMenubar.

I think you are looking for the itemClick event:

myMenubar.addEventListener(MenuEvent.ITEM_CLICK, function(e:MenuEvent):void
{
    trace(e.label + ' was clicked');
});

In order to be able to distinguish the items while being able to change the lablels, i’d recommend to assign IDs to them:

<mx:MenuBar id="myMenubar" labelField="@label">
    <fx:XMLList xmlns="">
        <item label="File">
            <item id="abc" label="New" />
            <item id="xyz" label="Open"/>
            ...

Then you could for example use a simple switch to handle the different items:

myMenubar.addEventListener(MenuEvent.ITEM_CLICK, function(e:MenuEvent):void
{
    switch(e.item.@id)
    {
        case 'abc':
            // do something
            break;

        case 'xyz':
            // do something else
            break;
    }
});

Ofcourse you could also define which function to call using MXML:

<mx:MenuBar id="myMenubar" labelField="@label" itemClick="myMenuItemClickHandler(event)">

–

private function myMenuItemClickHandler(e:MenuEvent)
{
    ...
}

See also the example in the Adobe LiveDocs to get a grasp on how this all comes together:

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo MenuBar control. -->
<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"
        initialize="initCollections();">

    <fx:Script>
        <![CDATA[
            import mx.collections.*;
            import mx.controls.Alert;
            import mx.events.MenuEvent;

            [Bindable]
            public var menuBarCollection:XMLListCollection;

            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1" data="top">
                        <menuitem label="MenuItem 1-A" data="1A"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2" data="top">
                        <menuitem label="MenuItem 2-A" type="check" data="2A"/>
                        <menuitem type="separator"/>
                        <menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 3-A" type="radio"
                                groupName="one" data="3A"/>
                            <menuitem label="SubMenuItem 3-B" type="radio"
                                groupName="one" data="3B"/>
                        </menuitem>
                    </menuitem>
                </>;

            // Event handler to initialize the MenuBar control.
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }

            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(evt:MenuEvent):void  {
                // Don't open the Alert for a menu bar item that 
                // opens a popup submenu.
                if (evt.item.@data != "top") {
                    Alert.show("Label: " + evt.item.@label + "\n" + 
                        "Data: " + evt.item.@data, "Clicked menu item");
                }
            }
         ]]>
    </fx:Script>

    <s:Panel title="Halo MenuBar Control Example"
            width="75%" height="75%"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label width="100%" color="blue" text="Select a menu item."/>

            <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
                    dataProvider="{menuBarCollection}" />
        </s:VGroup>
    </s:Panel>

</s:Application>