Chapter 11: Using Menu-Based Controls--Menu-based control events

User interaction with a Menu or menu-based control is event-driven; that is, applications typically handle events
generated when the user opens, closes, or selects within a menu, or submenu or rolls over or out of menu items. 
The Menu and MenuBar controls dispatch an identical set of menu-specific events. Event handling with PopUp-
MenuButton controls differs from the other two controls, but shares many elements in common with the others.

Menu控件事件

Menu控件在MenuEvent类中定义了以下和菜单相关的事件类型：
change (MenuEvent.CHANGE) Dispatched when a user changes current menu selection by using the keyboard
or mouse.
itemClick (MenuEvent.ITEM_CLICK) Dispatched when a user selects an enabled menu item of type normal,
check, or radio. This event is not dispatched when a user selects a menu item of type separator, a menu item
that opens a submenu, or a disabled menu item.
itemRollOut (MenuEvent.ITEM_ROLL_OUT) Dispatched when the mouse pointer rolls off of a Menu item.
itemRollOver (MenuEvent.ITEM_ROLL_OVER) Dispatched when the mouse pointer rolls onto a Menu item.
menuHide (MenuEvent.MENU_HIDE) Dispatched when the entire menu or a submenu closes.
menuShow  (MenuEvent.MENU_SHOW) Dispatched when the entire menu or a submenu opens.

传递到事件监听器的event对象类型是MenuEvent，它包含一个或多个以下属性：

Property	Description
item	The item in the data provider for the menu item associated with the event.
index	The index of the item in the menu or submenu that contains it.
label	The label of the item.
menu	A reference to the Menu control where the event occurred.
menuBar	The MenuBar control instance that is the parent of the menu, or undefined when the menu does not belong  MenuBar control on pa 365. to a MenuBar. For more information, see

访问一个基于对象的菜单项中的property和field时，采用如下方式：
ta1.text = event.item.label
To access attributes of an E4X XML-based menu item, you specify the menu item attribute name in E4X syntax,

访问E4X XML-based 的菜单项的attribu的时候，如下方式访问：
ta1.text = event.item.@label

 

注意：如果你在一个菜单控件的子菜单上添加了一个事件监听器，当data provider发生结构改变时（比如：一个element被remove了），那么这个监听器可能就跟着消失了，为了确保当dataprovider发生变化时，事件监听器还好用，要么把事件监听器加在菜单控件上，而不是子菜单上，要么当data provider的结构改变时都重新注册一次。
The following example shows a menu with a simple event listener. 
 <?xml version="1.0"?> <!-- menus/EventListener.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import mx.controls.Menu; import mx.events.MenuEvent; // Function to create and show a menu. private function createAndShow():void { var myMenu:Menu = Menu.createMenu(null, myMenuData, false); myMenu.labelField="@label" // Add an event listener for the itemClick event. myMenu.addEventListener(MenuEvent.ITEM_CLICK, itemClickInfo); // Show the menu. myMenu.show(225, 10); } // The event listener for the itemClick event. 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> <!-- The XML-based menu data provider. --> <mx:XML id="myMenuData"> <xmlRoot> <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> </xmlRoot> </mx:XML> <!-- Button controls to open the menus. --> <mx:Button x="10" y="5" label="Open Menu" click="createAndShow();"/> <!-- Text area to display the event information --> <mx:TextArea x="10" y="40" width="200" height="100" id="ta1"/> </mx:Application>

---

MenuBar事件
The following figure shows a MenuBar control:

MenuBar的事件，比Menu少一个itemclick事件。

change (MenuEvent.CHANGE) Dispatched when a user changes current menu bar selection by using the
keyboard or mouse. This event is also dispatched when the user changes the current menu selection in a pop-up
submenu. When the event occurs on the menu bar, the
menu property of the MenuEvent object is null.
itemRollOut (MenuEvent.ITEM_ROLL_OUT) Dispatched when the mouse pointer rolls off of a menu bar
item.
itemRollOver (MenuEvent.ITEM_ROLL_OVER) Dispatched when the mouse pointer rolls onto a menu bar
item.
menuHide (MenuEvent.MENU_HIDE) Dispatched when a pop-up submenu closes.
menuShow (MenuEvent.MENU_SHOW) Dispatched when a pop-up submenu opens, or the user selects a menu
bar item with no drop-down menu.

Note:当你选择menu bar上的一个item时，MenuBar控件不派发itemClick事件，只有当你选择的是弹出的子菜单中的item时才会派发itemClick事件。 For more information, see Menu control events– on page 354.

对于每个弹出的子菜单，MenuBar控件派发change, itemClick, itemRollOut, itemRollOver, menuShow, and menuHide事件，和Menu控件是一样的，所以Handle events triggered by the pop-up menus as you would handle events from Menu controls.
The following example handles events for the menu bar and for the pop-up submenus.

<?xml version="1.0"?> <!-- menus/MenuBarEventInfo.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initCollections();"> <mx:Script> <!--[CDATA[ import mx.events.MenuEvent; import mx.controls.Alert; import mx.collections.*; [Bindable] public var menuBarCollection:XMLListCollection; private var menubarXML:XMLList =<> <menuitem label="Menu1"> <menuitem label="MenuItem 1-A" data="1A"/> <menuitem label="MenuItem 1-B" data="1B"/> </menuitem> <menuitem label="Menu2"> <menuitem label="MenuItem 2-A" data="2A"/> <menuitem label="MenuItem 2-B" data="2B"/> </menuitem> <menuitem label="Menu3" data="M3"/> </> // Event handler to initialize the MenuBar control. private function initCollections():void { menuBarCollection = new XMLListCollection(menubarXML); } // Event handler for the MenuBar control's change event. private function changeHandler(event:MenuEvent):void { // Only open the Alert for a selection in a pop-up submenu. // The MenuEvent.menu property is null for a change event // dispatched by the menu bar. if (event.menu != null) { Alert.show("Label: " + event.item.@label + "/n" + "Data: " + event.item.@data, "Clicked menu item"); } } // Event handler for the MenuBar control's itemRollOver event. private function rollOverHandler(event:MenuEvent):void { rollOverTextArea.text = "type: " + event.type + "/n"; rollOverTextArea.text += "target menuBarIndex: " + event.index + "/n"; } // Event handler for the MenuBar control's itemClick event. private function itemClickHandler(event:MenuEvent):void { itemClickTextArea.text = "type: " + event.type + "/n"; itemClickTextArea.text += "target menuBarIndex: " + event.index + "/n"; } ]]--> </mx:Script> <mx:Panel title="MenuBar Control Example" height="75%" width="75%" paddingTop="10" paddingLeft="10"> <mx:Label width="100%" color="blue" text="Select a menu item."/> <mx:MenuBar labelField="@label" dataProvider="{menuBarCollection}" change="changeHandler(event);" itemClick="itemClickHandler(event);" itemRollOver="rollOverHandler(event);"> <mx:TextArea id="rollOverTextArea" width="200" height="100"/> <mx:TextArea id="itemClickTextArea" width="200" height="100"/> </mx:Panel> </mx:Application>

---

 

 例子：使用Menu控件事件

     下面的例子是关于Menu控件的事件，它展示了两个菜单，一个data provider是XML，一个是Array。当用户打开菜单，移动鼠标，选择菜单项时，TextArea控件显示了关于每个事件的信息，It shows some of the differences in how you handle XML and object-based menus, and indicates some of the types of information that are available about each Menu event.
<?xml version="1.0"?> <!-- menus/ExtendedMenuExample.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ /* Import the Menu control and MenuEvent class. */ import mx.controls.Menu; import mx.events.MenuEvent; /* Define a variable for the Menu control. */ private var myMenu:Menu; /* The event listener that creates menu with an XML data provider and adds event listeners for the menu. */ private function createAndShow():void { /* Clear the event output display. */ ta1.text=""; /* Don't show the (single) XML root node in the menu. */ myMenu = Menu.createMenu(null, myMenuData, false); /* Set the labelField explicitly for XML data providers. */ myMenu.labelField="@label" myMenu.addEventListener(MenuEvent.ITEM_CLICK, menuShowInfo); myMenu.addEventListener(MenuEvent.MENU_SHOW, menuShowInfo); myMenu.addEventListener(MenuEvent.MENU_HIDE, menuShowInfo); myMenu.addEventListener(MenuEvent.ITEM_ROLL_OUT, menuShowInfo); myMenu.addEventListener(MenuEvent.ITEM_ROLL_OVER, menuShowInfo); myMenu.show(275, 10); } /* The event listener for the menu events. Retain information on all events for a menu instance. */ private function menuShowInfo(event:MenuEvent):void { ta1.text="event.type: " + event.type; ta1.text+="/nevent.label: " + event.label; /* The index value is -1 for menuShow and menuHide events. */ ta1.text+="/nevent.index: " + event.index; /* The item field is null for show and hide events. */ if (event.item) { ta1.text+="/nItem label: " + event.item.@label ta1.text+="/nItem selected: " + event.item.@toggled; ta1.text+= "/nItem type: " + event.item.@type; } } /* The event listener that creates an object-based menu and adds event listeners for the menu. */ private function createAndShow2():void { /* Show the top (root) level objects in the menu. */ myMenu = Menu.createMenu(null, menuData, true); myMenu.addEventListener(MenuEvent.ITEM_CLICK, menuShowInfo2); myMenu.addEventListener(MenuEvent.MENU_SHOW, menuShowInfo2); /* The following line is commented out so that you can see the results of an ITEM_CLICK event. (The menu hides immediately after the click.) myMenu.addEventListener(MenuEvent.MENU_HIDE, menuShowInfo2); */ myMenu.addEventListener(MenuEvent.ITEM_ROLL_OVER, menuShowInfo2); myMenu.addEventListener(MenuEvent.ITEM_ROLL_OUT, menuShowInfo2); myMenu.show(275, 10); } /* The event listener for the object-based Menu events. */ private function menuShowInfo2(event:MenuEvent):void { ta1.text="event.type: " + event.type; ta1.text+="/nevent.label: " + event.label; /* The index value is -1 for menuShow and menuHide events. */ ta1.text+="/nevent.index: " + event.index; /* The item field is null for show and hide events. */ if (event.item) { ta1.text+="/nItem label: " + event.item.label ta1.text+="/nItem selected: " + event.item.toggled; ta1.text+= "/ntype: " + event.item.type; } } /* The object-based data provider, an Array of objects. Its contents is identical to that of the XML data provider. */ [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"} ]} ]; ]]--> </mx:Script> <!-- The XML-based menu data provider. The XML tag requires a single root. --> <mx:XML id="myMenuData"> <xmlRoot> <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> </xmlRoot> </mx:XML> <!-- Text area to display the event information. --> <mx:TextArea id="ta1" width="264" height="168" x="11" y="38"/> <!-- Button controls to open the menus. --> <mx:Button id="b1" label="Open XML Popup" click="createAndShow();" x="10" y="10" /> <mx:Button id="b2" label="Open Object Popup" click="createAndShow2();" x="139" y="10" /> </mx:Application>

 

 

---

PopUpMenuButton控件事件

      PopUpMenuButton 控件可创建一个 PopUpButton 控件，带有一个主子按钮和一个辅助子按钮。单击辅助（右）子按钮会下拉一个菜单。

      因为PopUpMenuButton是PopUpButton控件的子类，它支持PopUpButton控件的所有事件，当用户单击主子按钮时时，PopUpMenuButton控件派发出一个click (MouseEvent.CLICK)事件。

      当用户单击PopUpMenuButton的主子按钮时，它还派发出一个itemClick(MenuEvent.ITEM_CLICK)事件，该事件包含关于所选菜单项的信息，因此，当用户单击主子按钮或者从下拉菜单中选择一项时都会派发itemClick事件。因为两种情况都会派发同一个事件，所以单击主子按钮产生的行为和在下拉框最后选择的行为是一样的，所以主子按钮扮演着经常被使用的菜单项。

The following example shows how the PopUpMenuButton generates events and how an application can handle
them.
     当用户从弹出的菜单中选择一项时，发生下列事件顺序: The PopUpMenuButton dispatches an itemClick event. The applicationsitemClickHandler() event listener function handles the itemClick event and displays the information about the event in an Alert control.
     当用户单击主子按钮，发生下列事件顺序: The PopUpMenuButton control dispatches a click event. The PopUpMenuButton control dispatches an itemClick event. The applicationsitemClickHandler() event listener function handles the itemClick event and displays information about the selected Menu item in an Alert control. The applicationsclickHandler() event listener function also handles the MouseEvent.CLICK event, and displays the Button label in an Alert control.
 <?xml version="1.0"?> <!-- menus/PopUpMenuButtonEvents.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="600" width="600" creationComplete="initData();"> <mx:Script> <!--[CDATA[ import mx.events.*; import mx.controls.*; // Set the Inbox (fourth) item in the menu as the button item. private function initData():void { Menu(p1.popUp).selectedIndex=3; } // itemClick event handler, invoked when you select from the menu. // Shows the event's label, index properties, and the values of the // label and data fields of the data provider entry specified by // the event's item property. 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); } //Click event handler for the main button. public function clickHandler(event:MouseEvent):void { Alert.show(" Click Event currentTarget.label: " + event.currentTarget.label); } //The menu data provider [Bindable] public var menuDP:Array = [ {label: "Inbox", data: "inbox"}, {label: "Calendar", data: "calendar"}, {label: "Sent", data: "sent"}, {label: "Deleted Items", data: "deleted"}, {label: "Spam", data: "spam"} ]; ]]--></mx:Script> <mx:PopUpMenuButton id="p1" showRoot="true" dataProvider="{menuDP}" click="clickHandler(event)" itemClick="itemClickHandler(event);" /> </mx:Application>