Make menuBar UI listen for mouse click and XML menu items

Problem:
Load menubar from the Configurable XML, so that i can configure the complete actions in xml. As menubar only listen to the sub level menu item, and I would like to make menubar listen menu click.


Solution:

As menubar listen to both Mouse.click / MenuEvent.itemClick,, mouse click event will listen for top level menu item only.

creationComplete="initApp()"
layout="absolute" viewSourceURL="srcview/index.html">


import mx.events.MenuEvent;
import mx.controls.menuClasses.MenuBarItem;
import mx.collections.XMLListCollection;
import mx.controls.Alert
private var menuDataXML:XML = " <items>
<item position="top" label="menu 1" name="Menu 1"/>
<item position="top" label="menu 2" name="Menu 2"/>
<item position="top" label="menu 3" >
<item label="submenu 3" name="submenu 3.1"/>
<item label="submenu 3" name="submenu 3.2" />
</item>
<item position="top" label="menu 4" >
<item label="submenu 4" name="submenu 4.1"/>
<item label="submenu 4" name="submenu 4.2" />
</item>

</items>";


[Bindable] private var menuData:XMLListCollection;

private function initApp():void
{
menuData = new XMLListCollection(menuDataXML.*)
}

private function menuChange(event:MenuEvent):void
{
Alert.show(event.item.@name, 'menuBar ItemClick Event' )
}
private function mouseClick(event:MouseEvent):void
{
var tempMenu:MenuBarItem =MenuBarItem(event.target)

if (XMLList(tempMenu.data).*.length()==0)
{
Alert.show(MenuBarItem(event.target).data.@name, 'Mouse Event' )
}
}


]]>



labelField="@label"
itemClick="menuChange(event);"
click="mouseClick(event)"
dataProvider="{menuData}"
fontSize="13"
/>