Flex4 菜单导航定制

主程序

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="init()">
	
	<fx:Script>
		<![CDATA[
			import events.ContentEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.Menu;
			
			[Bindable]
			[Embed(source="assets/folder.png")]
			public var folderIcon:Class;

			[Bindable]
			[Embed(source="assets/edit.png")]
			public var editIcon:Class;

			[Bindable]
			[Embed(source="assets/plus.png")]
			public var plusIcon:Class;
			
			[Bindable]
			[Embed(source="assets/opened.png")]
			public var openedIcon:Class;
			
			[Bindable]
			[Embed(source="assets/save.png")]
			public var saveIcon:Class;
			
			[Bindable]
			[Embed(source="assets/close.png")]
			public var closeIcon:Class;
			
			[Bindable]
			[Embed(source="assets/cut.png")]
			public var cutIcon:Class;
			
			[Bindable]
			[Embed(source="assets/undo.png")]
			public var undoIcon:Class;
			
			[Bindable]
			[Embed(source="assets/copy.png")]
			public var copyIcon:Class;
			
			[Bindable]
			[Embed(source="assets/paste.png")]
			public var pasteIcon:Class;

			protected function init():void
			{
				// 使用Actionscript创建menu
				//menu = Menu.createMenu(null,menu1,false);
				cmd_show.addEventListener(MouseEvent.CLICK,Cmd_Show_Clicked);
			}
			
			protected function Cmd_Show_Clicked(event:Event)
			{
				menu.show();
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		
		<fx:XML id="config" source="config.xml" />
		<!--mxml 使用外部XML文件用XMLListCollection创建数据源 除了XML相关配置，其他设定方法必须包含children项，XML，XMLList，XMLListCollection可以不必设定-->
		<s:XMLListCollection id="menu7" source="{config.menuitem}"/>
	</fx:Declarations>
	<s:Panel id="mix" verticalCenter="0" horizontalCenter="0" title="Mix" width="450" height="300">
		<s:layout>
			<s:VerticalLayout gap="0"/>
		</s:layout>
		<s:Button id="cmd_show" label="Show Menu" />
		<mx:Menu id="menu" showRoot="true" labelField="@label" iconField="@icon" dataProvider="{menu7}"/>
	</s:Panel>
</s:Application>

 



xml配置文件

<?xml version="1.0" encoding="utf-8"?>
				<menuitems>
				<menuitem label="File" icon="folderIcon">
					<children label="Open" icon="openedIcon"/>
					<children label="New" icon="plusIcon"/>
					<children label="Save" icon="saveIcon"/>
					<children label="Colse" icon="closeIcon"/>
				</menuitem>
				<menuitem label="Edit" icon="editIcon">
					<children label="Undo" icon="undoIcon"/>
					<children label="Cut" icon="cutIcon"/>
					<children label="Copy" icon="copyIcon"/>
					<children label="Paste" icon="pasteIcon"/>
				</menuitem>
				<menuitem label="About" >
					<sub label="Help"  enabled="false">
						<children label="OK"/>
						<children label="NO"/>
					</sub>
					<sub type="separator">
					</sub>
					<sub label="Person">
						<children label="Customer" type="radio" groupName="person" toggled="true"/>  
						 <children label="Employee" type="radio" groupName="person"/>  
					</sub>
					<sub label="Floor">
						<children label="5F" type="check" toggled="true"/>
						<children label="6F" type="check" toggled="true"/>
					</sub>
				</menuitem>
			</menuitems>

 
使用MenuBar的时候稍作修改即可

<mx:MenuBar id="menubar" labelField="@label" iconField="@icon" dataProvider="{menu7}"/>