Flex学习笔记-自定义菜单的显示细节

icon

<?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="955" minHeight="600">
 
 <s:layout>
     <s:VerticalLayout gap="0"/>
 </s:layout>
    <fx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="pic/1.jpg")]            
            public var userIcon:Class;            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:XMLListCollection id="menuData">
            <fx:XMLList xmlns="">
                <meinuitem label ="根目录">
                    <submenu label="一级目录" enabled="false"/>
                    <submenu type="separator"/>
                    <submenu label="一级目录" icon="userIcon">
                        <submenu label="二级1" type="radio" groupName="person"/>
                        <submenu label="二级2" type="radio" groupName="person" toggled="true"/>
                        </submenu>
                    <submeu label="自动更新" type="check" toggled="true"/>
                </meinuitem>
            </fx:XMLList>
        </mx:XMLListCollection>
    </fx:Declarations>
      <s:Button label="显示菜单" click="menu.show()"/>
     <mx:Menu id="menu" showRoot="true" labelField="@label" iconField="@icon" dataProvider="{menuData}"/>
</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="955" minHeight="600">
 <s:layout>
     <s:VerticalLayout/>
 </s:layout>
 <fx:Script>
     <![CDATA[
         import mx.events.MenuEvent;
         [Bindable]
         [Embed(source="pic/1.jpg")]            
         public var userIcon:Class;    
         private function onMenuClick(event:MenuEvent):void
         {
          var item:XML = XML(event.item);
          lastEvent.text ="Selection:" + item.@label + ",Position:" + event.index +"Type:" +item.@personType;
         }
     ]]>
 </fx:Script>
    <fx:Declarations>
        <mx:XMLListCollection id="menuData">
            <fx:XMLList xmlns="">
               <menuitem label="Tasks">
                   <submenu label="根目录" enabled="false"/>
                   <submenu label="" type="separator"/>
                   <submenu label="增加人" icon="userIcon">
                       <submenu label="客户" type="radio" groupName="persons" personType="32"/>
                       <submenu label="雇主" type="raido" groupName="persons" personType="57"/>
                    </submenu>
                   <submenu label="Auto Update" type="check" toggled="true"/>
               </menuitem>
            </fx:XMLList>
        </mx:XMLListCollection>
    </fx:Declarations>
    <mx:Button label="Display Menu" click="menu.show()"/>
    <mx:Menu id="menu" showRoot="true" labelField="@label" iconField="@icon" dataProvider="{menuData}" itemClick="onMenuClick(event)" />
    <mx:Spacer height="10"/>
    <mx:Label id="lastEvent"/>
    
             
</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="955" minHeight="600">
    <fx:Declarations>
        <s:XMLListCollection id="menuData">
            <fx:XMLList xmlns="">
              <menuitem label="文件">
                  <submenu label="New">
                      <submenu label="工程"/>
                      <submenu label="命令"/>
                   </submenu>
                  <submenu label="Print"/>
              </menuitem>    
                <menuitem label="View">
                    <submenu label="Users"/>
                    <submenu label="Peports"/>
                </menuitem>
            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>
      <mx:MenuBar id="menuBar" labelField="@label" dataProvider="{menuData}"/>
             
</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="955" minHeight="600">
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            private function onMenuClick(event:MenuEvent):void{
              var item:XML = XML(event.item);
              lastEvent.text ="Selection选择的:  "+item.@label+"  ,  Position位置:" + event.index;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:XMLListCollection id="menuData">
            <fx:XMLList xmlns="">
              <menuitem label="文件">
                  <submenu label="New">
                      <submenu label="工程"/>
                      <submenu label="命令"/>
                   </submenu>
                  <submenu label="Print"/>
              </menuitem>    
                <menuitem label="View">
                    <submenu label="Users"/>
                    <submenu label="Peports"/>
                </menuitem>
            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>
      <mx:MenuBar id="menuBar" labelField="@label" dataProvider="{menuData}" x="100" y="500" itemClick="onMenuClick(event)"/>
    <s:Spacer height="100"/>
    <mx:Text id="lastEvent"/>
             
</s:Application>

以下代码是 VIEWSTACK 容器   和 s:navigatorcontent 子容器

<?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="955" minHeight="600">
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:ViewStack id="stack" width="100%" height="100%">
        <s:NavigatorContent label="TVS" width="100%" height="100%">
            <s:Label text="这是一个容器"/>            
        </s:NavigatorContent>
        <s:NavigatorContent label="Cameras" width="100%" height="100%">
            <s:Label text="CAMERAS容器"/>
        </s:NavigatorContent>
        <s:NavigatorContent label="cumputer" width="100%" height="100%">
            <s:Label text="Cumputer容器"/>
        </s:NavigatorContent>
    </mx:ViewStack>
    
             
</s:Application>