flex>菜单设计 小强斋

 菜单设计

菜单主要的作用就是功能模块的导航，通过菜单，用户可以快速的切换到需要的功能。Flex中的菜单大体有三种：上下文菜单、菜单条以及弹出式菜单

一、上下文菜单的设计
上下文菜单是菜单的基础形式，如常用的右键菜单。上下文菜单定义比较灵活，可以在任意位置、任意组件上弹出菜单。

1.1 使用Menu控件创建菜单
在Flex中，上下文菜单的设计需要依靠Menu类来实现。在Menu类的createMenu方法中，已经定义了创建菜单所需要的基本要素，并以参数的形式设置。createMenu方法的语法格式如下所示。 public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean = true):Menu 参数说明：
parent：放置菜单控件的父容器。
mdp：菜单控件显示的数据源。
showRoot：在菜单上是否显示数据源的根节点。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style>
		.MenuStyle
		{
			fontSize : 14;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			// 导入 Menu 类
			import mx.controls.Menu;
			// 创建一个 Menu 控件
			private function createAndShow():void 
			{
				var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
				myMenu.labelField="@label";
				myMenu.styleName = "MenuStyle";
				myMenu.show(myButton.x + myButton.width, myButton.y + myButton.height);
			}
		]]>
	</mx:Script>
	
	<!-- 定义菜单数据 -->
	<mx:XML format="e4x" id="myMenuData">
		<root>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</root>
	</mx:XML>

	<mx:Button id="myButton" label="打开菜单" fontSize="14" 
		click="createAndShow();" x="31" y="27"/>

</mx:Application>

1.2 菜单事件
在菜单控件中，定义了几个常用的事件，包括单击菜单项、更改当前选择菜单、菜单显示和隐藏等。这些事件类型包含在MenuEvent类中，

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style>
		.MenuStyle
		{
			fontSize : 14;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			import mx.events.MenuEvent;
			// 导入 Menu 类
			import mx.controls.Menu;
			
			// 创建一个 Menu 控件
			private function createAndShow():void 
			{
				var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
				myMenu.labelField="@label";
				myMenu.styleName = "MenuStyle";
				// 添加事件
				myMenu.addEventListener(MenuEvent.ITEM_CLICK, itemClickInfo);
				myMenu.show(myButton.x + myButton.width, myButton.y + myButton.height);
			}
			
			// 菜单事件方法
			private function itemClickInfo(event:MenuEvent):void 
			{
				ta1.text="event.type: " + event.type;
				ta1.text+="\nevent.index: " + event.index;
				ta1.text+="\nItem label: " + event.item.@label
				ta1.text+="\nItem selected: " + event.item.@toggled;
				ta1.text+= "\nItem type: " + event.item.@type;
			}
		]]>
	</mx:Script>
	
	<!-- 定义菜单数据 -->
	<mx:XML format="e4x" id="myMenuData">
		<root>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</root>
	</mx:XML>

	<mx:Button id="myButton" label="打开菜单" fontSize="14" 
		click="createAndShow();" x="31" y="27"/>
	
	<mx:TextArea x="31" y="82" fontSize="12" width="200" height="100" id="ta1"/>

</mx:Application>

二、 菜单条
菜单条是一个显示顶级菜单项的横向条目。单击每个顶级菜单都会弹出一个子菜单。菜单条是继承了Menu类，所以，具有和Menu控件同样的事件。

2.1 使用MenuBar控件创建菜单
菜单条的设计要依赖于MenuBar控件，这个是在Flex中已经提供了。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:MenuBar id="myMenuBar" labelField="@label" fontSize="14">
		<mx:XMLList>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</mx:XMLList>
	</mx:MenuBar>

</mx:Application>

2.2 菜单事件
由于MenuBar控件是继承自Menu类的，所以具有Menu类的所有事件特性。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.MenuEvent;
			
			// MenuBar 控件的 change 事件.
			private function changeHandler(event:MenuEvent):void 
			{
				// 获取选中项目的 label 属性
				if (event.menu != null) 
				{
					Alert.show("Label: " + event.item.@label);
				}
			}
			
			// MenuBar 控件的 itemRollOver 事件.
			private function rollOverHandler(event:MenuEvent):void 
			{
				rollOverTextArea.text = "type: " + event.type + "\n";
				rollOverTextArea.text += "target menuBarIndex: " +
				event.index + "\n";
			}
			
			// MenuBar 控件的 itemClick 事件.
			private function itemClickHandler(event:MenuEvent):void 
			{
				itemClickTextArea.text = "type: " + event.type + "\n";
				itemClickTextArea.text += "target menuBarIndex: " +
				event.index + "\n";
			}
		]]>
	</mx:Script>

	<mx:MenuBar id="myMenuBar" labelField="@label" fontSize="14"
		change="changeHandler(event);" itemClick="itemClickHandler(event);"
		itemRollOver="rollOverHandler(event);">
		<mx:XMLList>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</mx:XMLList>
	</mx:MenuBar>
	
	<mx:TextArea id="rollOverTextArea" width="200" height="100" x="10" y="64"/>
	<mx:TextArea id="itemClickTextArea" width="200" height="100" x="218" y="64"/>

</mx:Application>

三、 弹出式按钮菜单的设计
弹出式按钮菜单是一个以按钮的形式弹出的菜单。当用户单击按钮时，会弹出一个顶级的菜单项。与菜单和菜单条不同，弹出式按钮菜单只支持顶级菜单。

3.1 使用PopUpMenuButton控件创建菜单
要设计一个弹出式按钮菜单，需要使用Flex中提供的PopUpMenuButton控件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[	
			// 菜单数据
			[Bindable]
			public var menuDP:Array = 
			[
				{label: "收件箱", data: "inbox"},
				{label: "日历", data: "calendar"},
				{label: "发件箱", data: "sent"},
				{label: "已删除邮件", data: "deleted"},
				{label: "垃圾邮件", data: "spam"}
			];
		]]>
	</mx:Script>
	<mx:PopUpMenuButton id="p1"
		showRoot="true"
		dataProvider="{menuDP}"
		fontSize="14"
	 x="33" y="31"/>
</mx:Application>

3.2 菜单事件
PopUpMenuButton是PopUpButton控件的子类，所以，PopUpMenuButton控件支持PopUpButton控件的所有事件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.*;
			import mx.controls.*;
			
			// 初始化数据
			private function initData():void 
			{
				Menu(p1.popUp).selectedIndex = 3;
			}
			
			// itemClick 事件
			// 获取 label 和 data 属性的值,
			// 获取索引 index
			public function itemClickHandler(event:MenuEvent):void 
			{
				Alert.show("itemClick event label: " + event.label
							+ " \nindex: " + event.index
							+ " \nitem.label: " + event.item.label
							+ " \nitem.data: " + event.item.data);
			}
			
			// 单击事件
			public function clickHandler(event:MouseEvent):void 
			{
				Alert.show(" Click Event currentTarget.label: "
				+ event.currentTarget.label);
			}
			
			// 菜单数据
			[Bindable]
			public var menuDP:Array = 
			[
				{label: "收件箱", data: "inbox"},
				{label: "日历", data: "calendar"},
				{label: "发件箱", data: "sent"},
				{label: "已删除邮件", data: "deleted"},
				{label: "垃圾邮件", data: "spam"}
			];
		]]>
	</mx:Script>
	<mx:PopUpMenuButton id="p1"
		showRoot="true"
		dataProvider="{menuDP}"
		click="clickHandler(event)"
		itemClick="itemClickHandler(event);"
		fontSize="14"
	/>
</mx:Application>