Flex4之皮肤定制
Flex4之皮肤定制【Skin类和Skin类】 博客分类:
第一、关于spark.skin.SparkSkin类的
2.SparkSkin示例 在Flex SDK 4(Gumbo)中,我们只需要将这个button的样式继承与SparkSkin或者Skin,然后在其中加入一些我想要的内容即可,请看以下的代码:
- <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
- <s:SparkSkin
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:fx="http://ns.adobe.com/mxml/2009">
- <s:states>
- <s:State name="up"/>
- <s:State name="over"/>
- <s:State name="down"/>
- <s:State name="disabled"/>
- </s:states>
- <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
- <s:Ellipse width="100%" height="100%">
- <s:fill>
- <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
- </s:fill>
- <s:stroke>
- <s:SolidColorStroke color="0x0c0d0d" />
- </s:stroke>
- </s:Ellipse>
- <s:RichText id="labelElement"
- fontFamily="Myriad Pro"
- fontSize="11"
- color="0xBBBBBB"
- textAlign="center"
- horizontalCenter="0"
- verticalCenter="1"
- width="100%">
- </s:RichText>
- </s:SparkSkin></span>
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x0c0d0d" />
</s:stroke>
</s:Ellipse>
<s:RichText id="labelElement"
fontFamily="Myriad Pro"
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
</s:RichText>
</s:SparkSkin>
我们可以用以下几个方式: (1) Button { skinClass: ClassReference("com.rianote.flex.skin.KButton"); } (2)<Button skinClass="com.rianote.flex.skin.KButton" /> (3)myButton.setStyle( "skinClass", Class( KButton ));
其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class,其作用就是设定当前这个组件的Skin。 主程序:
- <span style="font-size: medium;"><?xml version='1.0' encoding='UTF-8'?>
- <s:Application xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:fx="http://ns.adobe.com/mxml/2009"
- height="254" width="576">
- <fx:Script>
- <![CDATA[
- import com.rianote.flex.skin.Button;
- ]]>
- </fx:Script>
- <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32"
- width="77" label="Button"/>
- </s:Application>
- </span>
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
height="254" width="576">
<fx:Script>
<![CDATA[
import com.rianote.flex.skin.Button;
]]>
</fx:Script>
<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32"
width="77" label="Button"/>
</s:Application>
(2)<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> 含义: 我们要修改的是spark.components.Button的外形,Flex SDK 4(Gumbo)新增了一个matadata tag:HostComponent.同时,Metadata也由原来的mx:变成了现在的fx,因为namespace发生了改变。
(3)<s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> 含义: 定义了Button的四种状态:up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能,用State来描述状态。 在Flex SDK 3的情况下,只能描述UI的不同状态,而在Flex SDK 4(Gumbo)中,又赋予了State描述控件状态的功能。
(4)<s:Ellipse width="100%" height="100%"> </s:Ellipse> 含义: 画一个圆形(椭圆形)的图形,而Ellipse也是Flex SDK 4(Gumbo)新增一个包:spark.primitives里面的一个class。 spark.primitives里面定义了一些图形,例如:Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。
(5)<s:fill> <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/> </s:fill> 含义: 设定填充的方式(SolidColor)填充颜色值0x131313的颜色,color.over是指鼠标移动上去后的颜色,color.down是鼠标按下时候的颜色。 引申一下,还有color.up、color.display,通过这些值就可以描述四种状态时的颜色。 另外,请注意一下,SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是:填充。
(6)<s:stroke> <s:SolidColorStroke color="0x0c0d0d" /> </s:stroke> 含义: 设定边线的颜色(SolidColorStroke)当然也可以设定诸如:color.up、color.display、color.down、color.over的颜色。 同样SolidColorStroke必须在stroke内部,而stroke的含义:设定边框。
(7)我们在重新看一下这些代码的意义: <s:Ellipse width="100%" height="100%"> <s:fill> <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x0c0d0d" /> </s:stroke> </s:Ellipse> 含义: 定义一个圆形(因为宽和高相等)然后填充一个0x131313的颜色,并且设定鼠标移上、按下时的颜色值(color.over="#191919" color.down="#ffffff")然后在定义一个边框,设定颜色为0x0c0d0d。
(8)<s:RichText id="labelElement" fontFamily="Myriad Pro" fontSize="11" color="0xBBBBBB" textAlign="center" horizontalCenter="0" verticalCenter="1" width="100%"> </s:RichText> 含义: 上面的代码定义了Button中可以显示文字的部分。注意,id必须设定为labelElement,否则出错。其他的样式可以自行设定了。
主程序: <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/> 我们要注意的地方:skinClass,这也是Flex SDK 4(Gumbo)新增加的一个class,专门用来设定当前皮肤的properties,请注意skinClass只适用于Spark包里面的可视化控件。 以上就是这个简单的自定义Button的代码详解了,通过以上的例子,我们在Flex SDK 4(Gumbo)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。
4.halo包使用定义的皮肤 看以下的代码: <fx:Style> .sparkButtonStyle { skin: ClassReference("com.rianote.flex.skin.KButton"); } </fx:Style> <mx:Button label="我是halo组件" styleName="sparkButtonStyle"/>
再让我们对比一下spark组件的写法: <fx:Style> Button { skinClass: ClassReference("com.rianote.flex.skin.KButton"); } </fx:Style> <s:Button label="我是spark组件" skinClass="com.rianote.flex.skin.KButton" />
参考文献: 1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin .http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html
- <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
- <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/halo">
- <s:layout>
- <s:BasicLayout/>
- </s:layout>
- </s:Skin></span>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout>
<s:BasicLayout/>
</s:layout> </s:Skin>
- <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
- <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/halo">
- <fx:Metadata>
- [HostComponent("spark.components.Button")]
- </fx:Metadata>
- <s:states>
- <mx:State name="up"/>
- <mx:State name="down"/>
- <mx:State name="over"/>
- <mx:State name="disabled"/>
- </s:states>
- <s:filters>
- <s:DropShadowFilter quality="3"
- alpha="0.5" alpha.over="0.3"
- distance="5" distance.over="15"
- blurX.over="15" blurY.over="15"
- inner.down="true"/>
- </s:filters>
- <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
- <s:fill>
- <mx:LinearGradient rotation="90">
- <mx:entries>
- <mx:GradientEntry color="#0a5c00" ratio="0.00"/>
- <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
- <mx:GradientEntry color="#0a5c00" ratio="0.80"/>
- </mx:entries>
- </mx:LinearGradient>
- </s:fill>
- </s:Rect>
- <s:SimpleText id="labelDisplay" color="#ffffff"
- horizontalCenter="0" verticalCenter="0"
- left="10" right="10" top="5" bottom="5"/>
- <s:layout>
- <s:BasicLayout/>
- </s:layout>
- </s:Skin></span>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>
<s:filters>
<s:DropShadowFilter quality="3"
alpha="0.5" alpha.over="0.3"
distance="5" distance.over="15"
blurX.over="15" blurY.over="15"
inner.down="true"/>
</s:filters>
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
<s:SimpleText id="labelDisplay" color="#ffffff"
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/> <s:layout>
<s:BasicLayout/>
</s:layout>
</s:Skin>
Flex4之皮肤定制的更多相关文章
- WPF,Silverlight与XAML读书笔记第四十六 - 外观效果之三皮肤与主题
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 皮肤 皮肤是应用程序中样式与模板的集合,可以 ...
- easyui自定义皮肤及缺陷修改
引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...
- EUI库 - 皮肤
皮肤分离机制 皮肤分离机制对制作可复用的外观比较有优势 那对于只使用一次的皮肤呢?如果也拆分出两个文件,显然不太方便.这里我们针对单次使用的皮肤定制了内部类的功能 每个组件都有一个chi ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- Android 打造自己的个性化应用(一):应用程序换肤主流方式的分析与概述
Android平台api没有特意为换肤提供一套简便的机制,这可能是外国的软件更注重功能和易用,不流行换肤.系统不提供直接支持,只能自行研究. 换肤,可以认为是动态替换资源(文字.颜色.字体大小.图片. ...
- [阿当视频]WEB组件学习笔记
— 视频看完了,自定义事件还不懂,等完全懂了再更新并完成整篇案例 1. JS分层和组件的种类浏览器底层包括HTML CSS JS(DOM/BOM/Style/Canvas 2D/WebGl/SVG) ...
- 网购的一套UI代码的始末
引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...
- 阿里云Prismplayer-Web播放器的使用
Prismplayer是一套在线视频播放技术方案,同时支持Flash和Html5两种播放技术,可对播放器进行功能配置和皮肤定制.其在线使用文档地址为:https://help.aliyun.com/d ...
随机推荐
- CentOS 7 Squid代理服务器正向代理-传统代理
Squid是Linux系统中最常用的一款开源代理服务软件,主要提供缓存加速和应用层过滤控制的功能,可以很好的实现HTTP.FTP.DNS查询以及SSL等应用的缓存代理 传统代理:普通的代理服务,多见于 ...
- jdk5升级至jdk8框架版本选型
spring-framework-4.3.18.RELEASE 4.3.x+:JDK8 Spring JDK Version Range Spring Framework 5.1.x: JDK 8- ...
- mysql 查询前几条数据
limit是mysql的语法select * from table limit m,n其中m是指记录开始的index,从0开始,表示第一条记录n是指从第m+1条开始,取n条.select * from ...
- Verify_Execute 验证SQL语句执行结果
#region Verify_Execute /// <summary> /// 验证insert.update.delete执行 /// </summary> /// < ...
- HBase Thrift过滤语法
摘抄自hbase ref guide 0.94: 在写本文的时候,hbase ref guide已经更新到1.2及2.0了,但是个人感觉Thrift过滤语法部分写得都没有0.94的好,省掉了examp ...
- java 实现hex文件转换bin保存至内存中
hex 文件的格式,以文件中某一行字符串(16进制)为例: :10 0830 00 020C5D0224B3FFFFFFFFFFFFFFFFFFFF 7E 10,长度,转换成10进制,也就是16B 大 ...
- 编译原理---antlr实践+编译过程理解+课程理解知识点
0.其他说明 0.0编译器分为前.中.后端,课上主要学的是前端.前端又分为词法分析(lexical analysis).语法分析(syntax analysis).语义分析(semantic anal ...
- Python Iterables Iterators Generators
container 某些对象包含其它对象的引用,这个包含其它对象引用的对象叫容器.例如list可以包含int对象,或者由其它数据类型(或数据结构)的对象组成一个list. 对其他对象的引用是容器值的一 ...
- mfc双缓冲绘图
1.要求 在界面加载本地图片并显示,每过100ms改变一张图片显示 2.现象 通过定时器控制CImage,Load,Draw,Destroy,会非常的卡顿.因为Load图片时,会是非常大的数据[所有C ...
- 【转载】SSH协议及其应用
原文作者:阮一峰 链接: http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html http://www.ruanyifeng.com/ ...