[Flex]Flex使用札记

1 屏蔽FlashPlayer右键，并自定义右键弹出式菜单

很多人不太喜欢Flash Player自带的用处不大的右键菜单，如今Adobe顺民意了，可以自定义右击菜单，上代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo Menu control. -->
<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"
       creationComplete="iniApp(event)" rightClick="contextMenuShow(event)">
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.controls.Menu;
   import mx.events.FlexEvent;
   import mx.events.MenuEvent;
   
   private var myMenu:Menu;
   
   // Create and display the Menu control.
   private function showMenu():void 
   {
    myMenu.show(this.mouseX,this.mouseY );
   }
   
   // Event handler for the Menu control's change event.
   private function menuHandler(evt:MenuEvent):void  
   {
    Alert.show("Label: " + evt.item.@label,"Clicked menu item");
   }
   
   protected function contextMenuShow(event:MouseEvent):void
   {
    showMenu();
   }
   
   protected function iniApp(event:FlexEvent):void
   {
    myMenu = Menu.createMenu(this,myMenuData,false);
    myMenu.labelField = "@label";
    myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuHandler);
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <fx:XML id="myMenuData">
   <root>
    <menuitem label="MenuItem 1" eventName="copy"/>
    <menuitem label="MenuItem 2" eventName="paste"/>
   </root>
  </fx:XML>
 </fx:Declarations> 
</s:Application>

?????? 运行效果如下：Flash的右键终于真正解放了。

???????? 值得注意的是需要设定好编译参数（版本号足够高），否则，哼哼，不会有效果的。

2 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"
			   width="100%" height="100%" minWidth="800" minHeight="600">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g.,services,value objects) here -->
	</fx:Declarations>
	<s:controlBarContent>
		<mx:DateField/>
	</s:controlBarContent>
	<s:controlBarLayout>
		<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:controlBarLayout>
	<s:SkinnableContainer width="100%" height="100%">
	</s:SkinnableContainer>
	<s:Panel x="202" y="177" width="100%" height="35" skinClass="PlainPanel">
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle" horizontalAlign="left"/>
		</s:layout>
		<s:controlBarContent>
			<s:CheckBox label="CheckBox"/>
			<s:Button label="Button"/>
		</s:controlBarContent>
	</s:Panel>
</s:Application>

皮肤PlainPanel.mxml的源码，去掉Panel的标题栏：

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use,modify,and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark Panel container.  

    @see spark.components.Panel

    @langversion 3.0
    @playerversion Flash 10
    @playerversion AIR 1.5
    @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" 
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        <![CDATA[
		import mx.core.FlexVersion;
		
		/* Define the skin elements that should not be colorized. 
        For panel,border and title background are skinned,but the content area,background,border,and title text are not. */
        static private const exclusions:Array = ["background","titleDisplay","contentGroup","controlBarGroup","border"];
			
		/* exclusions before Flex 4.5 for backwards-compatibility purposes */
		static private const exclusions_4_0:Array = ["background","controlBarGroup"];
		
		/**
		 * @private
		 */
		override public function get colorizeExclusions():Array 
		{
			// Since border is styleable via borderColor,no need to allow chromeColor to affect
			// the border.  This is wrapped in a compatibility flag since this change was added  
			// in Flex 4.5
			if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
			{
				return exclusions_4_0;
			}
			
			return exclusions;
		}
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
        
        /**
         * @private
         */
        override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            }
            else
            {
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                contents.left = contents.top = contents.right = contents.bottom = 0;
            }
            
            dropShadow.visible = getStyle("dropShadowVisible");
            
            var cr:Number = getStyle("cornerRadius");
            var withControls:Boolean = 
                (currentState == "disabledWithControlBar" || 
                 currentState == "normalWithControlBar");
            
            if (cornerRadius != cr)
            {
                cornerRadius = cr;
                
                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;
                
                setPartCornerRadii(topMaskRect,withControls); 
                setPartCornerRadii(border,withControls); 
                setPartCornerRadii(background,withControls);                
            }
            
            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect,withControls); 
            
            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");
            
            super.updateDisplayList(unscaledWidth,unscaledHeight);
        }
        
        /**
         * @private
         */  
        private function setPartCornerRadii(target:Rect,includeBottom:Boolean):void
        {            
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        }
        
        private var cornerRadius:Number;
		]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
    
    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <!--- @private -->
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
    
    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">
        
        <!-- top group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
            <!--- @private -->
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
        
        <!-- bottom group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
                 includeIn="normalWithControlBar,disabledWithControlBar">
            <!--- @private -->
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
        
        <!-- layer 1: border -->
        <!--- @private -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
        
        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!--- @private
                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>
        
        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
            
            <!--
                Note: setting the minimum size to 0 here so that changes to the host component's
                size will not be thwarted by this skin part's minimum size.   This is a compromise,more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
            
            <!--- @private -->
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar,disabledWithControlBar" >
                
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">

                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
                    
                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>
                    
                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <!--- @copy spark.components.Panel#controlBarGroup -->
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:SparkSkin>