- 浏览: 49124 次
- 性别:
- 来自: 大连
最新评论
-
zhangshoukai:
任何问题都应该从两个角度看,lz是个心态比较积极的人,希望大家 ...
[RIA]HTML5怎么就成了RIA“杀手”? -
xiangkun:
brightACE 写道在嵌入SWF的html里面加入如下的功 ...
[Flex]Flex编程注意之自动获取焦点、监听全局键盘事件 -
f1120:
2012就世界末日了,还想到2022
[RIA]HTML5怎么就成了RIA“杀手”? -
TonyLian:
2022年??
[RIA]HTML5怎么就成了RIA“杀手”? -
namespace:
关于网页里获得焦点,真是帮了大忙了。
[Flex]Flex编程注意之自动获取焦点、监听全局键盘事件
详细请看:http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin-2.html
上一篇文章介绍了在Flex SDK 4(Gumbo)如何通过代码来设定样式,本篇文章详细说明一下这些代码的含义。
由于上一篇文章已经给出代码,因此在本篇文章中就不再重复了。
自定义Button的mxml的代码解释:
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的外形,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的方式很简单的实现自定义组件的皮肤。
希望对大家有所帮助:)
发表评论
-
Flash Player 10.1 and AIR 2.0 消息汇总
2009-11-18 09:03 1169详细请看:http://www.k-zone.cn/zblog ... -
Kenshin走进哈工程
2009-11-18 09:00 998详细请看:http://www.k-zone.cn/zblog ... -
Adobe Flex
2009-11-10 08:21 1095详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder Beta 2 and Flash Catalyst Public Beta 2 download
2009-10-09 10:48 1050详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder Beta 2 serial number(sn)
2009-10-09 10:47 1274详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Adobe BrowserLabe
2009-09-03 08:07 1066详细请看:http://www.k-zone.cn/zblog ... -
[Flex]构建基于Flex技术的Blog程序(一)
2009-09-01 08:08 1985详细请看:http://www.k-zone.cn/zbl ... -
[Flex]用编程的方式来写CSS - LESS的应用(一)
2009-08-07 11:17 1139详细请看:http://s.k-zone.cn/less1 ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc MXML应用篇
2009-08-06 14:18 1412详细请看:http://s.k-zone.cn/asdoc3上 ... -
http://www.k-zone.cn/zblog/post/silvergreen.html
2009-07-31 15:31 1030详细请看:这是完全基于Flex SDK 4(Gumbo)基础上 ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc Tags参数篇
2009-07-30 17:32 1228详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - Flash Builder 4配置篇
2009-07-29 10:07 1081详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版
2009-07-27 08:04 939详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版
2009-07-27 08:02 1120详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)浅析SDK 4默认的Spark样式与Halo样式
2009-07-19 10:10 895详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(二)
2009-07-16 13:07 1076详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(一)
2009-07-15 18:12 1353详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder 4 编辑器配色方案 - 黑色系
2009-07-02 20:36 1786详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(一)
2009-06-30 09:38 777在Flex SDK 4(Gumbo)新增加了一个包:spark ... -
[RIA]HTML5怎么就成了RIA“杀手”?
2009-06-25 13:27 1963详细请看:http://www.k-zone.cn/zbl ...
相关推荐
Flex gumbo(即FLEX CS4)语言参考。本参考包含了全部ActionScript使用方法。他还包含FLASH Player、AIR下的所有开发原理。
接下来的例子演示了Flex Gumbo中如何通过textJustify样式,设置TextBox文字对齐。
模块封装了谷歌的gumbo,操作方法大概是。取子节点数(句柄)。取子节点(句柄,索引)。以数组的方式来操作,比较简单。这种方式有个好处就是快,因为操作的就是数组,。但是大部分我们经常都是取网页里面的某些...
Gumbo中通过baseColor样式 设置FxHScrollBar背景颜色的实现代码。需要的朋友可以参考下。
【c语言】使用gumbo解析HTML 【c语言】使用gumbo解析HTML
Google 的一款用C语言实现的HTML5解析库,无需任何外部依赖。gumbo_parser
Flex 4 语言参考手册(en) 2009-06-24版本,应该是目前最新的
Gumbo是一个html解析库,本文对该库进行了详细的讲解。 目录: 1 Gumbo概述 2 Gumbo安装 3 示例 4 结构体 5 函数 6 自定义函数
接下来的例子演示了Flex Gumbo中如何通过smooth属性,设置BitmapGraphic对象平滑度。
HTML5解析引擎 OCGumbo ,OCGumbo是一个Objective-C写的HTML5解析引擎,基于Google gumbo开源项...
谷歌开发的HTML5代码解析源码,纯C语言
gumbo-parser, 在纯中,一个HTML5解析库 Gumbo - 一个纯c HTML5解析器。 Gumbo是 HTML5解析算法的实现,它实现为一个纯库,没有外部依赖。 工具用于为其他工具和库( 如 linters 。验证器。模板语言和重构和分析工具)...
C语言 HTML解析器 Gumbo 已编译好的Example,源文件请自行至Gumbo官网下载。本文件只支持linux系统。Windows请自行编译。
PARSER OF HTML DOM COMPLIANT AND EASY TO WRAP
lua-gumbo:移至https:gitlab.comcraigbarneslua-gumbo
Gumbo是谷歌开源的一个纯C编写的HTML解析库。
Gumbo - 2D/3D 应用程序的模式和代码 支持具有 2D/3D 用户界面的富客户端应用程序的工具和概念的“集合”。扩展了“3D User Interfaces with Java 3D”一书中的代码,并包含来自 Meyer Sound 的 RCP 代码的慷慨贡献...
Google Gumbo:C语言实现的HTML5解析库.pdf
p6-gumbo-解析器 这是尝试创建 Perl6 库以使用 gumbo-parser 来解析 HTML5。 在这一点上,它主要是 O(fun) 和不完整的。 这种不完整的部分原因是可用于在 MoarVM 上运行的 Perl6 程序的本机库工具不成熟。 无论如何...