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>
