`

Flex Spark皮肤定制

    博客分类:
  • Flex
 
阅读更多

转自 http://www.cnblogs.com/twaver/archive/2011/07/21/2112824.html

 

 

 

Flex3到Flex4,增加了Spark组件,这是Flex的一次重要升级,基本上组件全部重写了一套,为了保持向下兼容,出现了同一组件两套实现并存的现象,虽然说Spark组件中也可嵌入MX组件,但实际使用常会遇到些小麻烦,例如mx:Tree滚动条异常,透明背景无法监听鼠标事件等等,如果你使用定制的组件,写法稍有不规范,就会出现Spark下显示异常,比如之前定制的TWaver圆角文本输入框就是如此,不得不在Spark下重新实现。

Spark与MX组件的区别

Spark最大的目的或许是方便Adobe兜售它的Flash Catalyst,当然这是个玩笑,Spark组件更加轻量,更易扩展。所有的Flex组件都从UIComponent继承,Spark组件也是如此,只不过它多了一层包装,从SkinnableComponent继承。MX中每个组件对应一个类,在Spark体系中,每个组件对应两个类,一个Component类,一个Skin类,例如按钮组件对应:spark.components.Button和spark.skins.spark.ButtonSkin,这种设计实现了组件行为逻辑与视图呈现的分离,就像将程序员和美工的工作分开一样,这也是MVC思想的产物。
Flex 3与Flex4的区别详见:
Differences between Flex 3 and Flex 4
what is difference in halo and spark in Flex3 and Flex4

Spark组件外观定制

前面提到Flash Catalyst,这就是Adobe提供的组件外观可视化编辑工具,这个工具主要针对美工、设计师,对于习惯于写代码的程序员们也可以使用Flash Builder 4+来定制组件。
回到实际问题,之前我定制的圆角文本输入框在Spark框架下出现了问题,我决定将其改造,使用定制组件Skin的方式实现圆角文本输入框。

定制圆角文本输入框

需求与分析

我的需求很简单,文本框带圆角,其内放个图标,如同mac osx的搜索框。实现思路也很清晰,给矩形增加圆角,再多放个icon,定好位置,做好布局……

定义组件类

开始动手,按Spark组件定制的步骤,先定义组件类,再定义外观类。
组件类描述组件的行为和属性,这里我们定义一个CustomTextInput.as,继承于spark.components.TextInput,组件行为不需要特别定义,这里只是增加两个样式:icon和radius,分别表示图标和圆角半径,而具体的呈现将在Skin类中实现。

 

。。。。。。。。。。。。。。。。。

分享到:
评论

相关推荐

    Flex4 Spark皮肤

    ### Flex4 Spark皮肤详细制作讲解 #### 一、引言 在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的...

    FLEX4的皮肤skin

    在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...

    flex4自定义组件皮肤

    - Flex4引入了Spark组件模型,相对于MX组件,Spark组件更加强调可定制性,允许开发者更自由地设计组件外观。 2. **创建自定义皮肤** - 使用Flex SDK中的Skin类或MXML来创建自定义皮肤。皮肤通常包含一组显式状态...

    flex皮肤flex皮肤

    在Flex中,皮肤是可定制的外观组件,允许开发者根据项目需求改变控件的视觉表现。 1. **什么是Flex皮肤?** Flex皮肤是Flex组件的外观表示,它可以改变组件的颜色、形状、大小等视觉元素。通过更换皮肤,开发者...

    Spark皮肤相关文档

    Spark皮肤机制为开发者提供了高度定制化的界面设计能力,不仅可以改变组件的外观,还能根据组件的不同状态动态调整界面元素。通过遵循上述的最佳实践,开发者可以更加高效地开发出既美观又功能强大的用户界面。同时...

    Flex移动皮肤共40页.pdf.zip

    3. **皮肤类和皮肤状态**:讨论皮肤类的结构,如MX和Spark皮肤,以及不同状态(如正常、鼠标悬停、按下等)下皮肤的变化。 4. **皮肤创建工具**:可能涉及Adobe Flash Builder或其他设计工具,用于创建和编辑Flex...

    经典收藏 Flex 皮肤

    Spark皮肤支持组件分离模型,允许将组件的外观和行为拆分为独立的类。 自定义皮肤通常涉及以下几个步骤: 1. 创建皮肤类:继承自Flex提供的基类,如mx.skins.Halo.Skin或spark.skins.spark.ApplicationSkin。 2. ...

    Flex应用AdvancedDataGrid表头皮肤

    在Flex中,我们可以使用Spark皮肤机制来定制AdvancedDataGrid的表头皮肤。 1. **Spark皮肤机制**:Spark皮肤是Flex 4引入的新特性,允许开发者通过XML和MXML来定义组件的外观。Spark皮肤可以控制组件的每个像素,...

    Flex 4 进度条的皮肤

    本文将深入探讨如何在Flex 4中创建和定制进度条的皮肤。 首先,我们需要了解Flex 4中的皮肤架构。Flex 4引入了Spark组件模型,其中皮肤是组件外观的独立层,可以通过CSS样式或MXML代码进行定义。每个组件都有一个...

    Flex4皮肤资料

    在Flex4中,皮肤(skin)是一种用于控制UI组件外观的设计模式,允许开发者和设计师定制组件的视觉表现,而不必触及组件的核心功能代码。这不仅提高了开发效率,还实现了设计与逻辑的分离,使得UI设计更加灵活且易于...

    Flex help之Flex 皮肤

    总而言之,Flex的皮肤功能为开发者提供了极大的灵活性和控制力,使他们能够创造出符合品牌风格和用户体验需求的定制化用户界面。深入理解并熟练运用Flex皮肤,对于提升Flex应用的视觉质量和用户体验至关重要。通过...

    flex皮肤学习

    2. **Spark Skin**:Spark皮肤是Flex 4引入的新概念,支持更灵活的组件外观定制,它基于组件的状态来改变皮肤的显示。 3. ** Halo Skin**:Halo皮肤是Flex 3时代的皮肤体系,适用于较旧的组件,相对简单,但定制程度...

    Flex皮肤(手绘风格)

    Spark皮肤则是Flex 4引入的新模型,它更加强调组件的分离和可重用性,支持更多的动画效果和自定义程度。 手绘风格的Flex皮肤设计通常会涉及以下几个关键知识点: 1. **图形设计工具**:设计师通常会使用Adobe ...

    Flex4的皮肤文档及demo

    在Flex4中,皮肤定制是UI设计的重要组成部分,它允许开发者根据需求自定义组件的外观和交互效果。本主题主要围绕`SparkSkin`类和`Skin`类展开,这两类在Flex4的皮肤定制中扮演着核心角色。 **SparkSkin介绍** `...

    Flex DropList 皮肤

    皮肤由 MX 或 Spark 组件架构支持,它们提供了不同的外观和行为定制选项。对于 DropList,我们通常会使用 MX Skin,因为它是 MX 控件的一部分,具有更多的自定义选项。 1. **创建皮肤类**: 自定义皮肤的第一步是...

    FLEX3程序的皮肤集合

    在Flex3中,皮肤是一种可定制的视觉表现形式,允许开发者根据自己的需求或品牌风格调整控件的外观。通过更换皮肤,开发者可以轻松实现应用程序UI的一致性和个性化,同时保持代码的可维护性。Flex3支持多种类型的皮肤...

    flex 6款按钮皮肤

    在Flex中,我们可以使用Spark Skin机制来创建自定义按钮皮肤。Spark Skin允许开发者创建XML文件来描述组件的各个部分,包括形状、颜色、大小等。这些皮肤文件通常会以.mxml为扩展名,通过设置不同状态(如normal、...

    flex特效 皮肤

    2. **选择或创建皮肤类**:根据需求,你可以选择Flex提供的内置皮肤类,如 Halo或Spark,或者创建自己的皮肤类。如果要用Delaunay效果,你可能需要自定义一个皮肤类,利用相应的算法实现。 3. **定义皮肤元素**:在...

    flash/flex 的aqua皮肤

    2. **创建自定义皮肤类**:在Flex中,你可以通过继承已有的皮肤类(如 Halo或Spark的Skin类)来创建自己的Aqua皮肤。在新的皮肤类中,你需要覆盖或扩展默认的皮肤元素,如按钮、滑块、进度条等。 3. **应用皮肤**:...

Global site tag (gtag.js) - Google Analytics