Flex Examples
The following example shows how you can detect a click on the MX MenuBar control in Flex by using the menuBarItems array and adding an event listener for the click event to a specific MenuBarItem.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/19/listening-for-a-click-on-the-mx-menubar-control-in-flex/ --> <s:Application name="MenuBar_menuBarItems_addEventListener_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.menuClasses.MenuBarItem; protected function init():void { var mbi:MenuBarItem = mBar.menuBarItems[2] as MenuBarItem; mbi.addEventListener(MouseEvent.CLICK, mbi2_click); } protected function mbi2_click(evt:MouseEvent):void { Alert.show("You clicked the third menu bar item."); } ]]> </fx:Script> <mx:MenuBar id="mBar" labelField="@label" horizontalCenter="0" top="20" creationComplete="init();"> <mx:dataProvider> <s:XMLListCollection> <fx:XMLList xmlns=""> <menu label="File..."> <item label="New" /> <item label="Open" /> <item label="Save" /> <item label="Save As" /> <fake type="separator" /> <item label="Exit" /> </menu> <menu label="Edit..."> <item label="Cut" /> <item label="Copy" /> <item label="Paste" /> <fake type="separator" /> <item label="Undo" /> <item label="Redo" /> <fake type="separator" /> <item label="radio button" type="radio" toggled="true" /> <item label="check box" type="check" toggled="true" /> </menu> <menu label="Help" /> </fx:XMLList> </s:XMLListCollection> </mx:dataProvider> </mx:MenuBar> </s:Application>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
<![CDATA[
public function initializeHtmlText():void
{
this.htmlText = "" + this.text + "";
}
]]>
I had a question related to the menubar control but didn’t see a better post to ask it in. I have a menubar with an xmllist data provider. I was wondering if it was possible to have all the items for multiple submenus to be in the same radiobutton group. I tried simply giving them all the same group name but when I select one, it only deselects other items in that single submenu. Any thoughts or ideas on this? Thanks.
I want to kown how to listening to menubar’s sub-menus?
Sorry, maybe its laughable to you,but I cann’t do this,also have I refer to the develop menual!
this is avaiable in the help
you should create and event handler for menuitem click and link it to menubar
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;
[Bindable]
public var menuBarCollection:XMLListCollection;
private var menubarXML:XMLList =
;
// 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(event:MenuEvent):void {
// Don’t open the Alert for a menu bar item that
// opens a popup submenu.
if (event.item.@data != “top”) {
Alert.show(“Label: ” + event.item.@label + “\n” +
“Data: ” + event.item.@data, “Clicked menu item”);
}
}
]]>
Hi,
Im using the menu with no dropdown too as follows,
Here i want to get the index value of the parent 1,2 and 3 also. in which event i can achive this. I ve tried with menuShow, click and change. I could get it in the change event, but its triggered on mouse hover also. Please help.
Regards,
Prakash
Hey … hi and thanks.
This worked the first time for me.
On an unrelated topic – my menu bar is looking perfect – but the menu items – are in a ‘red colored’ background – and I cannot find a way to skin then menu items.
Any ideas for skinning menu items?
Thank-you!
Prakash,
Perhaps a bit late answer but:
I was also working on the same issue, here is a quick fix:
protected function menuBarChangeHandler(event:MenuEvent):void
{
var itemClicked:Boolean = false;
try{
itemClicked = (event.itemRenderer["menuBarItemState"] == “itemDownSkin”);
}
catch (e:Error){
// menuBarItemState might not exist at runtime, which may lead to an error, handle this as you wish
}
if (itemClicked){
// continue with your code here
}
}
The trick here is using the item skin during the click and rollover events which are both caught by the change handler. ItemDownSkin distinguishes the click event and its rollover counterpart is ItemOverSkin.
Regards,
Can
Hi, and thanks for all those articles !
I haven’t been able to find a simple way to create a multilanguage menu bar, does anyone have an idea ? For the moment, I use an xml-file for configuring the menu items, but that could change if anyone come up with a good answer ?
Thanks in advance !