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>
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图遍历--广度优先搜索
题目描述 代码框架如下: 输入 第一行输入t,表示有t个测试实例 第二行输入n,表示第1个图有n个结点 第三行起,每行输入邻接矩阵的一行,以此类推输入n行 第i个结点与其他结点如果相连则为1,无连接则 ...
- Spring mvc Json 的正确返回姿势
我们经常都需要封装统一JSON格式 例如以下形式 { “data”:“输出的数据”, “code”:“响应代码”, “msg”:“响应信息” } /** * Created by linli on 2 ...
- C++进阶--拥有资源句柄的类(浅拷贝，深拷贝，虚构造函数)
// Person通过指针拥有string class Person { public: Person(string name) { pName_ = new string(name); } ~Per ...
- Flashbuilder的bug FlashBuilder 1119: 访问可能未定义的属性 on (通过 static 类型
FlashBuilder 1119: 访问可能未定义的属性 on (通过 static 类型 当此问题出现的时候 无论 刷新 清理 注释 删除 乃至重启电脑都无济于事. 解决方法:备份此类到另外一个地 ...
- hadoop-n.x.y.tar.gz、hadoop-n.x.y.tar.gz.asc 、hadoop-n.x.y.tar.gz.md5 、hadoop-n.x.y.tar.gz.mds分别是什么？
不多说,直接上干货! 我这里,以hadoop-2.6.0为例. hadoop-n.x.y.tar.gz.mds,此mds文件是为了检验在下载和移动文件过程中文件的完整性. 通过验证文件的md5值去检验 ...
- vue-router配合vue-cli的实例
前面在说到vue-router的时候,都是用最简单的方式说明用法的,但是在实际项目中可能会有所出入,所以,今天就结合vue脚手架来展示项目中的vue-router的用法. 创建项目 首先需要使用脚手架 ...
- java的应用包的方法，及调用类里面函数的原理
selenium官网下载的selenium包 包导入eclipse 见:https://www.cnblogs.com/kaibindirver/p/10674604.html 代码
- sqlserver in 和 exist 子查询
1 in 子查询 use StudentManageDB go --select StudentName from Students --where StudentId=(select Student ...
- asp.net mvc 5 单元测试小例子
using System.Collections.Generic; using System.Linq; using Microsoft.VisualStudio.TestTools.UnitTest ...
- Unreal Engine 4 Based Materials
转自:http://www.52vr.com/article-862-1.html 材质参数 UE4的材质参数有4个,输入范围都是0~1之间……分别为: Base Color Roughnes ...