(十七)为Flex定制皮肤

皮肤与组件的关系
使用状态和皮肤
创建Button皮肤
为应用程序的控制台Control Bar创建皮肤

1.将Flex Grocer按钮替换为一张图片
基于Button设计皮肤，通过在皮肤类中添加一张BitmapImage来实现

<?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 the Spark Button component.  

       @see spark.components.Button
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import spark.components.Group;
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            
            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  
            
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                }
                
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;
                                 
        ]]>        
    </fx:Script>
        
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
	<!--使用一张图片来替换Flex Grocer按钮-->
    <s:BitmapImage source="@Embed('assets/FlexGrocerButton.png')"
				   horizontalCenter="0" verticalCenter="1" alpha.disabled=".5"/>
    
</s:SparkButtonSkin>

主应用程序中将Flex Grocer按钮进行替换
通过skinClass指定Button的呈现按指定的类进行呈现，而不再使用默认的Button类

<!--通过skinClass属性告诉Flex不再使用默认的Button类来呈现按钮，而是使用引入的图片来呈现按钮
		    注意：替换后不会影响程序的任何功能，这里处理按钮的外观变为图片外，功能上没任何变化，一样可以点击-->
		<s:Button label="Flex Grocer" x="5" y="5"
				  click="FlexGrocer_clickHandler(event)"
				  skinClass="skins.HomeButtonSkin"/>

--------------------------------------------------------------------------------
HomeButtonSkin.mxml
用于将FlexGrocer按钮替换为一张图片

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

<!--
	该皮肤为Flex Grocer按钮定制
-->

<!--- The default skin class for the Spark Button component.  

       @see spark.components.Button
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import spark.components.Group;
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            
            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  
            
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                }
                
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;
                                 
        ]]>        
    </fx:Script>
        
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
	<!-- 填充组件的矩形，每个边都为1像素
	     fill属性可以接受任何实现了IFill接口的元素作为值
	           框架的所有类中,实现了IFill接口的类有：
	     BitmapFill(使用图像来填充)
	     LinearGradient(使用两种或多种颜色的线性渐变来填充)
	     RadialGradient(使用两种或多种颜色从中点开始向四周放射性填充)
	     SolidColor(用实色填充)-->
	<s:Rect id="fill" left="1" right="1" top="1" bottom="1">
		<s:fill>
			<!-- rotation调整渐变的方向-->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ffffff"
								 color.over="#ffffff"
								 color.down="#afbcac"
								 alpha="1"/>
				<s:GradientEntry color="#ffffff"
								 color.over="#dfecdc"
								 color.down="#dfecdc"
								 alpha="1"/>			
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!--使用一张图片来替换Flex Grocer按钮-->
    <s:BitmapImage source="@Embed('assets/FlexGrocerButton.png')"
				   horizontalCenter="0" verticalCenter="1" alpha.disabled=".5"/>
    
	
	
</s:SparkButtonSkin>

样式文件defaultStore.css

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace views "views.*";
@namespace services "services.*";
@namespace cart "cart.*";
@namespace components "components.*";

/*类选择器：为下拉列表框中的选项定义选中和悬停状态下的颜色*/
.customDropDown {
	selectionColor:#EA800C;
	rollOverColor:#AAAAAA;
}

/*引入新的字体样式，通过SaccoVanzetti就能引用到该字体*/
@font-face {
	src:url("assets/fonts/SaccoVanzetti.ttf");
	fontFamily:SaccoVanzetti;
}

/*为Spark命名空间的Application添加一个新的类型选择器
指定该应用程序使用SaccoVanzetti字体*/
s|Application {
	/*fontFamily:SaccoVanzetti;*/
}

/*后代选择器：为ProductList所包含的所有Label标签设置颜色*/
components|ProductList s|Label {
	color:#013FAC;
}

/*ID选择器：controlBarContent下的List项被选中和鼠标悬停状态设置颜色*/
#categoryList {
	rollOverColor:#defcdc;
	selectionColor:#6aa95f;
	borderVisible:false; 
}

/*为组件的某种状态设置样式
  将主应用程序在checkoutView状态下的背景设置为浅绿色*/
s|Application:checkoutView {
	backgroundColor:#BBC8B8;
}

/*为所有Spark按钮应用皮肤
  ClassReference可以在CSS文件中为StyleManager提供一个对皮肤类的引用*/
s|Button {
	skin-class:ClassReference('skins.FlexGrocerButtonSkin');
	color:#1111b9;
	corner-radius:5;
}

/*为处理购物车导航的几个按钮设置样式
    控制条上的View Cart按钮、购物车组件中的View Cart按钮、Continue Shopping按钮
    设置悬停和按下时的样式*/
.cartButton:over {
	chromeColor:#F3FBF4;
}

.cartButton.down {
	chromeColor:#C2CBE7;
}

-------------------------------------------------------------------------------
FlexGrocerButtonSkin.mxml对应用程序中所有的button进行样式定制

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

<!--
      该皮肤为所有Spark按钮应用皮肤
-->

<!--- The default skin class for the Spark Button component.  

       @see spark.components.Button
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import spark.components.Group;
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            
            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  
            
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;
                                 
        ]]>        
    </fx:Script>
        
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF" 
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#f3fbf4" 
                                 color.over="#dfecdc" 
                                 color.down="#6aa95f" 
                                 alpha="0.85" />
                <s:GradientEntry color="#d4f1d8" 
                                 color.over="#dfecdc" 
                                 color.down="#dfecdc" 
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:SolidColorStroke color="#8eb394" alpha="1"
								alpha.disabled=".5"/>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
    
</s:SparkButtonSkin>

FlexGrocerApplicationSkin.mxml作为原生Spark的Application创建皮肤
在控制条上方添加一个矩形区域，放置公司的宣传语

<?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 the Spark Application component. 
        
       @see spark.components.Application
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
	<fx:Metadata>[HostComponent("FlexGrocer")]</fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, 
                unscaledHeight:Number) : void
            {
                bgRectFill.color = getStyle('backgroundColor');
                bgRectFill.alpha = getStyle('backgroundAlpha');
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
    
    <!-- fill -->
    <!--- 
        A rectangle with a solid color fill that forms the background of the application.
        The color of the fill is set to the Application's backgroundColor property.
    -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
        
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <!--- 
            @private
            Application Control Bar
        -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >

            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
               <s:stroke>
                   <s:SolidColorStroke color="#defcdc"/>
               </s:stroke>
            </s:Rect>

            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="32" bottom="2" >
               <s:fill>
                    <s:SolidColor color="#ffffff"/>
               </s:fill>
            </s:Rect>

            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="#dfecdc" />
                </s:fill>
            </s:Rect>
			
			<!-- 自定义矩形框，用于放置公司的宗旨 -->
			<s:Rect x="0" y="0" left="0" right="0" height="32">
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="#439235" alpha="1"/>
						<s:GradientEntry color="#2e6244" alpha="1"/>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
			
			<!-- 公司宗旨-->
			<s:Label text="The Freshest,Easiest Way to Buy Groceries"
					 right="10" top="10"
					 color="#ffffff"
					 fontSize="20"/>

            <!-- layer 3: control bar -->
            <!--- @copy spark.components.Application#controlBarGroup -->
            <s:Group id="controlBarGroup" left="0" right="0" top="32" 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>

        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

    </s:Group>

</s:Skin>
                            

主应用程序中在<s:Application>中通过skinClass属性应用皮肤

<?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"
			   creationComplete="handleCreationComplete(event)" 
			   xmlns:views="views.*" 
			   xmlns:services="services.*" 
			   xmlns:cart="cart.*"
			   minWidth="1024"
			   skinClass="skins.FlexGrocerApplicationSkin">
......