Apparently this is something that happened in Flex 1.5 by default or was easily settable. It wasn’t too difficult in the Flex 2.x codebase, but I thought I’d post the solution anyways.
Here is the sample app:
<!– Simple example to demonstrate the MenuBar control. –>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="initCollections();">
<mx:script>
<!–[CDATA[
import mx.controls.menuClasses.IMenuBarItemRenderer;
import mx.controls.MenuBar;
import mx.controls.menuClasses.MenuBarItem;
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;
[Bindable]–> public var menuBarCollection:XMLListCollection;
private var menubarXML:XMLList =
<>
<menuitem label="Menu1" data="top">
<menuitem label="MenuItem 1-A" data="1A">
<menuitem label="MenuItem 1-B" data="1B">
</menuitem>
<menuitem label="Menu2" data="top">
<menuitem label="MenuItem 2-A" type="check" data="2A">
<menuitem type="separator">
<menuitem label="MenuItem 2-B">
<menuitem label="SubMenuItem 3-A" type="radio">
groupName="one" data="3A"/>
<menuitem label="SubMenuItem 3-B" type="radio">
groupName="one" data="3B"/>
</menuitem>
</menuitem>
<menuitem label="Menu3" data="top">
<menuitem label="MenuItem 3-A" data="3A">
<menuitem label="MenuItem 3-B" data="3B">
</menuitem>
<menuitem label="Menu4" data="top">
<menuitem label="MenuItem 4-A" data="4A">
<menuitem label="MenuItem 4-B" data="4B">
</menuitem>
</menuitem>;
// Event handler to initialize the MenuBar control.
private function initCollections():void {
menuBarCollection = new XMLListCollection(menubarXML);
}
// Event handler for the MenuBar control’s itemClick event.
private function menuHandler(event:MenuEvent):void {
// Don’t open the Alert for a menu bar item that
// opens a popup submenu.
if (event.item.@data != "top") {
Alert.show("Label: " + event.item.@label + "\n" +
"Data: " + event.item.@data, "Clicked menu item");
}
}
private function onTopSelection(event:MenuEvent):void{
var mb:MenuBar=event.target as MenuBar;
var selectedIndex:int=mb.selectedIndex;
for (var i:int=0;i<mb.menubaritems.length;i++){>
if(i==selectedIndex){
(mb.menuBarItems[i] as MenuBarItem).setStyle("fontWeight","bold");
}
else{
(mb.menuBarItems[i] as MenuBarItem).setStyle("fontWeight","normal");
}
}
}
]]>
</mb.menubaritems.length;i++){>
<mx:panel title="MenuBar Control Example" height="75%" width="75%">
paddingTop="10" paddingLeft="10">
<mx:label width="100%" color="blue">
text="Select a menu item."/>
<mx:menubar labelfield="@label" itemclick="menuHandler(event);">
dataProvider="{menuBarCollection}" change="onTopSelection(event)" />
</mx:menubar>
</mx:label>
</mx:panel></menuitem></menuitem></menuitem></menuitem></menuitem></menuitem></menuitem></menuitem></menuitem></mx:script></mx:application>
Browse the source of this example.
Download a zipfile containing the source to this sample.
1 Comment »


Recent Comments