flex menubar clicking event

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

From what I can gather reading the Flex LiveDocs for mx.controls.MenuBar, the top-level items within the bar are not selectable as is. In particular, reading the list of events for this control, event itemClick is "Dispatched when the user selects an item in a pop-up submenu." (emphasis added). I confirmed this by creating a test app similar to yours and trying it out. The event was only fired on items that had at least a second-level place in the XML data provider.

I recommended a change in your design, perhaps create sub-choices for "Vision" and "Contact Us." Or, switch to individual buttons, throwing your own pop-up list for click of "About."

Answer 2

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 3

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