`
WonLen
  • 浏览: 51144 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

[Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(二)

    博客分类:
  • 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)可以通过继承SparkSkinSkinskinClass的方式很简单的实现自定义组件的皮肤。
希望对大家有所帮助:)

分享到:
评论

相关推荐

    FLEX4的皮肤skin

    SparkSkin是Flex 4(Gumbo)引入的主要皮肤类,位于`spark.skins`包下。它是一个Group类型的容器,这意味着你可以直接添加图形元素和子组件来构建皮肤。SparkSkin是所有Spark可视组件外观的基础,涵盖了mx.spark包中...

    Flex4皮肤资料

    在Flex SDK 4 (Gumbo)中,自定义一个Button的样式可以通过继承SparkSkin或Skin并添加特定内容来实现。下面是一段具体的示例代码: ```xml &lt;s:SparkSkin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx=...

    flex-sdk-4.5.0.20967.zip

    2. **Gumbo CSS3样式支持**:引入了更强大的样式系统,支持类似于CSS3的属性,使界面设计更加灵活。 3. **移动设备支持**:Flex 4.5开始支持Adobe AIR for mobile,使得开发者可以创建跨平台的移动应用。 4. **...

    Flex3与flex4的区别

    Flex4,其代号为Gumbo,是在Flex3的基础上进行了重大升级,旨在改进用户体验和开发效率。下面将详细探讨Flex4与Flex3在组件架构、布局管理、状态使用、效果实现以及迁移过程中的关键差异。 ### 组件和外观架构 ...

    Flash.Builder.4.&.Flex.4 Flex4

    2. **Flex 4**:Flex 4,又称为Gumbo,是Flex框架的一个重大更新。它引入了全新的Skinning和Component架构,使得开发者可以更加灵活地定制UI组件,创建出更具视觉冲击力的应用。Spark组件库取代了原有的MX组件,带来...

    (十八)Flex4_自定义ActionScript组件

    标题中的"(十八)Flex4_自定义ActionScript组件"表明我们即将探讨的是关于Flex4框架中如何创建和使用自定义的ActionScript组件。Flex是一个基于Adobe Flash Player或Adobe AIR运行时的开源框架,用于构建富互联网应用...

    Flex 4的十大变化

    Flex 4,也被称为Gumbo,是Adobe Flex框架的一个重大更新,它引入了许多关键变化以提升RIA(Rich Internet Applications)的开发效率和用户体验。以下是Flex 4中的十大变化的详细说明: 1. **Adobe Catalyst集成**...

    [Flash Builder 4 and Flex 4 Bible] Flex 4 宝典 配套代码

    Flex 4,也被称为Gumbo,是Adobe Flex框架的一个重大更新,它引入了许多新特性,提高了开发人员构建富互联网应用程序(RIAs)的效率。Flash Builder 4是用于开发Flex和ActionScript应用的主要集成开发环境(IDE),...

    Flex4 经典帮助文档

    Flex4引入了ActionScript4的一些概念,虽然最终发布的Flex SDK仍然基于ActionScript3,但AS3的类库和语法得到了扩展,支持了元数据、强类型和更丰富的错误处理机制。这使得代码更易于维护和调试,也提高了开发效率。...

    Flex4权威指南源代码

    4. **Gumbo**:Flex 4的早期代号,它引入了新的皮肤层(Skinning)和样式(Styling)机制,使得开发者可以更自由地定制组件外观,而无需深入到组件内部代码。 5. **Flex Builder**:Adobe的IDE,为Flex 4开发提供了...

    flex4组建以及DEMO实例.安装序列号

    Spark组件基于Flex4的图形渲染引擎——Gumbo,允许开发者自定义组件外观和行为,提供了更丰富的UI设计可能性。例如,Button、Label、Accordion、TabNavigator等都是常用的Spark组件,它们可以通过MXML或ActionScript...

    Flex4学习资料

    Flex4相较于之前的版本,主要改进在于更强大的Flex SDK,引入了全新的Spark组件架构,这允许开发者更好地控制应用的外观和行为。Spark组件模型比以往的MX组件模型更加灵活和可定制化,允许设计者通过CSS样式和MXML来...

    Using_Flex_4.rar

    Spark组件支持自定义样式和主题,提供了更好的性能和更丰富的用户界面。 4. **Gumbo架构**:Flex 4的核心是Gumbo架构,它对Flex 3的组件模型进行了彻底的重构,允许开发者创建可扩展的、高性能的组件。Gumbo引入了...

    Flex 4 权威指南 代码

    Spark组件相比于早期的MX组件,更加轻量级,设计时更注重组件的外观与行为分离,使得开发者可以更容易地自定义组件样式。例如,通过皮肤和状态管理,开发者可以轻松改变组件的视觉呈现,以适应不同应用场景或品牌...

    Flex4实战源代码

    6. **States和Layouts**:Flex4中的状态管理(States)和布局管理(Layouts)功能也得到了加强,使得开发者能更方便地管理组件的不同状态和容器内的元素布局。 7. **高级动画支持**:Flex4提供了一个全新的动画框架...

    flex4原生扩展应用(Android)

    Flex4引入了全新的图形渲染引擎(Gumbo),提供了更强大的布局管理器和组件设计,使得开发者能够创建更复杂的用户界面。 2. ActionScript 3 (AS3):AS3是Flash和Flex的主要编程语言,具有面向对象的特性,支持类、...

    flex 4 in action (英文版)

    Flex 4是Adobe Flex的一个重要版本,它引入了重大的改进和新特性,包括全新的Flex SDK、更强大的图形和动画系统以及更加灵活的组件架构。 1. **Flex SDK**:Flex SDK是开发Flex应用的基础,它包含了编译器、库和...

    flex4 testdrive 下载地址

    1. **Flex 4架构**:了解Flex 4的Spark和Gumbo架构,包括新的组件模型、样式系统和数据绑定改进。 2. **ActionScript 3.0**:掌握ActionScript的基础,它是Flex的主要编程语言,与Flex 4的API交互。 3. **MXML**:...

    使用Flex4.5开发Android应用程序

    在Flex 4.5中,MXML更加灵活,可以方便地创建自定义组件。 五、Spark组件和移动优化 Spark组件库是Flex 4.5的一大亮点,它提供了一套全新、轻量级且可自定义的UI组件,如ViewStack、Accordion等。这些组件针对移动...

    Flex4_Tutorials中文版

    4. **Graphical Layout System (Gumbo)**:Flex 4引入了全新的图形布局系统,称为Gumbo,它基于Flex Box布局模型,提供了更灵活的布局管理,能够更好地处理动态内容和不同屏幕尺寸的适配。 5. **Effects and ...

Global site tag (gtag.js) - Google Analytics