flex menu

截止目前为止Flex Hero尚未发布Flex 4的MenuBar及Menu组件，所以我们使用Flex 3版本的Menu
[color=red]1.xml作为数据源创建xml[/color]
Flex Menu.createMenu()方法来创建Menu对象。

private function createAndShow():void {
		var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
		myMenu.labelField="@label";
		myMenu.show(10, 10);
		}


<fx:Declarations>
		<!-- Define the menu data. -->
		<fx:XML format="e4x" id="myMenuData">
			<root>
				<menuitem label="MenuItem A" >
					<menuitem label="SubMenuItem A-1" enabled="false"/>
					<menuitem label="SubMenuItem A-2"/>
				</menuitem>
				<menuitem label="MenuItem B" type="check" toggled="true"/>
				<menuitem label="MenuItem C" type="check" toggled="false"/>
				<menuitem type="separator"/>     
				<menuitem label="MenuItem D" >
					<menuitem label="SubMenuItem D-1" type="radio" 
							  groupName="one"/>
					<menuitem label="SubMenuItem D-2" type="radio" 
							  groupName="one" toggled="true"/>
					<menuitem label="SubMenuItem D-3" type="radio" 
							  groupName="one"/>
				</menuitem>
			</root>
		</fx:XML>
	</fx:Declarations>

[color=red]2.arrayList作为数据源创建xml[/color]

private function createAndShow():void {
var myMenu:Menu = Menu.createMenu(null, menuData, true);
myMenu.show(10, 10);
}

[Bindable] 
public var menuData:Array = [
{label: "MenuItem A", children: [
	{label: "SubMenuItem A-1", enabled: false},
	{label: "SubMenuItem A-2", type: "normal"} 
]},
{label: "MenuItem B", type: "check", toggled: true},
{label: "MenuItem C", type: "check", toggled: false},
{type: "separator"},
{label: "MenuItem D", children: [
	{label: "SubMenuItem D-1", type: "radio", 
		groupName: "g1"},
	{label: "SubMenuItem D-2", type: "radio", 
		groupName: "g1", toggled: true}, 
	{label: "SubMenuItem D-3", type: "radio", 
		groupName: "g1"} 
]} 
];

[color=red]3.对于flex3来说设置menu的icon很简单[/color]
需要这样做：
1.图片
[Bindable]
[Embed(source="demo.png")]
public var demo:Class;
2.menu的xml中引用
<menuitem label="demo" icon="demo"/>
3.然后 menu.iconField="@icon";
但到了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"
			   minWidth="1024" minHeight="768"
			   creationComplete="creationCompleteHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.controls.Menu;
			import mx.events.FlexEvent;

			[Embed(source="save.png")]
			public var bpel:Class;

			[Bindable]private var mdp:XML = <root><menuitem label="测试" icon="bpel"/></root>;
			private var menu:Menu;

			protected function creationCompleteHandler(event:FlexEvent):void
			{
				menu = Menu.createMenu(this,mdp,false);
				menu.width = 100;
				menu.rowHeight = 50;
				menu.labelField = "@label";
				menu.iconField = "@icon";
				menu.iconFunction = iconFun;
				menu.show(10,10);
			}

			private function iconFun(item:Object):Class{
				return this[item.@icon];
			}
		]]>
	</fx:Script>

</s:Application>

效果图：

[img]http://dl.iteye.com/upload/attachment/565488/49cc2820-c45e-353e-a0dd-c16bca86d370.png[/img]


[color=red]4.改变menuiconField,checkIcon,radioIcon等CSS样式属性及类属性.[/color]

<fx:Script>
	<![CDATA[
	import mx.controls.Menu;
	[Bindable]
	[Embed(source="assets/my.png")]
	public var my:Class;

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

	[Bindable]
	[Embed(source="assets/hero.png")]
	public var hero:Class;
	private function createAndShow():void {
	var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
	myMenu.labelField="@label";
	myMenu.setStyle('checkIcon', flex);
	myMenu.setStyle('radioIcon', hero);
	myMenu.iconField="@icon";
	myMenu.show(10, 10);
	}
	]]>
</fx:Script>
<fx:Declarations>
	<!-- Define the menu data. -->
	<fx:XML format="e4x" id="myMenuData">
		<root>
			<menuitem label="Menu A" icon="my">
				<menuitem label="SubMenu A1" enabled="false"/>
				<menuitem label="SubMenu A2"/>
			</menuitem>
			<menuitem label="Menu B" type="check" toggled="true"/>
			<menuitem label="Menu C" type="check" toggled="false" 
					  icon="my"/>
			<menuitem type="separator"/>     
			<menuitem label="Menu D" icon="my">
				<menuitem label="SubMenu D1" type="radio" 
						  groupName="one"/>
				<menuitem label="SubMenu D2" type="radio" 
						  groupName="one"/>
				<menuitem label="SubMenu D3" type="radio" 
						  groupName="one" toggled="true"/>
			</menuitem>
		</root>
	</fx:XML>
</fx:Declarations>

[color=red]5.使用fx:model动态创建menu的数据源[/color]

<fx:Declarations>
<fx:Model id="Heros">
	<Root>
		<Hero label="Menu A">
			<children label="SubMenu A1"/>
			<children label="SubMenu A2"/>
		</Hero>
		<Hero label="Menu B">
			<children label="Menu B1">
				<children label="SubMenu B2"/>
				<children label="SubMenu B3"/>
			</children>
			<children label="Menu B4">
				<children label="Menu B5"/>
				<children label="Menu B6" enabled="false"/>
			</children>
		</Hero>
		<!-- The items in this entry are bound to the form data -->
		<Hero label="{menuName.text}">
			<children label="{item1.text}"/>
			<children label="{item2.text}"/>
			<children label="{item3.text}"/>
		</Hero>
	</Root>
</fx:Model>
</fx:Declarations>
<fx:Script>
	<![CDATA[

	import mx.controls.Menu;
	public var productMenu:Menu;

	public function initMenu(): void
	{
	productMenu = Menu.createMenu(null, Heros.Hero);
	productMenu.setStyle("disabledColor", 0xCC3366);
	productMenu.show(10,10);
	}

	]]>
</fx:Script>
<s:Button label="Show Products" click="initMenu()"/>
<s:Form>
	<s:FormItem label="Third Submenu title">
		<s:TextInput id="menuName" text="Menu C"/>
	</s:FormItem>
	<s:FormItem label="Item 1">
		<s:TextInput id="item1" text="Menu C1"/>
	</s:FormItem>
	<s:FormItem label="Item 2">
		<s:TextInput id="item2" text="Menu C2"/>
	</s:FormItem>
	<s:FormItem label="Item 3">
		<s:TextInput id="item3" text="Menu C3"/>
	</s:FormItem>
</s:Form>
</s:Application>

6.使用XMLListCollection作为数据源

private function createAndShow():void {
	var myMenu1:Menu = Menu.createMenu(null, hero, true);
	myMenu1.show(10, 10);

	var myMenu2:Menu = Menu.createMenu(null, capitalColl, true);
	myMenu2.show(10, 10);
}
<fx:Declarations>
<fx:XML id="hero">
	<root>
		<Heros label="Atlantis">
			<hero label="hero1" value="test1"/>
			<hero label="hero2" value="test2"/>
			<hero label="hero3" value="test3"/>
		</Heros>
		<Heros label="Commander">
			<hero label="hero5" value="test5"/>
			<hero label="hero6" value="test6"/>
			<hero label="hero7" value="test7"/>
		</Heros>
	</root>
</fx:XML>
<!-- Create an XMLListCollection representing the Tree nodes.
capitals.Capitals is an XMLList with both Capitals elements. -->
<s:XMLListCollection id="capitalColl" source="{hero.Heros}"/>
</fx:Declarations>

7.menu css
Menu
{
font-size:12;
font-family:Verdana;
fontWeight: normal;
skin: ClassReference(null);/*把預設skin設為null*/
cornerRadius: 5;
borderThickness:1;
rollOverColor: #4D89EB;
selectionColor: #4D89EB;
textRollOverColor: #FFFFFF;
textSelectedColor: #FFFFFF;
borderThickness: 1;
}

MenuItem
{
cornerRadius: 5;
rollOverColor: #4D89EB;
selectionColor: #4D89EB;
textRollOverColor: #FFFFFF;
textSelectedColor: #FFFFFF;
borderThickness: 1;
fontSize:8;
themeColor: #c1c1c1;
}