Flex4中的皮肤(2): Skin State
在上一篇 中,定义了一个最简单的SkinnableComponent并为其定义了两个Skin。
对于TransitionSkin,需要在enable时有不同的展现方式,这可以通过Skin State实现。
对自定义的SkinnableComponent的修改
首先在组件中定义isEnabled属性:
private var _isEnabled:Boolean = false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled = value; }
然后定义SkinState元标签:
[SkinState("normal")] [SkinState("enable")]
最后需要将属性值和组件状态关联起来,这是通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。
该方法的最初定义如下:
/** * Returns the name of the state to be applied to the skin. For example, a * Button component could return the String "up", "down", "over", or "disabled" * to specify the state. * * <p>A subclass of SkinnableComponent must override this method to return a value.</p> * * @return A string specifying the name of the state to apply to the skin. * * @langversion 3.0 * @playerversion Flash 10 * @playerversion AIR 1.5 * @productversion Flex 4 */ protected function getCurrentSkinState():String { return null; }
在Node中需要覆盖该方法:
override protected function getCurrentSkinState():String { if(isEnabled) return "enable"; return "normal"; }
完整的Node代码如下:
Node.as
package skinsample { [SkinState("normal")] [SkinState("enable")] import spark.components.supportClasses.SkinnableComponent; public class Node extends SkinnableComponent { public function Node() { super(); } private var _isEnabled:Boolean = false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled = value; } override protected function getCurrentSkinState():String { if(isEnabled) return "enable"; return "normal"; } } }
对Skin的修改
Skin中首先需要增加状态的声明:
<s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states>
接下来可以指定Skin元素在哪个状态中出现,默认是在所有状态中出现。XML节点和属性都可以进行指定。
对于XML节点,增加includeIn属性,如:
<s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal" />
对于XML属性,增加 属性名称.状态名称 指定特定状态下的属性值,如:
<s:SolidColor color="0x131313" color.enable="0xff0000" />
完整的Skin代码如下:
TransitionSkin.mxml
<?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" width="400" height="300"> <s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x131313" color.enable="0xff0000" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect> <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/> </s:Skin>
PlaceSkin.mxml
<?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" width="400" height="300"> <s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states> <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Ellipse> </s:Skin>
使用具有状态的组件和Skin
定义好组件和Skin后,就可以使用了:
NodeSample.mxml
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:skinsample="skinsample.*"> <fx:Script> <!--[CDATA[ import skinsample.TransitionSkin; ]]--> </fx:Script> <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/> <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/> <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true"/> </s:WindowedApplication>
运行效果:
转载于:https://www.cnblogs.com/holbrook/archive/2009/10/06/2357375.html
Flex4中的皮肤(2): Skin State相关推荐
- (转)Flex4中的皮肤(2):Skin State
在上一篇 中,定义了一个最简单的SkinnableComponent并为其定义了两个Skin. 对于TransitionSkin,需要在enable时有不同的展现方式,这可以通过Skin State实 ...
- GPU Gems1 - 3 Dawn Demo中的皮肤渲染(Skin in the Dawn Demo)
该篇文章参照浅墨的这篇文章:https://zhuanlan.zhihu.com/p/35974789 Dawn是由NVIDIA创建的,用来介绍GeForce FX产品线的演示程序,它说明如何使用可编 ...
- flex中自定义皮肤的按钮制作
今天聊一下FLEX中自定义皮肤的按钮的制作.首先这是一个按钮皮肤文件: <?xml version="1.0" encoding="utf-8"?> ...
- [转]Flex 中的皮肤
Flex中的皮肤(一) 这里是第一篇,将讲述一下Flex中如何应用UI的皮肤,其实应用UI皮肤不难,你们在使用Flex的过程中是否觉得Flex中自带的皮肤样式不太好看? 或者是想自已做个比较有特色的? ...
- 涨姿势|小众建模软件MakeHuman,如何在混合器中绘制皮肤的纹理(3)
MakeHuman如何在混合器中绘制皮肤的纹理?下面教程快速了解下: 1.要开始纹理绘画项目,我们最好切换到"混合渲染"模式(而不是循环).这不是必需的,但由于各种原因,它更简单, ...
- [教程] Flex中的皮肤
Flex中的皮肤(一) 好久没有写文章了,一直用"忙"来为自已找籍口,其实是懒,不过这个月发生了这么大的事情 5.12让我们每个人都永记心中,看到中国人的团结,看见解放军们志愿者们 ...
- ASP.NET中的Theme和Skin
Theme是允许你定义页面和控件外观的许多属性的集合, 应用这些属性可以在web application中的页面里, 或者是整个web application, 或者是一个服务器上跨越多个web ap ...
- jQueryUI皮肤下载、jQgrid中更换皮肤
jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme.当然,你也 ...
- flex4 中获取Microphone,抑制回声和使用Speex编码音频的方法
flex4 中获取Microphone,抑制回声和使用Speex编码音频的方法,该方法经过本人测试可用. 一.如果你不关心请直接把代码复制,如果想要了解细节的请继续往下看 private functi ...
最新文章
- sql server 2000 数据库。 怎样用sql语句,在没有主键的情况下删除数据库中多条......
- uniapp动态设置style和class样式
- 什么是Python的var_dump()的Python等价物? [重复]
- dram和nand哪个难生产_DRAM与NAND差别这么大,存储之争都争啥
- questasim linux安装包,Ubuntu16.04下Questasim10.7安装(64bit)全攻略
- python回调函数实例详解_Python回调函数用法实例详解
- 正定矩阵(用于SVM的Mercer定理)
- 使用WMS海外仓储系统可以改变仓储管理的哪些方面?
- C++课后习题第五章17
- 儿童智能手表方案/案列/APP/小程序/网站
- visio画图复制粘贴到word_用VISIO画图 复制完之后粘贴到word中为什么只显示下面一部分?...
- Ps修改更换证件照背景色(底色颜色)
- CYCLONEⅡ系列FPGA 总结
- Cloudera Manager 5升级(官方翻译整理,企业级实战验证)
- 8255芯片+8254芯片实现硬延时跑马灯
- 餐饮行业裂变解决方案
- Vue开发仿京东商场app
- 北京机动车“单双”限行:市府温情、市民支持
- Linux-通过LVM对服务器磁盘进行动态扩容
- 成都中科院计算机研究所招聘,2017年中科院成都计算机应用研究所考研复试分数线以及复试通知...
热门文章
- 中点和中值滤波的区别_频谱仪和EMI测试接收机什么区别?安泰维修中心分享
- 理解好内存管理,C语言就不难学了
- C语言项目:扫雷大战精简版
- 三角形周长最短问题_一道三角形周长最小值问题
- python区域找图命令_python读取图片任意范围区域
- 浙江金融职业学院计算机一级,浙江金融职业学院全景-360度,720度,高清全景地图-expoon网展...
- php7 获取数据流,stream_socket_accept()
- 工业轨式 1-16路 4-20MA 模拟量光端机产品介绍
- 【渝粤题库】陕西师范大学200131中国古代文论 作业(专升本)
- 【渝粤题库】国家开放大学2021春2094法理学题目