flex菜单栏单击事件

Question

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 label="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?

Answer 1

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.

Answer 2

@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?

Answer 3

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;              
            }
}