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

[Flex]Flex SDK 4(Gumbo)浅析SDK 4默认的Spark样式与Halo样式

    博客分类:
  • Flex
阅读更多

详细请看:http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin-4.html
通过《Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin》这三篇文章,我们可以得到一个结论:Spark组件和Halo组件是可以共享、公用一套皮肤的。
本篇文章,让我们分析一下Flex SDK 4(Gumbo)里面的默认皮肤式样(主要是Spark组件和Halo组件)。

通过分析Flex SDK 4(Gumbo)默认的皮肤,有助于我们理解、学习如何使用SparkSkinSkin等方式制作皮肤。

下图所示了全部的Flex SDK 4(Gumbo)CSS样式:


sdks\4.0.0\frameworks\themes目录下面的内容就是Flash Builder 4 新增的主题(theme)样式所在的位置。
包括:AeonGraphical、HaloHaloClassic、Ice、Institutional、Smoke、SparkWireframe、Wooden等主题。
我们比较常用的是:HaloHaloClassicSpark这三种主题样式。

在\sdks\4.0.0\frameworks\projects如下的三个文件夹:
halohaloclassicsparkskinswireframe这四个文件夹里面的内容是对应theme文件中四种样式的源代码。

在\sdks\4.0.0\frameworks\projects下面有一个叫做sparkskins的文件夹,它里面的内容做什么的呢?仔细看一下其中的路径:

sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark
通过这个路径(mx\skins)就可以看出这个文件夹中的内容是关于Halo组件的皮肤文件。

sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark包括如下的文件:
AccordionHeaderSkin.mxml、BorderSkin.mxml、ButtonBarFirstButtonSkin.mxml、ButtonBarLastButtonSkin.mxml、ButtonBarMiddleButtonSkin.mxml
.........


我们随便打开一个,例如ButtonSkin.mxml。
<?xml version="1.0" encoding="utf-8"?>
 <!--
 ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The Spark skin class for the Halo Button component. -->
<local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:local="mx.skins.spark.*" minWidth="21" minHeight="19"  alpha.disabled="0.5">
...............................................................................................................................................................

看着是不是很眼熟?“The Spark skin class for the Halo Button component”说明这是Spark Skin应用于Halo组件的皮肤文件。
不过有一个有意思的地方,我在sdks\4.0.0\里面没有找到关于这套组件相应的CSS文件,也就是当我们使用Flex SDK 4(Gumbo)里面的Halo组件时,并没用使用
sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark里面的内容作为默认皮肤。

Flex SDK 4(Gumbo)里面的Halo组件默认使用了sdks\4.0.0\frameworks\projects\halo\src\mx\skins\halo下面的皮肤,也就是用传统方式制作的皮肤。

总结一下,比较重要的三套皮肤所在的位置:
Spark组件默认皮肤的位置:
sdks\4.0.0\frameworks\projects\flex4\src\spark\skins\default

Halo组件默认皮肤的位置:
sdks\4.0.0\frameworks\projects\halo\src\mx\skins\halo

Spark skin for Halo皮肤的位置:
sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark

那么我们如何使用Spark skin for Halo皮肤呢?请看以下代码:
<fx:Style>
Button {
     skin: ClassReference("mx.skins.spark.ButtonSkin");
}
</fx:Style>
<mx:Button label="我是halo组件" />

其中引入的位置:mx.skins.spark.ButtonSkin,而mx.skins.spark.*包里面的内容对应了sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark。 

以上就是关于Flex SDK 4(Gumbo)里面默认的一些皮肤,希望对大家有所帮助。

分享到:
评论

相关推荐

    Flex3与flex4的区别

    此外,Flex4中MX组件的默认主题已更改为Spark主题,这可能会影响应用程序的外观和感觉。不过,Flex4仍然保留了Flex3的Halo主题,可以通过设置编译参数来恢复Flex3的外观。 ### 总结 Flex4与Flex3之间的主要区别...

    flex-sdk-4.5.0.20967.zip

    1. **Spark组件模型**:Flex 4引入了Spark组件模型,提供了一套全新的组件设计和实现,强调了外观和行为的分离,增强了组件的可定制性。 2. **Gumbo CSS3样式支持**:引入了更强大的样式系统,支持类似于CSS3的属性...

    Flex 4的十大变化

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

    Using_Flex_4.rar

    3. **Spark组件架构**:Flex 4引入了全新的Spark组件架构,相较于Flex 3的 Halo 组件,Spark组件更注重设计模式和组件重用。Spark组件支持自定义样式和主题,提供了更好的性能和更丰富的用户界面。 4. **Gumbo架构*...

    Flex4 经典帮助文档

    在Flex4中,最重要的变化之一是引入了Spark组件模型,它替代了原有的 Halo 组件模型。Spark组件模型提供了更现代、可自定义的设计,允许开发者创建更加美观且交互性更强的用户界面。Spark组件库包括了一系列基本和...

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

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

    Flex4学习资料

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

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

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

    Flex4权威指南源代码

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

    Flex4_Tutorials中文版

    1. **Flex 4概述**:Flex 4引入了全新的Spark组件模型,与之前的 Halo 组件相比,Spark组件更加轻量级,可定制性更强,设计时支持皮肤和样式分离,极大地提高了UI设计的灵活性。此外,Flex 4还引入了ActionScript ...

    FLEX4的皮肤skin

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

    flex 4 in action (英文版)

    2. **Spark Components**:Flex 4引入了一套全新的组件库——Spark Components,与传统的 Halo Components 相对。Spark组件以其灵活性、可定制性和高性能而著称,支持自定义样式和皮肤,使得开发者可以创建独特的...

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

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

    Flex 4 语言参考手册(英文)(2009-06-24 CHM版)

    1. **Spark组件模型**:与Flex 3中的 Halo 组件不同,Flex 4引入了Spark组件模型,它基于CSS样式和MXML组件设计,提供了更高级别的定制性和视觉表现力。 2. **ActionScript 3.0强化**:Flex 4基于ActionScript 3.0...

    Flex4实战源代码

    1. **组件体系结构的改变**:Flex4引入了Spark组件架构,与之前的 Halo 组件架构并行存在。Spark组件更加模块化,允许开发者自定义组件样式和行为,提供了更好的性能和可扩展性。 2. **Skinning和Styling**:在Flex...

    flex4 testdrive 下载地址

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

    Flex 4 权威指南 代码

    总的来说,Flex 4是一个强大且灵活的RIA开发工具,其Spark组件模型、Gumbo架构和Stage3D等特性,为开发者提供了构建高质量、高性能Web应用的可能性。配合权威指南,无论是初学者还是有经验的开发者,都能从中...

    Flex4Cookbook

    1. **Spark组件体系**:Flex 4引入Spark组件代替了原来的 Halo 组件,这些组件设计更为灵活,允许开发者自定义样式和行为。书中会详细介绍如何使用和定制Spark组件,如Button、Label、Canvas等。 2. **MXML与...

    Flex4 Login DEMO project

    1. **Flex 4框架**:Flex 4,又称为Gumbo,是Adobe Flex SDK的第四个主要版本。它引入了全新的Spark组件模型,与原有的MX组件模型并存。Spark组件设计更为灵活,允许开发者自定义外观和行为,同时提供了更好的性能...

    cairngorm2.2.1 与 flex4的集成. error错误解决

    Flex 4,也称为Gumbo,是Adobe Flex SDK的一个重大更新,引入了Spark组件模型和FXG图形格式,为开发者提供了更多的设计自由度和性能提升。 集成Cairngorm 2.2.1与Flex 4时,首先需要确保你已经正确安装了Flex ...

Global site tag (gtag.js) - Google Analytics