Flex menu - menu items from XML file

2009-09-23T07:11:00.000-07:00

There are lot of flex menu samples in the net but most are based on the
<mx:xml> or the arraycollections. In this example the menu item is
populated from external xml file.Here is the mxml file in which menu is added.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml" 
applicationComplete="xmlDataList.send()">
<mx:Script>
 <![CDATA[

   import mx.events.MenuEvent;
   import mx.controls.Alert;
   import mx.collections.*;
   import mx.rpc.events.ResultEvent;

[Bindable]
private var menuBarItems:XMLList;

private function resultHandler(event:ResultEvent):void
      {
   var result:XML = event.result as XML;
       menuBarItems = result.menuitem as XMLList;
      }

 ]]>
</mx:Script>
<mx:HTTPService id="xmlDataList" url="menuBarList.xml"

result="resultHandler(event)" 
resultFormat="e4x"/>
<mx:HBox  height="55" width="100%" >
<mx:HBox  height="20">
<mx:MenuBar labelField="@label"

change="menuHandler(event);" 
 dataProvider="{menuBarItems}"/>  
    </mx:HBox>
</mx:HBox>
</mx:Application>

Given below is the content of menuBarList.xml

<menu>
<menuitem label="FILE" data="top">
<menuitem label="New" data="#"/>
<menuitem label="Open" data="#"/>
</menuitem>
<menuitem label="Edit" data="top">
<menuitem label="Copy" data="#"/>
<menuitem label="Cut" data="#"/>
</menuitem>
<menuitem label="View" data="top">
<menuitem label="Page Source" data="#"/>
<menuitem label="Full Screen" data="#"/>
</menuitem>
<menuitem label="Help" data="top">
<menuitem label="Version" data="#"/>
<menuitem label="Help content" data="#"/>
</menuitem>
</menu>

Please feel free to email/post your doubts

Enjoy