`
schy_hqh
  • 浏览: 558129 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

(十七)为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">
......
分享到:
评论

相关推荐

    FLEX4的皮肤skin

    通过理解SparkSkin的结构和工作原理,以及如何应用和创建自定义皮肤,开发者能够为Flex应用程序带来独特的视觉风格和交互体验。这不仅增强了用户界面的美观性,也提高了应用程序的可定制性和灵活性。

    Flex 皮肤大全,各种样式的Flex控件皮肤大全

    4. **皮肤大全**:这个集合提供了多样化的皮肤选择,开发者可以根据自己的项目需求选择合适的皮肤,或者作为灵感来源来创建自己的定制皮肤。这些皮肤可能包含多种主题,例如清新、商务、科幻等,以满足不同应用场景...

    flex 经典 皮肤主题

    通过理解Flex项目的结构和皮肤系统的工作原理,我们可以更好地定制和优化应用程序的外观,提升用户体验。无论是使用预设的“经典”主题,还是创建全新的主题,Flex都提供了足够的工具和支持来满足开发者的需求。

    三个Flex的皮肤

    这些皮肤可能包括颜色、字体、边框、按钮样式、滑块样式等各种元素的差异,为Flex应用程序提供多样化的外观。 描述中提到的"三款漂亮的Flex的皮肤主题"意味着我们可以期待三个美观的设计,它们可能各有特色,适合...

    flex4 皮肤

    Flex4 是Adobe公司推出的Flash平台开发工具Flex的一个版本,它主要使用ActionScript3.0语言,为构建富互联网应用程序(RIA)提供了强大的支持。在Flex4中,皮肤(Skin)是一个重要的概念,它允许开发者自定义组件的...

    flex皮肤flex皮肤

    在Flex中,皮肤是可定制的外观组件,允许开发者根据项目需求改变控件的视觉表现。 1. **什么是Flex皮肤?** Flex皮肤是Flex组件的外观表示,它可以改变组件的颜色、形状、大小等视觉元素。通过更换皮肤,开发者...

    flex4自定义组件皮肤

    - Flex4引入了Spark组件模型,相对于MX组件,Spark组件更加强调可定制性,允许开发者更自由地设计组件外观。 2. **创建自定义皮肤** - 使用Flex SDK中的Skin类或MXML来创建自定义皮肤。皮肤通常包含一组显式状态...

    很炫经典的flex 皮肤主题

    在本压缩包中,我们看到的"很炫经典的flex 皮肤主题",这通常指的是开发者为Flex应用设计的一系列视觉样式,以提升用户体验和界面美观度。 在Flex应用中,皮肤(Skin)是一种可替换的外观组件,允许开发者根据需求...

    Flex 定制ItemRender详细解释

    在Flex开发中,...通过以上步骤,我们可以根据项目需求定制各种复杂的ItemRenderers,从而提高Flex应用程序的用户体验和视觉表现力。理解并熟练运用ItemRenderer是提升Flex应用专业性和用户体验的关键技巧之一。

    itunes7 flex的皮肤

    Flex皮肤以其独特的设计风格和高度可定制性,为用户带来了无与伦比的视觉享受。本文将详细介绍Flex皮肤的设计原理、应用方法以及如何通过CSS进行个性化调整。 一、Flex皮肤概述 Flex皮肤是一种基于Adobe Flex技术...

    Flex 4 进度条的皮肤

    本文将深入探讨如何在Flex 4中创建和定制进度条的皮肤。 首先,我们需要了解Flex 4中的皮肤架构。Flex 4引入了Spark组件模型,其中皮肤是组件外观的独立层,可以通过CSS样式或MXML代码进行定义。每个组件都有一个...

    一套flex超炫皮肤

    总的来说,这套flex超炫皮肤为开发者提供了丰富的视觉元素,能够快速定制Flex应用的外观,使得应用程序在视觉上更加吸引人,同时,配合源代码文件,开发者可以深入学习和理解Flex皮肤的实现机制。

    flex 超酷皮肤(黑色的)

    Flex是一种基于Adobe Flash技术的富互联网应用程序(RIA)框架,用于构建交互性强、用户体验良好的桌面和移动应用程序。...在实际开发过程中,不断尝试和定制皮肤,将是提升Flex应用视觉效果的关键步骤。

    flex skin 皮肤资源

    在"KingnareStyle_with_fla_1.05.zip"这个压缩包中,我们可以预见到它包含了一套名为"KingnareStyle"的Flex皮肤资源,版本号为1.05。这个资源可能由多个文件组成,包括FLA文件,这是Adobe Flash Professional使用的...

    VistaRemix flex css 皮肤

    VistaRemix flex css 皮肤则利用CSS的强大功能,提供了可定制的外观和布局,使开发者能够轻松调整颜色、字体、边距等视觉元素,从而实现与Windows Vista操作系统风格相仿的用户体验。 在描述中提到的“使用很方便,...

    经典收藏 Flex 皮肤

    通过更换或定制皮肤,开发者可以改变组件的样式,包括颜色、形状、大小、动画效果等,以达到独特的视觉风格。在Flex中,每个组件都可以有多个皮肤,这使得UI设计具有高度的灵活性和可扩展性。 在Flex中,皮肤可以...

    很炫 flex经典皮肤

    在这个"很炫 flex经典皮肤"的压缩包中,我们可以推测包含了一些为Flex组件定制的视觉样式,也就是皮肤。 在Flex开发中,皮肤是改变组件外观的关键元素,允许开发者通过CSS或自定义图形来调整组件的视觉表现。这些...

    Flex移动皮肤共40页.pdf.zip

    2. **组件与皮肤的关系**:解释Flex中的组件模型,如何为不同类型的组件创建和应用皮肤。 3. **皮肤类和皮肤状态**:讨论皮肤类的结构,如MX和Spark皮肤,以及不同状态(如正常、鼠标悬停、按下等)下皮肤的变化。 ...

    FLEX3程序的皮肤集合

    在Flex3中,皮肤是一种可定制的视觉表现形式,允许开发者根据自己的需求或品牌风格调整控件的外观。通过更换皮肤,开发者可以轻松实现应用程序UI的一致性和个性化,同时保持代码的可维护性。Flex3支持多种类型的皮肤...

Global site tag (gtag.js) - Google Analytics