flex_菜單淺析；

=>創建簡單菜單示例

<?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" pageTitle="TheStudioOfCenyebao">
    
    <fx:Script>
        <![CDATA[
            protected function createBtn_clickHandler(event:MouseEvent):void
            {
                var secMenu:Menu = Menu.createMenu(null,menuData,true);
                secMenu.labelField = "@label";    // 指明label屬性作爲顯示的標籤。@符號不能少，因爲使用的是XML，使用數組則不用。
                secMenu.show(event.stageX, event.stageY+event.target.height);
            }
        ]]>
    </fx:Script>
   
    <!-- Demo_應用程序導航_創建簡單菜單示例-->

    <fx:Declarations>
        <!-- 非可視元素 -->
        <mx:XMLListCollection id="menuData">
            <mx:source>
                <fx:XMLList>
                    <menuitem label="Tasks">
                        <submenu label="Add Request"/>
                        <submenu label="Add Person">
                            <submenu label="Customer"/>
                            <submenu label="Employee"/>
                        </submenu>
                    </menuitem>
                </fx:XMLList>
            </mx:source>
        </mx:XMLListCollection>
    </fx:Declarations>
    
    <!--view-->
    <s:HGroup verticalCenter="0" horizontalCenter="0" gap="10">
        <s:VGroup gap="0">
            <s:Button id="showBtn" label="DisplayMenu" click="menu.show()"/>
            <mx:Menu id="menu" showRoot="true" labelField="@label" dataProvider="{menuData}"/>
        </s:VGroup>
        <s:VGroup gap="0" id="createBox">
            <s:Button id="createBtn" label="CreateMenu" click="createBtn_clickHandler(event)"/>
        </s:VGroup>
    </s:HGroup>
</s:Application>

=>自定義菜單及與菜單交互示例

<?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" pageTitle="TheStudioOfCenyebao">
    
    <!-- Demo_應用程序導航_自定義菜單及與菜單交互示例 -->
    
    <fx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            
            [Bindable]
            [Embed(source="public/img/user.png")]
            public var userIcon:Class;    // 在菜單中所用到的圖標；
            
            /**
             * 菜單項單擊事件；
             */
            protected function menu_itemClickHandler(event:MenuEvent):void
            {
                // 或者被單擊的菜單項。
                var item:XML = XML(event.item);
                
                // 在標籤組件中顯示相關信息。
                outLbl.text = "You selected: " + item.@label + ", Position：" + event.index + ";";
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 非可視元素 -->
        <mx:XMLListCollection id="menuData">
            <fx:XMLList>
                <menuitem label="Tasks">
                    <submenu label="Add Request" enabled="false"/>
                    <submenu type="separator"/>
                    <submenu label="Add Person" icon="userIcon">
                        <submenu label="Customer" type="radio" groupName="persons"/>
                        <submenu label="Employee" type="radio" groupName="persons" toggled="true"/>
                    </submenu>
                    <submenu label="Auto Update" type="check" toggled="true"/>
                </menuitem>
            </fx:XMLList>
        </mx:XMLListCollection>
    </fx:Declarations>
    
    <!--view-->
    <s:VGroup verticalCenter="0" horizontalCenter="0" gap="0">
        <s:Label id="outLbl" text="Please click the Menu below;" fontWeight="bold" fontSize="18"/>
        <s:Spacer height="10"/>
        <s:Button id="showBtn" label="菜單" click="menu.show()"/>
        <mx:Menu id="menu" showRoot="true" labelField="@label" iconField="@icon" dataProvider="{menuData}"
                 itemClick="menu_itemClickHandler(event)"/>
    </s:VGroup>
</s:Application>