flex4自定义皮肤
(注:现在flex4方面的讲解比较少,在网上发现了这么一篇样式的文章还不错,所以贴过来查时方便,也为大家提供一下浏览,呵呵。)
在Flex4新增加了一个包:spark.skins,这个包里面只有一个类:SparkSkin,而我们(非美工的程序员)通过这个class来实现任意自定义控件的样式。
通过上述关系可以得出如下的结论:
1、SparkSkin是一个Group类型的容器。(它继承与Group)
2、是全部Spark类的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类)
注意Skin,这个类是SparkSkin的父类,同时Skin继承与Group。
Skin:
是SparkSkin的父类,例如ButtonBarSkin就是Skin的子类,如果想要自定义这部分组件的样式,则需要使用Skin。
SparkSkin:
是全部Spark类的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
综上所述,用SparkSkin和Skin都可达到同样的效果。
在Flex4中,我们只需要将这个button的样式继承与SparkSkin或者Skin,然后在其中加入一些想要的内容即可,请看以下代码:
<?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="#FFFF00“ color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x00FFFF" />
</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("cn.xuedi.SelfButton");
}
2、myButton.setStyle( "skinClass", Class(cn.xuedi.SelfButton));
3、<Button skinClass="cn.xuedi.SelfButton" />
其中skinClass也是Flex4里面新增加的一个类,其作用就是设定当前这个组件的Skin。
主程序:
<?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"
backgroundColor="#222222" >
<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>
-----------------------------------------------------------------------------------------
以上代码解释:
1、
<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
</s:SparkSkin>
含义:
如果要自定义控件样式,必须要要继承SparkSkin或者Skin。
2、
<fx:Metadata>[HostComponent("spark.components.Button")]></fx:Metadata>
含义:
我们要修改的是spark.components.Button的外形,Flex4新增了一个matadata tag:HostComponent
同时,Metadata也由原来的mx:变成了现在的fx,因为名称空间发生了改变。
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。这是Flex4新增的一种功能,用State来描述状态。
在Flex3的情况下,只能描述UI的不同状态,而在Flex4中,又赋予了State描述控件状态的功能。
4、
<s:Ellipse width="100%" height="100%"></s:Ellipse>
含义:
画一个圆形(椭圆形)的图形,而Ellipse也是Flex4新增一个包:spark.primitives里面的一个类。
spark.primitives里面定义了一些图形,例如:Ellipse、Rect、Path、Line等类。同样根据这些类名就可以得出是做什么用的。
5、
<s:fill>
<s:SolidColor color="#FFFF00" color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
含义:
设定填充的方式(SolidColor)填充颜色值FFFF00的颜色,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="FFFF00" color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#00FFFF" />
</s:stroke>
</s:Ellipse>
含义:
定义一个圆形(因为宽和高相等)然后填充一个0xFFFF00的颜色,并且设定鼠标移上、按下时的颜色值(color.over="#00FF00" color.down="#FF0000")
然后在定义一个边框,设定颜色为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,这也是Flex4新增加的一个类,专门用来设定当前皮肤的properties,请注意skinClass只适用于Spark包里面的可视化控件。
以上就是通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。
下面的表格描述的是 spark.components 包中定义的 Spark容器:
更多 Flex 示例,请访问 http://www.slsay.com
Container |
类型 |
说明 |
Application |
Layout |
应用程序中的第一个容器,其默认布局方式为绝对布局 |
DataGroup |
Layout |
展示其子元素的简单容器,包括数据条目,基于特定的布局。默认布局方式为绝对布局 |
Group |
Layout |
展示其子元素的简单容器,包括图形子元素,基于特定的布局。默认布局方式为绝对布局。Flex定义了两种Group的子类:拥有水平布局的HGroup,以及拥有垂直布局的VGroup。 |
Panel |
Layout |
展示标题栏、标题、边框及其子元素。默认布局方式为绝对布局。 |
SkinnableContainer |
Layout |
可皮肤化的容器,展示其子元素,包括图形子元素,基于特定的布局,支持皮肤。默认布局方式为垂直布局。 |
SkinableDataContainer |
Layout |
可皮肤化的布局,展示其子元素,包括数据条目,基于特定的布局,支持皮肤。默认布局方式为垂直布局。 |
下面的表格描述的是 mx.core 和 mx.components 包中定义的 Spark容器:
Container |
类型 |
说明 |
Accordion |
Navigator |
在一系列的子 Panel 容器中组织信息。这些子 Panel 容器每次只能有一个被激活。 |
Application |
Layout |
应用程序中的第一个容器,其默认布局方式为绝对布局 |
ApplicationControlBar |
Layout |
展示提供全局导航及应用程序命令的构件的容器,可停靠在应用程序的顶部。 |
Box(HBox & VBox) |
Layout |
以统一的行列间隔展示内容。Adobe建议有可能的话尽量使用 Spark 容器来代替 Halo Box 容器。 |
Canvas |
Layout |
必须确定其子元素的位置的时候需要定义的一种容器。Adobe建议有可能的话尽量使用带有BasicLayout属性的Spark容器来代替Halo Canvas容器。 |
ControlBar |
Layout |
在Panel或者TilteWindow容器的底部放置控件的容器。 |
DividedBox(HDividedBox & VDividedBox) |
Layout |
以水平或者垂直的方式放置其子元素的一种容器,跟Box容器很像,除了它能够在其子元素中间插入了可可调节的分隔符。 |
Form |
Layout |
以标准的表格格式来排列其子元素的一种容器。 |
Grid |
Layout |
一行列单元格的方式排列其子元素,就像HTML中的Table。 |
Panel |
Layout |
展示标题栏、标题、边框及其子元素。默认布局方式为绝对布局。Adobe建议如果可能的话尽量使用 Spark Panel,来代替 Halo Panel 容器。 |
TabNavigator |
Navigator |
展示带若干标签的容器,是用户在不同的内容域中进行选择。 |
Tile |
Layout |
定义一个将其子元素按多行或列来排列的布局。Adobe建议如果可能的话尽量使用带TileLayout的Spark容器,来代替Halo Tile容器。 |
TitleWindow |
Layout |
展示一个带有标题栏、标题、边框、关闭按钮及其子元素的弹出式窗口。用户可以任意移动此容器。 |
ViewStack |
Navigator |
定义一个每次只展示一个容器的容器栈。 |
转载于:https://www.cnblogs.com/JPAORM/archive/2011/04/24/2509810.html
flex4自定义皮肤相关推荐
- flex中自定义皮肤的按钮制作
今天聊一下FLEX中自定义皮肤的按钮的制作.首先这是一个按钮皮肤文件: <?xml version="1.0" encoding="utf-8"?> ...
- Flex4之皮肤定制
Flex4之皮肤定制[Skin类和Skin类] 博客分类: RIA-Flex4专栏 FlexAdobeUPFlashUI 第一.关于spark.skin.SparkSkin类的 1. ...
- android 自定义皮肤,Android Studio 自定义皮肤主题和背景
新的一年,新的开始,在这里先祝福大家在新的一年收获多多,多升职,多加薪,代码没BUG. 第一 Android Studio自定义皮肤主题-ColorThemes 寒假期间有人问我, "你代码 ...
- 自定义皮肤进服务器不显示,我的世界自定义皮肤为什么不能显示 我的世界自定义皮肤如何显示...
1.我的世界自定义皮肤为什么不能显示?有的是因为出BUG了,也有的是因为游戏原因,那么怎么才能显示自定义皮肤呢? 2.打开我的世界先不要启动,留在这个页面,选择好你一般启动所用的游戏版本,像我这个就是 ...
- android studio 皮肤,Android Studio 自定义皮肤主题和背景
Android Studio自定义皮肤主题-ColorThemes 最近有人问我, "你代码这是用的什么字体? 看着好舒服", 其实这是用了自定义皮肤主题包,主题包下载网站 htt ...
- 《M8围棋谱》自定义皮肤设计指南
<M8围棋谱>自定义皮肤设计指南 版本:1.0 地址:http://docs.google.com/View?id=dhmvxcsd_3dxpmm6nz 作者:liigo,2009年10月 ...
- 如何制作.Text Blog自定义皮肤
如何制作.Text Blog自定义皮肤 昨天在CSDN上发表了一片关于制作.Text Blog自定义皮肤的文章,对于刚接触.TextBlog的爱好者可以参阅 察看.(老手想必都会了,呵呵,小生在此耍耍 ...
- 有自定义皮肤的计算机,QQ音乐怎么自定义皮肤丨QQ音乐自定义皮肤图解
在使用QQ音乐的时候,突然觉得自己的播放器主页面不是那么精彩怎么办,这时候你可以通过皮肤的更换来解决,那么QQ音乐怎么自定义皮肤,为此电脑系统城为你带来一个详细的QQ音乐自定义皮肤方法介绍,让你可以轻 ...
- android studio修改皮肤,Android Studio 自定义皮肤主题和背景
新的一年,新的开始,在这里先祝福大家在新的一年收获多多,多升职,多加薪, 第一 寒假期间有人问我, "你代码这是用的什么字体? 看着好舒服",其实这是用了自定义皮肤主题包,主题包 ...
最新文章
- SVN、Git设置提交时忽略的文件
- 【数据挖掘】特征相关性挖掘神器-线性非线性关系一键挖掘!
- 微信小程序,引用扩展组件提示“没有找到可以构建的NPM包”
- define 字符串_C++如何使用define关键字以便使用中文编程?
- linux message日志只有4k,linux命令查看日志
- SpringBoot RequestBody ajax提交对象
- 浅谈音视频网络通信中的延时优化
- PHP String
- 剑指Offer - 翻转单词顺序列
- 设置计算机开机密码的步骤,电脑设置开机密码的方法
- pcb板led正负极图形_晶体二极管正负极判断_晶体二极管图形符号
- 版本控制器之-git的简单用法
- 畅想计算机的未来50字,新学期畅想50字
- Android:基于OpenCV实现身份证识别(C++)——移植图像算法
- java geohash_GitHub - GongDexing/Geohash: GeoHash是目前比较主流实现位置服务的技术,用最简洁的Java实现GeoHash算法...
- Ubuntu14.04虚拟机下基本操作(typical安装)
- leetcode中数组问题常用的处理方式
- profile参数详解
- 割补法求阴影部分的面积
- 手把手教你做音乐播放器(一)功能规划
热门文章
- iOS常用的忽略警告
- 1、linux网络服务实验 用PuTTY连接Linux
- 空间数据共享与交换技术现状
- How to recover from root.sh on 11.2 Grid Infrastructure Failed
- 九度OJ 1048:判断三角形类型
- Object型转list,jsonObject型转list方法,亲测可用
- VUE使用lodop实现前端打印页面指定内容
- 帆软报表-通过代码来创建一个模板文件
- flex4.5的DataGrid
- android源码中的ndk,如何在不需要Android操作系统源代码的情况下在Android NDK中创建新的NativeWindow?...