flex menubar clicking event

I have a menuBar that looks like this:

<mx:MenuBar id="myMenuBar" labelField="@label" cornerRadius="8" color="black" fillColors="[green, green]" itemClick="menuItemClickHandler(event);"
        dataProvider="{menuBarCollection}" change="onTopSelection(event)" />    

The XML for my menuBar looks like this:

            <menuitem l开发者_如何学Pythonabel="Vision">
        </menuitem>
        <menuitem label="About">
            <menuitem label="Our Team"/>
            <menuitem label="Services"/>
        </menuitem>

        <menuitem label="Contact Us">

        </menuitem>

As you can see there is Vision and Contact Us but the eventHandler doesn't know when those two are clicked. What is the correct way to implement the eventHandler?

You have two event handlers in your code. onTopSelection and menyItemClickHandler. The change event is dispatched when anything is clicked. The itemClick event is only dispatches when a submenu item is clicked.

I took the code you shared with us and turned it into a running sample. IF you run it in debug mode, you will see the traces that illustrate what I stated above:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                 creationComplete="application1_creationCompleteHandler(event)">


    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;

            [Bindable] 
            public var menuBarCollectionSource : XML = 
            <menu>
            <menuitem label="Vision">
            </menuitem>
            <menuitem label="About">
                <menuitem label="Our Team"/>
                <menuitem label="Services"/>
            </menuitem>
            <menuitem label="Contact Us">
            </menuitem>
            </menu>;

            [Bindable] 
            public var menuBarCollection : XMLListCollection = new XMLListCollection();

            public function menuItemClickHandler(event:MenuEvent):void{
                trace('menu item clicked ' + event.label);
            }

            protected function onTopSelection(event:MenuEvent):void
            {
                trace('change to ' + event.label);
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                menuBarCollection.source = menuBarCollectionSource.menuitem as XMLList;
            }

        ]]>
    </mx:Script>


    <mx:MenuBar id="myMenuBar" labelField="@label" cornerRadius="8" 
                color="black" fillColors="[green, green]" 
                itemClick="menuItemClickHandler(event);"
                dataProvider="{menuBarCollection}" change="onTopSelection(event)" />  

</mx:Application>

Since you're question was about the proper way to implement an event handler, this sample shows I implemented both handlers you had in your original code.

@SuperString you are not really using MenuBar as it was intended. As Flextras points out, the itemClick event only fires for sub-menu clicks.

Think of it like the menu bar in a typical windows application. Clicking on the File menu brings up a sub-menu, and then only when you click on an item in the sub-menu does something actually happen. I am not saying that what you are trying to do is wrong, just that the control wasn't designed with your particular use in mind.

One suggestion is to use a ButtonBar with a PopupMenu as needed for sub-selections. It won't be as clean as you will have to handle events from the Menu differently from the ButtonBar.

Ideally, what you want is a "Nested Navigation Menu" component, but I don't see any existing component with that functionality. Maybe something for Flextras to build?

Thank you very much for your advise !

With your help, I added some events which will be launched from the child elements of my menuBar, but in a slightly different way:

First, I added an eventlistener to my menu:

(let's say that I have a mx:Menubar called _myMenuBarName)

_myMenuBarName.addEventListener(MenuEvent.ITEM_CLICK, eventsLaucher);

Then I created a function which will decide which event it should launch, depending on the label of the menuBarItem

    private function eventsLauncher(pEvent:MenuEvent):void 
            {
            switch(pEvent.label)
 {
            case "Our Team":
                         {
                //do something
                break;

                case "Vision":
                    //do something else
                break;              
            }
}