Flex4的皮肤skin
2010年11月12日
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
发表评论
-
flex之旅(二)
2012-01-20 01:16 625flex之旅(二) 2010年11月04日 第一章:旅途 ... -
flex之旅 (一)
2012-01-20 01:16 573flex之旅 (一) 2010年11月02日 前言:不为 ... -
创建flex组件
2012-01-20 01:16 566创建flex组件 2010年08月25日 现在,考虑一下 ... -
重写Flex组件
2012-01-20 01:16 386重写Flex组件 2010年08月24日 一、为什么要 ... -
如何点亮qq图标?
2012-01-19 09:05 564如何点亮qq图标? 2011年03月13日 如何点亮q ... -
如何点亮QQ邮箱图标 - 龙 炫家族特权
2012-01-19 09:04 395如何点亮QQ邮箱图标 - 龙 炫家族特权 2010年07月1 ... -
Java NIO API详解
2012-01-17 01:34 680Java NIO API详解 2011年01月22日 ... -
HOOK API 函数跳转详解
2012-01-17 01:34 876HOOK API 函数跳转详解 20 ... -
OSAL API的翻译
2012-01-17 01:34 1087OSAL API的翻译 2010年08月18日 在本网也 ... -
2011年慈溪市小学生计算机程序设计比赛初赛试题
2012-01-17 01:34 9962011年慈溪市小学生计算机程序设计比赛初赛试题 2011年 ... -
linux下服务说明<转>
2012-01-17 01:34 670linux下服务说明 2011年12月13日 我的Cen ... -
电话销售话术 转
2012-01-15 20:20 1042电话销售话术 转 2009年07月30日 精彩的电话 ... -
使用 Socket 通信实现 FTP 客户端程序
2012-01-15 20:20 549使用 Socket 通信实现 FTP 客户端程序 2011年 ... -
关于mojoportal源码中的NeatHtml和Neatupload
2012-01-15 20:20 1000关于mojoportal源码中的NeatHtml和Neatup ... -
小狈.搜集的一些photoshop 教程.软件.下载方法及相关网站 ps软件下载官方网站
2012-01-15 20:20 792小狈.搜集的一些photoshop 教程.软件.下载方法及相关 ... -
8.1 文件上传技术
2012-01-15 20:20 6468.1 文件上传技术 2011年 ... -
oracle数据库互访的问题
2012-01-11 12:23 628oracle数据库互访的问题 2011年03月01日 点 ... -
javaScript 控制textArea输入字数
2012-01-11 12:23 526javaScript 控制textArea输入字数 2011 ... -
linux PS1提示符设置
2012-01-11 12:23 1022linux PS1提示符设置 2011年03月01日 老 ... -
java udp sockect编程(转)
2012-01-11 12:23 740java udp sockect编程(转) 2011年03月 ...
相关推荐
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 简介...................................................................