Flex MenuBar and itemClick event for parent menu items

While using the Flex MenuBar for the first time today, I discovered that the itemClick event only fires for final children menu items. So, those menus that had children menus, would not fire if I clicked on them. I needed to have a menu, whereby a parent menu item OR child menu item can be clicked on i.e. any menu in the menubar. The events listed in the Flex 3 SDK documentation were:

Solution: First create the menubar and provide the data via the dataprovider property. Next, assign listeners for menuShow and menuHide, then inside these, assign the rollover and click listeners. These will keep a track of a property on the item object that you gave through the dataProvider. Source code below. 

<mx:Script>
  <![CDATA[
   
   
   [Bindable]
   private var myMenuData:ArrayCollection = new ArrayCollection();
   
   [Bindable]
   private var menuTopParent:Object;
   
   private var currentCode:String = "";
   
   
   // Create and display the Menu control.
            public function buildMenu():void 
            {
                //myMenuData.removeAll();
                
                menuTopParent = new Object();
                
                var menuRegion:Object = {"label":"Region", "children":buildRegions()};
                var menuCountry:Object = {"label":"Country", "children":buildCountries()};
                
                menuTopParent = {"label":"Area", "children":new Array(menuRegion, menuCountry)};
            }
            
            

            
            private function buildRegions():Array
            {
             var regions:Array = new Array();
                for each(var region:CountryVO in regionsList)
                {
              var o:Object = new Object();
              o['label'] = region.Name;
              o['code'] = region.Code;
              o['children'] = new Array();
              for each(var s:CountryVO in region.Countries)
              {
               //if(country.RegionCode == s.RegionCode)
                o['children'].push({label:s.Name, code:s.Code});
              }
              regions.push(o);
                }
                return regions;
            }
            
            private function buildCountries():Array
            {
             var countries:Array = new Array();
             
             for each(var c:CountryVO in countriesList)
                {
                 countries.push({label:c.Name, code:c.Code});
                }
                return countries;
            }
   
    private function menuItemClickHandler(event:MouseEvent):void 
             { 
                 if(currentCode.length > 0) 
                 { 
                    var ev:GenericEvent = new GenericEvent(GenericEvent.COUNTRY_SELECTED);
     ev.countrycode = currentCode; 
     dispatchEvent(ev);
                 } 
             } 
   
   //This is how to handle clicking of ALL menu items, not just final children.
             private function rollOverHandler(event:MenuEvent):void 
             { 
                var i:Object = event.item;
                if(i['code'] != null)
                 currentCode = i['code'];
             } 
   
   private function menuShow(event:MenuEvent):void
   {
    var menu:Menu = event.menu;
    menu.addEventListener(MouseEvent.CLICK, menuItemClickHandler); 
    menu.addEventListener(MenuEvent.ITEM_ROLL_OVER, rollOverHandler);
         }
         
         private function menuHide(event:MenuEvent):void
   {
    var menu:Menu = event.menu;
    menu.removeEventListener(MouseEvent.CLICK, menuItemClickHandler); 
    menu.removeEventListener(MenuEvent.ITEM_ROLL_OVER, rollOverHandler);
         }
   
  ]]>
 </mx:Script>
 
 
 <mx:MenuBar id="menubar"   
  width="100%"
  menuHide="menuHide(event)"
  menuShow="menuShow(event)"
  dataProvider="{menuTopParent}" />