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

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

阅读更多

详细请看:http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin-3.html
通过上两篇文章我们可以得到一个结论:使用SparkSkinSkin方式设定spark组件的皮肤是非常容易的事情。如果同样的效果在Flex SDK 3里面设定的话,将会是件非常麻烦的事情。
Flex SDK 4(Gumbo)众所周知有两套组件:spark组件和halo组件,那么既然spark组件中的皮肤设定是非常容易的事情,在halo中呢?能否也会像spark组件一样方便?

答案:当然是肯定的。
其原因是:仍旧使用SparkSkinSkin组件来完成自定义皮肤。

先回忆一下在spark组件中自定义皮肤的方法:
1、
Button { 
    skinClass: ClassReference("com.rianote.flex.skin.KButton"); 
}
2、<Button skinClass="com.rianote.flex.skin.KButton" />
3、myButton.setStyle( "skinClass", Class( KButton ));

在spark中,对其设定皮肤我们使用skinClass这个属性。同样在halo包里面,我们应该如何定义这个皮肤呢?

看以下的代码:
<fx:Style>
    .sparkButtonStyle {
         skin: ClassReference("com.rianote.flex.skin.KButton");
    }
</fx:Style>
<mx:Button label="我是halo组件" styleName="sparkButtonStyle"/>

是不是很容易呢?同样对于经常熟悉开发Flex SDK 3的程序员来说,上述代码一点都不陌生。
再让我们对比一下spark组件的写法:

<fx:Style>
Button { 
    skinClass: ClassReference("com.rianote.flex.skin.KButton"); 
}
</fx:Style>
<s:Button label="我是spark组件" skinClass="com.rianote.flex.skin.KButton" />

其实我们仅仅从sparkhalo共用一套自定义皮肤的方式得到一些信息:
Flex SDK 4(Gumbo)虽然在版本兼容上面并不是特别好,但是从这公用自定义皮肤的方式可以看出,Adobe Flex Team在兼容性方面还是花费了很大的力气。

分享到:
评论

相关推荐

    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=...

    Flex3与flex4的区别

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

    flex-sdk-4.5.0.20967.zip

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

    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