Binding AS3 class functions to Flex menubar - apache-flex

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>