- 浏览: 50994 次
- 性别:
- 来自: 大连
最新评论
-
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 1223详细请看:http://www.k-zone.cn/zblog ... -
Kenshin走进哈工程
2009-11-18 09:00 1044详细请看:http://www.k-zone.cn/zblog ... -
Adobe Flex
2009-11-10 08:21 1140详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder Beta 2 and Flash Catalyst Public Beta 2 download
2009-10-09 10:48 1108详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder Beta 2 serial number(sn)
2009-10-09 10:47 1315详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Adobe BrowserLabe
2009-09-03 08:07 1127详细请看:http://www.k-zone.cn/zblog ... -
[Flex]构建基于Flex技术的Blog程序(一)
2009-09-01 08:08 2074详细请看:http://www.k-zone.cn/zbl ... -
[Flex]用编程的方式来写CSS - LESS的应用(一)
2009-08-07 11:17 1215详细请看:http://s.k-zone.cn/less1 ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc MXML应用篇
2009-08-06 14:18 1476详细请看:http://s.k-zone.cn/asdoc3上 ... -
http://www.k-zone.cn/zblog/post/silvergreen.html
2009-07-31 15:31 1071详细请看:这是完全基于Flex SDK 4(Gumbo)基础上 ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc Tags参数篇
2009-07-30 17:32 1269详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - Flash Builder 4配置篇
2009-07-29 10:07 1110详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版
2009-07-27 08:04 975详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版
2009-07-27 08:02 1153详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)浅析SDK 4默认的Spark样式与Halo样式
2009-07-19 10:10 940详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(二)
2009-07-16 13:07 1110详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(一)
2009-07-15 18:12 1393详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder 4 编辑器配色方案 - 黑色系
2009-07-02 20:36 1820详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(一)
2009-06-30 09:38 812在Flex SDK 4(Gumbo)新增加了一个包:spark ... -
[RIA]HTML5怎么就成了RIA“杀手”?
2009-06-25 13:27 2150详细请看:http://www.k-zone.cn/zbl ...
相关推荐
SparkSkin是Flex 4(Gumbo)引入的主要皮肤类,位于`spark.skins`包下。它是一个Group类型的容器,这意味着你可以直接添加图形元素和子组件来构建皮肤。SparkSkin是所有Spark可视组件外观的基础,涵盖了mx.spark包中...
在Flex SDK 4 (Gumbo)中,自定义一个Button的样式可以通过继承SparkSkin或Skin并添加特定内容来实现。下面是一段具体的示例代码: ```xml <s:SparkSkin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx=...
2. **Gumbo CSS3样式支持**:引入了更强大的样式系统,支持类似于CSS3的属性,使界面设计更加灵活。 3. **移动设备支持**:Flex 4.5开始支持Adobe AIR for mobile,使得开发者可以创建跨平台的移动应用。 4. **...
Flex4,其代号为Gumbo,是在Flex3的基础上进行了重大升级,旨在改进用户体验和开发效率。下面将详细探讨Flex4与Flex3在组件架构、布局管理、状态使用、效果实现以及迁移过程中的关键差异。 ### 组件和外观架构 ...
2. **Flex 4**:Flex 4,又称为Gumbo,是Flex框架的一个重大更新。它引入了全新的Skinning和Component架构,使得开发者可以更加灵活地定制UI组件,创建出更具视觉冲击力的应用。Spark组件库取代了原有的MX组件,带来...
标题中的"(十八)Flex4_自定义ActionScript组件"表明我们即将探讨的是关于Flex4框架中如何创建和使用自定义的ActionScript组件。Flex是一个基于Adobe Flash Player或Adobe AIR运行时的开源框架,用于构建富互联网应用...
Flex 4,也被称为Gumbo,是Adobe Flex框架的一个重大更新,它引入了许多关键变化以提升RIA(Rich Internet Applications)的开发效率和用户体验。以下是Flex 4中的十大变化的详细说明: 1. **Adobe Catalyst集成**...
Flex 4,也被称为Gumbo,是Adobe Flex框架的一个重大更新,它引入了许多新特性,提高了开发人员构建富互联网应用程序(RIAs)的效率。Flash Builder 4是用于开发Flex和ActionScript应用的主要集成开发环境(IDE),...
Flex4引入了ActionScript4的一些概念,虽然最终发布的Flex SDK仍然基于ActionScript3,但AS3的类库和语法得到了扩展,支持了元数据、强类型和更丰富的错误处理机制。这使得代码更易于维护和调试,也提高了开发效率。...
4. **Gumbo**:Flex 4的早期代号,它引入了新的皮肤层(Skinning)和样式(Styling)机制,使得开发者可以更自由地定制组件外观,而无需深入到组件内部代码。 5. **Flex Builder**:Adobe的IDE,为Flex 4开发提供了...
Spark组件基于Flex4的图形渲染引擎——Gumbo,允许开发者自定义组件外观和行为,提供了更丰富的UI设计可能性。例如,Button、Label、Accordion、TabNavigator等都是常用的Spark组件,它们可以通过MXML或ActionScript...
Flex4相较于之前的版本,主要改进在于更强大的Flex SDK,引入了全新的Spark组件架构,这允许开发者更好地控制应用的外观和行为。Spark组件模型比以往的MX组件模型更加灵活和可定制化,允许设计者通过CSS样式和MXML来...
Spark组件支持自定义样式和主题,提供了更好的性能和更丰富的用户界面。 4. **Gumbo架构**:Flex 4的核心是Gumbo架构,它对Flex 3的组件模型进行了彻底的重构,允许开发者创建可扩展的、高性能的组件。Gumbo引入了...
Spark组件相比于早期的MX组件,更加轻量级,设计时更注重组件的外观与行为分离,使得开发者可以更容易地自定义组件样式。例如,通过皮肤和状态管理,开发者可以轻松改变组件的视觉呈现,以适应不同应用场景或品牌...
6. **States和Layouts**:Flex4中的状态管理(States)和布局管理(Layouts)功能也得到了加强,使得开发者能更方便地管理组件的不同状态和容器内的元素布局。 7. **高级动画支持**:Flex4提供了一个全新的动画框架...
Flex4引入了全新的图形渲染引擎(Gumbo),提供了更强大的布局管理器和组件设计,使得开发者能够创建更复杂的用户界面。 2. ActionScript 3 (AS3):AS3是Flash和Flex的主要编程语言,具有面向对象的特性,支持类、...
Flex 4是Adobe Flex的一个重要版本,它引入了重大的改进和新特性,包括全新的Flex SDK、更强大的图形和动画系统以及更加灵活的组件架构。 1. **Flex SDK**:Flex SDK是开发Flex应用的基础,它包含了编译器、库和...
1. **Flex 4架构**:了解Flex 4的Spark和Gumbo架构,包括新的组件模型、样式系统和数据绑定改进。 2. **ActionScript 3.0**:掌握ActionScript的基础,它是Flex的主要编程语言,与Flex 4的API交互。 3. **MXML**:...
在Flex 4.5中,MXML更加灵活,可以方便地创建自定义组件。 五、Spark组件和移动优化 Spark组件库是Flex 4.5的一大亮点,它提供了一套全新、轻量级且可自定义的UI组件,如ViewStack、Accordion等。这些组件针对移动...
4. **Graphical Layout System (Gumbo)**:Flex 4引入了全新的图形布局系统,称为Gumbo,它基于Flex Box布局模型,提供了更灵活的布局管理,能够更好地处理动态内容和不同屏幕尺寸的适配。 5. **Effects and ...