Flex学习笔记-皮肤

1文件结构 MXML应用程序 index.mxml

皮肤文件 components.button.skin.btnSkin1.mxml  皮肤文件的组件随便引用了spark.components.Button

 

2

index.mxml代码

<?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" backgroundColor="#00C955">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <s:TileGroup x="122" y="53" width="500" height="500" orientation="columns">
        <s:Button label="Flex4 一个简单的默认按钮" />
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="#ccaacc"
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="haloOrange"
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="yellow"
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="haloGreen"
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="haloBlue"
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="#000000"
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" 
                  skinClass="components.button.skin.btnSkin1"/>
        <s:Button label="Flex4 一个简单的按钮皮肤" chromeColor="#ffffff"
                  skinClass="components.button.skin.btnSkin1"/>
    </s:TileGroup>
    
</s:Application> 

3 

btnSkin1.mxml 

<?xml version="1.0" encoding="utf-8"?>
<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="40" minHeight="23" 
                   alpha.disabled="0.5">
    
    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var bgColor:uint;
            
            protected override function initializationComplete():void
            {
                bgColor=hostComponent.getStyle("chromeColor");
                useChromeColor = false;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
    
    <!-- 按钮的基本状态 -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <!-- 附件一个矩形,最外层-->
    <s:Rect id="shadow" left="0" right="0" top="0" bottom="0" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="{bgColor}" 
                                 color.down="0xff0033"
                                 alpha.down="0.5" />
                <s:GradientEntry color="0xFFFFFF" 
                                 color.down="0xff0033" 
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- 附件矩形-->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                                 color.over="0xBBBDBD" 
                                 color.down="0xff0033" 
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                                 color.over="0x9FA0A1" 
                                 color.down="0xff0033" 
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- 附件矩形 弱色显示-->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="{bgColor}" alpha="0.0627" />
                <s:GradientEntry color="0xFFFFFF" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- 附件矩形 高亮显示-->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="{bgColor}"
                                 alpha.over="0.22" 
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- 附件矩形-->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- 附件矩形 鼠标按下,高亮显示-->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xff0033" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0xff0033" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0xff0033" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0xff0033" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0xff0033" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xff0033" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0xff0033" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- 附件矩形-->
    <s:Rect id="border" left="1" right="1" top="1" bottom="1" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" 
                                 alpha="0.5625"
                                 alpha.down="0.6375" />
                <s:GradientEntry color="0xFFFFFF" 
                                 alpha="0.75" 
                                 alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- 文本显示 -->
    <s:Label id="labelDisplay" text="{hostComponent.label}"
             left="12" right="12" top="0" bottom="0" horizontalCenter="0" verticalCenter="0" 
             maxDisplayedLines="0" textAlign="center" verticalAlign="middle">
    </s:Label>
    
</s:SparkButtonSkin>