flex组件学习5 Menu

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<!--
		popup弹出式
	
	
	Flex framework includes three controls that present hierarchical data in a cascading menu format. 
	All menu controls can have icons and labels for each menu item,
	 and dispatch events of the mx.events.MenuEvent class in response to user actions.
	  You can use the following menu-based controls
	  
	  
	  flex 包含3个control,每个控制器的子菜单都可以有icon,label,发送事件MenuEvent,响应用户的动作
	  	你可以使用Menu MenuBar PopMenu
	
	  
	  -->
	  
	  
	<!--
	 Menu control 
	 
	A visual menu that can have cascading submenus. 
	You typically display a menu control in response to some user action, such as clicking a button.
	 You cannot define a Menu control by using an MXML tag; you must define it, display it, and hide it by using ActionScript
	
	一个menu可以有级联的 子菜单，你现实 a menu 响应用户的某些动作 比如点击一个Button
	你不能用mxml 标签（如:<mx:Menu>）这样来定义它，你必须用ActionScript定义它，显示，隐藏
	 
	 
	 -->
	 
	<!--MenuBar control
	
		 
A horizontal bar of menu items. Each item in the menu bar can have a submenu that displays 
when you click the MenuBar item. The MenuBar control is effectively a static (non-pop-up) 
  menu that displays the top level of the menu as the bar items

	
	一个菜单项的水平Bar ,当你点击这个menuBar中某个item时，在这个MenuBar中的每个item有一个子menu会显示
	the MenuBar实际上时一个 静态的Menu （非弹出式）的顶级菜单（实际上是一个顶级菜单）
	
-->
	
	
	
	<!--
		PopUpMenuButton control 
      A subclass of the PopUpButton control that displays a Menu control when you click the secondary button. 
      The primary button label changes when you select an item from the pop-up menu.

		PopUpMenuButton 是PopUpButton的一个字类 (当你点击一个Button)显示一个Menu
		
		当你从一个Pop-up（弹出式）点击一个子项时，这个主要的Button labels会改变？、
	-->
	
	
	<!--Menu MenuBar PopUpMenuButton这些需要数据提供者，所以下边两种方式
		Menu items can specify several attributes that determine how the item is displayed and behaves.
		Menu items可以指定几个属性来确定这个item的显示和样式 如下array 当 data Provider
		如：enabled
			groupName:只有对radio有意义,仅对 radio 类型有意义并且是必需的）
				用于关联单选组中的单选按钮项目的标识符。如果使用默认数据描述符，
				则数据提供程序必须使用 groupNameXML 属性或对象字段来指定此特征。
			icon,
			label
			toggled :指定选择复选项目还是单选项目
			type:指定菜单项的类型。有意义的值为 separator、check 或 radio
	-->
	<!--使用数组当数据提供者
	-->
	
	<!--
	使用object数组访问一个元素或者标签
	To access properties and fields of an object-based menu item, you specify the menu item field name, as follows:

ta1.text = event.item.label

使用xml访问一个元素或者标签
To access attributes of an E4X XML-based menu item, you specify the menu item attribute name in E4X syntax, as follows:

ta1.text = event.item.@label


	
	
	-->
	 <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            // Method to create an Array-based menu. 
            private function createAndShow():void {
                // The third parameter sets the showRoot property to false.
                // You must set this property in the createMenu method, 
                // not later.
                var myMenu:Menu = Menu.createMenu(null, menuData, true);
                myMenu.show(10, 10);
            }

            // The Array 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>

    <!-- Button control to create and open the menu. -->
    <mx:Button x="300" y="10" 
        label="Open Menu" 
        click="createAndShow();"/>
	
	<!--使用xml对象当数据提供者并且可以指定每个item的icon-->
	<mx:Script>
        <![CDATA[
            // Import the Menu control.
            import mx.controls.Menu;
    
            [Bindable]
//            [Embed(source="assets/topIcon.jpg")]
            public var myTopIcon:Class;
    
            [Bindable]
//            [Embed(source="assets/radioIcon.jpg")]
            public var myRadioIcon:Class;
    
            [Bindable]
//            [Embed(source="assets/checkIcon.gif")]
            public var myCheckIcon:Class;

            // Create and display the Menu control.
            private function createAndShow1():void {
                var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
                myMenu.labelField="@label";

                // Specify the check icon.
                myMenu.setStyle('checkIcon', myCheckIcon);

                // Specify the radio button icon.
                myMenu.setStyle('radioIcon', myRadioIcon);

                // Specify the icon for the topmenu items.
                myMenu.iconField="@icon";
                myMenu.show(10, 10);
            }
        ]]>
    </mx:Script>

    <!-- Define the menu data. -->
    <mx:XML format="e4x" id="myMenuData">
        <root>
            <menuitem label="MenuItem A" icon="myTopIcon">
                <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" 
                icon="myTopIcon"/>
            <menuitem type="separator"/>     
            <menuitem label="MenuItem D" icon="myTopIcon">
                <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>
    </mx:XML>

    <mx:VBox>
        <!-- Define a Button control to open the menu -->
        <mx:Button id="myButton1" 
            label="Open Menu" 
            click="createAndShow1();"/>
    </mx:VBox>
    
    
    <!--Menu samples-->
	<!--
		Create an instance of the Menu control by calling the static ActionScript Menu.createMenu()
		 method and passing the method an instance of the data provider that contains the information that
		  populates the control as the second parameter; for example:
		  
		  使用静态方法创建，myMenudata是个data Provider
		  
		  var myMenu:Menu = Menu.createMenu(null, myMenuData);
		  
		  false是否使用data provider的根节点
		 var myMenu:Menu = Menu.createMenu(null, myMenuData,false);
	-->
	<mx:Script>
        <![CDATA[
            // Import the Menu control.
            import mx.controls.Menu;

            // Create and display the Menu control.
            private function createAndShow2():void {
                var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
                myMenu.labelField="@label";//xml赋值方式
                myMenu.show(10, 10);//在那个坐标点显示
            }
        ]]>
    </mx:Script>

    <!-- Define the menu data. -->
    <mx:XML format="e4x" id="myMenuData2">
        <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>
    </mx:XML>

    <mx:VBox>
        <!-- Define a Button control to open the menu -->
        <mx:Button id="myButton2" 
            label="Open Menu" 
            click="createAndShow2();"/>
    </mx:VBox>
	<!--Menu Bar samples-->
	<!--
		Unlike the Menu control, a MenuBar control is static; 
		that is, it does not function as a pop-up menu, 
		but is always visible in your application. Because the MenuBar is static, you can define it directly in MXML.
		与Menu不同 MenuBar是静态的，它没有作为一个弹出式菜单，他总是显示在你的应用中，因为是静态的，可以之间在mxml中定义
		
	-->
	<!--注意
	With the <mx:XML> tag you must have a single root node, 
	and you set the showRoot property of the MenuBar control to false. 
	(otherwise, your MenuBar would have only the root as a button). 
	With the <mx:XMLList> tag you define a list of XML nodes, and the top level nodes define the bar buttons. 
If your data provider has a label attribute (even if it is called "label"), 
you must set the MenuBar control's labelField property and use the E4X @ notation for the label; for example: 
	使用<mx:XML>你只能有一个根节点，你设置showRoot属性为flase (否则，你只有一个button作为根节点)
	
	使用<mx:XMLList>你定义一个list 根节点，   如果你的数据提供者是有个label属性 即使是"label"
	你必须为这个label 设置标签属性和 @表示
	-->
	<!-- Define the menu; dataProvider is the default MenuBar property.
      Because this uses an XML data provider, specify the labelField and
      showRoot properties. -->
    <mx:MenuBar id="myMenuBar" labelField="@label">
        <mx:XMLList>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B"/>
            <menuitem label="MenuItem C"/>
            <menuitem label="MenuItem D">
                <menuitem label="SubMenuItem D-1" 
                    type="radio" groupName="one"/>
                <menuitem label="SubMenuItem D-2" 
                    type="radio" groupName="one"
                    selected="true"/>
                <menuitem label="SubMenuItem D-3" 
                    type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
    </mx:MenuBar>
	<!--PopupMenuButton-->
	<!--
	Unlike the Menu and MenuBar controls, the PopUpMenuButton supports only a single-level menu
	与menu,menubar 不同的地方是，它支持只有一级菜单
	
	You define a PopUpMenuButton control in MXML by using the <mx:PopUpMenuButton> tag
	可以用mxml标签
	-->
	<!--
	1	When you click the smaller button, 
		which by default displays a v icon, the control displays a pop-up menu below the button. 
2. When you select an item from the pop-up menu, the main PopUpMenuButton button label changes to show the selected item's label and
 the PopUpMenuButton control dispatches a MenuEvent.CHANGE event. 
3 When you click the main button, the PopUpMenuButton control dispatches a MenuEvent.CHANGE event and a MouseEvent.ITEM_CLICK event
	
	
	1.如果你按下一个按钮 默认显示一个小图标，显示在弹出式菜单下边？？？
	
	2如果你从menu选择一个item,这个main PopUpMenuButton label改变，还有the popupMenuButton发出一个MenuEvent.CHANGE事件
	
	3 如果你点击一个主button,popupMenuButton发出一个menuEvent.CHange,和MouseEvent.ItemClick事件
	
	You must use the PopUpMenuButton's creationComplete event, not the initialize event, 
	to set the main button label from the data provider
	所以，你必须使用PopUpmenuButton 的creationComplete事件，不是Application的 初始化事件，设置这个主button,label从 data Provider;
		
	如	Menu(MyPopUpControl.popUp).selectedIndex=2;


	-->
	<!--使用xml的方式-->
		<mx:Script>
        <![CDATA[
            import mx.controls.Menu
            
            // The initData function sets the initial value of the button 
            // label by setting the Menu subcontrol's selectedIndex property.
            // You must cast the popUp property to a Menu.
            private function initData():void {
                Menu(pb2.popUp).selectedIndex=2;
            }
        ]]>
    </mx:Script>

    <mx:XML format="e4x" id="dp2"> 
        <root>
            <editItem label="Cut"/> 
            <editItem label="Copy"/> 
            <editItem label="Paste"/> 
            <separator type="separator"/>
            <editItem label="Delete"/> 
        </root>
    </mx:XML>

    <mx:PopUpMenuButton id="pb2" 
        dataProvider="{dp2}" 
        labelField="@label" 
        showRoot="false" 
        creationComplete="initData();"/>
	<!--使用数组label方式-->
	<mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            
            public function itemClickHandler(event:MenuEvent):void {
                event.currentTarget.label= "Send to: " + event.label;
            }

            [Bindable] 
            public var menuData1: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="{menuData1}" 
        label="Send to: Inbox" 
        itemClick="itemClickHandler(event);"/>    

</mx:Application>