Flex学习笔记-皮肤

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

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

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>

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>

Flex学习笔记-皮肤的更多相关文章

CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
Flex学习笔记-时间触发器
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
Flex学习笔记-Vgropu Hgroup 定义的组表单程序。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
Flex学习笔记-自定义菜单的显示细节
icon <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=&qu ...
Flex学习笔记--多层菜单按钮
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
Flex学习笔记-使用MXML和一个AS事件监听器监听事件
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
flex学习笔记使用函数，显示实时更新的标签
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
Flex学习笔记，脚本式验证
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
Flex学习笔记PopUpMenuButton
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

随机推荐

DS图--最小生成树
题目描述根据输入创建无向网.分别用Prim算法和Kruskal算法构建最小生成树.(假设:输入数据的最小生成树唯一.) 输入顶点数n n个顶点边数m m条边信息,格式为:顶点1 顶点2 权值 P ...
DS二叉树--叶子数量
题目描述计算一颗二叉树包含的叶子结点数量. 提示:叶子是指它的左右孩子为空. 建树方法采用“先序遍历+空树用0表示”的方法,即给定一颗二叉树的先序遍历的结果为AB0C00D00,其中空节点用字符‘0 ...
mysql 数据库排序规则
MySQL中的排序规则.在新建MySQL数据库或表的时候经常会选择字符集和排序规则.数据库用的字符集大家都知道是怎么回事,那排序规则是什么呢? 排序规则:是指对指定字符集下不同字符的比较规则.其特征有 ...
Java知识之运算符篇
运算符算术运算符:+.-.*./ 和 %,两个整数相除,结果还是整数. 赋值运算符:=.+=.-=.*=./=.%=.&=.|=.~=.^=.<<=.>>= . &g ...
Springboot监控之二：Spring Boot Admin对Springboot服务进行监控
概述 Spring Boot 监控核心是 spring-boot-starter-actuator 依赖,增加依赖后, Spring Boot 会默认配置一些通用的监控,比如 jvm 监控.类加载.健 ...
百度地图api公交路线，IE下跳转百度地图后中文变成乱码的解决办法
百度开放的公交路线的链接,IE跳转会出现中文变成乱码的问题.如图: //创建InfoWindow function createInfoWindow() { var desDiv = []; desD ...
python: 面向对象:类和对象调用类中的变量和方法
一. 面向对象初识我们在生活中做事都是面向过程的,前面实现一些基本逻辑功能代码也是用面向过程的语句实现的,后来学了函数,把这些功能又装到了函数里.但用面向过程的方法去写程序,只能实现一个功能,我们要 ...
[UE4 ]Is Locally Controlled的局限性
一.在有机器人的游戏中,就不能使用IsLocallyControlled判断.而是要使用这个方法: 二.因为机器人也是属于本地控制的角色.所以不能使用IsLocallyControlled判断是否是本 ...
[UE4]控件模板参数
创建的时候就会变成这样了.
T-SQL 无参数的存储过程的创建和执行
use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery') drop procedure ...

Flex学习笔记-皮肤

Flex学习笔记-皮肤的更多相关文章

随机推荐

热门专题