1.SparkSkin介绍
(1)spark.skins,这个包里面只有一个class:SparkSkin,非美工的程序员可以通过这个class来实现任意自定义控件的样式。
(2)SparkSkin是一个Group类型的容器。(它继承自Group)
(3)全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类
(4)SparkSkin:是全部Spark Class的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
Skin:是SparkSkin的父类,例如ButtonBarSkin就是Skin的子类,如果想要自定义这部分组件的样式,则需要使用Skin。
综上所述,也就是可以使用SparkSkin的地方,我们使用Skin一样可以达到同样的效果。
2.SparkSkin示例
在Flex SDK 4(Gumbo)中,我们只需要将这个button的样式继承与SparkSkin或者Skin,然后在其中加入一些我想要的内容即可,请看以下的代码:
flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> [HostComponent("spark.components.Button ")]
我们可以用以下几个方式:
(1) Button {
skinClass: ClassReference("com.rianote.flex.skin.KButton");
}
(2)
(3)myButton.setStyle( "skinClass", Class( KButton ));
其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class,其作用就是设定当前这个组件的Skin。
主程序:
flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" height="254" width="576">
3.SparkSkin示例解释
自定义Button的mxml的代码解释:
(1) flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
含义:
如果要自定义控件样式,必须要要继承SparkSkin或者Skin,关于二者的区别我在上一篇文章中已经叙述了。
(2) [HostComponent("spark.components.Button ")]
含义:
我们要修改的是spark.components.Button的外形,Flex SDK 4(Gumbo)新增了一个matadata tag:HostComponent.同时,Metadata也由原来的mx:变成了现在的fx,因为namespace发生了改变。
(3)
含义:
定义了Button的四种状态:up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能,用State来描述状态。
在Flex SDK 3的情况下,只能描述UI的不同状态,而在Flex SDK 4(Gumbo)中,又赋予了State描述控件状态的功能。
(4)
含义:
画一个圆形(椭圆形)的图形,而Ellipse也是Flex SDK 4(Gumbo)新增一个包:spark.primitives里面的一个class。
spark.primitives里面定义了一些图形,例如:Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。
(5)
含义:
设定填充的方式(SolidColor)填充颜色值0x131313的颜色,color.over是指鼠标移动上去后的颜色,color.down是鼠标按下时候的颜色。
引申一下,还有color.up、color.display,通过这些值就可以描述四种状态时的颜色。
另外,请注意一下,SolidColor外层必须要有否则会出现错误。而fill的含义是:填充。
(6)
含义:
设定边线的颜色(SolidColorStroke)当然也可以设定诸如:color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部,而stroke的含义:设定边框。
(7)我们在重新看一下这些代码的意义:
含义:
定义一个圆形(因为宽和高相等)然后填充一个0x131313的颜色,并且设定鼠标移上、按下时的颜色值(color.over="#191919" color.down="#ffffff")然后在定义一个边框,设定颜色为0x0c0d0d。
(8)
含义:
上面的代码定义了Button中可以显示文字的部分。注意,id必须设定为labelElement,否则出错。其他的样式可以自行设定了。
主程序:
我们要注意的地方:skinClass,这也是Flex SDK 4(Gumbo)新增加的一个class,专门用来设定当前皮肤的properties,请注意skinClass只适用于Spark包里面的可视化控件。
以上就是这个简单的自定义Button的代码详解了,通过以上的例子,我们在Flex SDK 4(Gumbo)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。
4.halo包使用定义的皮肤
看以下的代码:
.sparkButtonStyle { skin: ClassReference("com.rianote.flex.skin.KButton"); }
再让我们对比一下spark组件的写法:
Button { skinClass: ClassReference("com.rianote.flex.skin.KButton"); }
参考文献:
1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin . http://www.k-zone.cn/zblog/post/flash-builder-gumb o-customer-sparkskin.html 2.Skinning and Components in Flex 4's Spark Architecture
发表评论
-
字符串转化
2012-07-06 09:51 728附加说明 atol()与使 ... -
正则表达式查找匹配的子字符串
2012-07-06 09:44 745今天想使用正则表达式在一个字符串中查找匹配的子字符串,结果 ... -
正则表达式用法及实例
2012-07-06 09:36 7721. 概述 正则表达 ... -
MFC使用Skin++
2012-07-06 09:29 1127一.使用皮肤 1. ... -
javascript使用getElementById会抓到name的问题
2012-07-05 20:44 712今天一个朋友问一个问题。 页面的html代码为: ... -
Android组件
2012-07-03 13:42 553虚心是知识的向导 ... -
Android组件
2012-07-03 12:14 514虚心是知识的向导 ... -
最全的FLEX网站收集分享
2012-07-02 10:06 583一、国外站点 1.资源 类 Adobe Fl ... -
最全的FLEX网站收集分享
2012-07-02 10:06 568一、国外站点 1.资源类 Adobe Fl ... -
flex 绑定资源
2012-07-02 10:06 745Adobe Flex supports several i ... -
QTP
2012-07-02 09:41 643... -
Flash:Flex背景图像实现类似于html平铺拉伸(转)+1
2012-07-01 09:21 765在Flex中如果要实现 ... -
flex与flash的fscommand通信
2012-07-01 09:21 912为了业务需要,最近利用Flex来重写我们公司客户端(c++ ... -
怎么去掉Flex4生成的SWF加载时的进度条
2012-07-01 09:21 617汗~AJAX感太强了 但我要一下子加载 坛子里说了 ... -
怎么去掉Flex4生成的SWF加载时的进度条
2012-07-01 09:20 526汗~AJAX感太强了 但 ... -
Flex学习笔记一(Flex简介)
2012-06-30 11:10 691Flex学习笔记一(Flex简介) 2011年02月01日 ... -
很不错的flex资源
2012-06-30 11:10 675很不错的flex资源 2011年11月15日 重要提醒: ... -
flex初学
2012-06-30 11:10 509flex初学 2011年09月06日 flex定义: ... -
flex as3开源组件
2012-06-30 11:10 918flex as3开源组件 2011年01月21日 ope ... -
VBS脚本
2012-01-19 13:36 618VBS脚本 2011年10月01日 2 取得本机计算机名 ...
相关推荐
FLEX4的皮肤skin.教你如何使用皮肤
skin_Flex_程序皮肤skin_Flex_程序皮肤skin_Flex_程序皮肤skin_Flex_程序皮肤skin_Flex_程序皮肤
Flex4的皮肤文档及demo 可以适合初学者
本人破解的flex一个文件,在adobe网站上发布之后有不少国外的朋友发邮件来获取,为了减少麻烦放在此处提东下载(flex_skin_scribble皮肤缺少的flex皮肤文件)。
KingnareStyle_with_fla_1.05.zip
Flex 4 提供了多种主题皮肤供用户选择来改变整个项目的主题外观,Skin 的设计也将组件的逻辑元素与可视元素明确的区分开来,引入了新的皮肤和组件架构,被称为 Spark,但是 Flex 4 保留了 Flex3 的命名空间和组件库...
Flex 4 提供了多种主题皮肤供用户选择来改变整个项目的主题外观,Skin 的设计也将组件的逻辑元素与可视元素明确的区分开来,引入了新的皮肤和组件架构,被称为 Spark,但是 Flex 4 保留了 Flex3 的命名空间和组件库...
包括 Flex_4_样式与布局小结 ;Flex4_CSS手册 ;FLEX4的皮肤skin ;flex4自定义皮肤详解
flash/flex 的aqua皮肤.类似苹果系统
一本介绍flex图形、皮肤等技术的英文书籍,英语不错的朋友可以看看
讲解AS3写Skin,写的是一个重写list,可以参照
4.3使用皮肤-Creating Skin 28 5.Flex通信 30 5.1 与HTTPService交互 30 5.2 与WEBService交互 30 5.2.1WebService简介 30 5.2.2 Flex访问WebService 32 6 BlazeDS与服务端通信 33 6.1什么是BlazeDS 33 6.2配置...
“施加皮肤”是通过改变或者替换组件的可视化元素来改变组件外观的过程。这些可视化 元素包括位图、SWF 文件,或者包含画矢量图的绘图方法的类文件。 皮肤能够定义组件在不同状态下的全部或部分外观。例如,Button ...
Flex Skins For Flash 官方插件,用Flash开发FLEX组件的皮肤吧!方便!
ActionScript3.0教程(1):开发环境Flex Builder介绍...ActionScript3.0教程(9):使用样式(style)和皮肤(Skin)画笔…………….52 ActionScript3.0教程(一):类的分包处理………………………………….. 58 ........
另一个使用 Bootstrap 4 的 DNN(DotNetNuke)免费开源皮肤。 最新发布的 V00.00.08 - 06/28/2021 安装和定制 您可以像从 Host/Extensions 页面(不要通过 Admin/Extensions 安装)安装任何其他 DNN 扩展一样安装此 ...
emWin 图形库 图形用户界面 版本 5.12 手册修订版 0 emWin V5.12 用户参考手册 © 1997 - 2011 SEGGER Microcontroller GmbH & Co....9 1 emWin 简介...................................................................