Flex4.5组件：使用Flash Catalyst创建Flex 4 spark主题

原文地址：http://insideria.com/2010/08/creating-themes-in-flex-4.html

Flex 4引入了一种新的皮肤结构，这种新的结构对Flex 4组件中的样式结构进行了一次全面的重新调整，并且使用户可以很容易地改变CSS或者更换组件的皮肤。 在本文中，我将向您简要介绍Spark皮肤和CSS的使用，同时我还会提供使用Flash Catalyst创建Flex 4主题的一些指南。

Flex 4与对新的Spark样式的支持

Flex 2和Flex 3中的SDK仅支持Halo皮肤，而在FLEX 4中，默认情况下使用的皮肤是在Halo皮肤之上构建的Spark皮肤库。 在深入探讨主题创建之前，我想向您做一下关于Spark样式支持的简要介绍。 Flex 4 SDK中的Spark皮肤的样式是采用一种简单的、可预测的、更加连续的风格来进行设计的。 事实上，您可以使用一些全局样式属性来改变一个应用程序的整体外观。 这与使用Halo样式进行设计形成了一个对比，在使用Halo样式进行设计时，您可以使用更多的调节旋钮来调整应用程序的外观，并且这些旋钮中的很多都需要在单个组件或是类型选择器中进行设置。

让我们来看一个例子。 下面的代码按照下面的描述为按钮组件设置了全局继承性样式。

请注意，在Flex 4中，您必须为组件定义命名空间，因为很多组件与已经存在的MX组件共用同一个本地名称，比如Button。 定义命名空间将可以避免名称冲突。

Flex 4 states

Flex 4和Spark库的一个最重要的改变是增加了状态管理的功能，事实上，在Flex 3中，由于您还无法使用状态，Adobe已经通过使用Halo库创建了一些特定的样式，单纯用于设计一个组件的子组件或状态的样式。

例如，对于ComboBox控件，您可以使用headerStyleName来设计样式，或者对于Accordion组件的子组件，您可以使用headerStyleName来设计样式。

随着Spark中高级CSS功能的引入，已经没有必要使用这些类型的样式。 请观察下面这个Spark样式，它使您可以更细致地调整组件的外观，并可以访问这个button组件的over状态，如图所示。

 

1. <s:Application>
2.    
3.     <fx:Style source="Main.css" />
4.    
5.     <s:Panel width="400" height="600" title="Panel title goes here">
6.         <s:TextArea width="200" height="150"  x="22" y="47">
7.             <s:text>
8.                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
9.             </s:text>
10.         </s:TextArea>
11.         <s:Button width="100" label="test"  x="22" y="10"/>
12.        
13.     </s:Panel>
14.    
15. </s:Application>

1. @namespace s "library://ns.adobe.com/flex/spark";
2.  
3. s|Panel #titleDisplay {
4. fontSize: 20;
5. font-style: italic;
6. }
7.  
8. s|TextArea s|ScrollBar {
9. base-color: #DC03FC;
10. }
11.  
12. s|Button:up {
13. color: #0826FF;
14. }

 

CSS styling vs. Skins

作为Flex开发人员，我们经常会使用CSS来定制组件，然而在一些特定的情况下，您无法根据您的需要进行定制化，这时您将需要使用皮肤。 使用CSS样式设计还是使用皮肤与您所想要达到的目的有关。

对于组件的这种新的架构需要预先说明的一点是，对于那些以前您可以通过Halo样式完成的简单的和普通的任务，现在您需要在Spark中通过完全的更换皮肤操作来实现。

每一个Spark组件都是对SkinnableComponent的扩展，而SkinnableComponent又是对UIComponent的扩展。SkinnableComponent是可更换皮肤类组件的基类。 每一个皮肤都是组件的一个子元素，并且像任意一个UIComponent一样有自己的生命周期。 使用下面的方式，您可以在CSS中定义每一个皮肤：

 

1. SomeComponent
2. {
3.       skinClass: ClassReference("component.SomeComponentSkin")
4. }

 

一旦您定义了您自己的皮肤，这个新皮肤就会代替默认的皮肤附加于组件上。 这种新的结构类型使您可以很容易地替换一个Spark组件的皮肤。

Building a Theme using Flash Catalyst

打开Flash Catalyst CS5，然后选择“Create New Project from Design File”（从设计文件创建新项目） > “From Adobe Illustrator AI File…”（从Adobe Illustrator的AI文件创建...），浏览并选择DarkNight.ai文件。这个ai文件由Juan Sanchez.DarkNight.ai提供。您可以保留所有的默认设置，然后点击OK。此时Catalyst会打开正在设计的artwork（作品），如图所示。

显示DarkNight设计视图的Adobe Flash Catalyst

Creating Button component

下一步是将artwork转换为组件。 选择与Button（按钮）相关联的所有图形，然后在HUD (Heads Up Display)（标题显示区域）中选择“Convert Artwork to Component”（转换Artwork为组件）菜单> “Button”（按钮）（如图所示）。

HUD中的Convert Artwork to Component（转换Artwork为组件）菜单。双击这个按钮，您可以看到可用的按钮状态，如图所示。

按钮状态模式 在屏幕中您可以看到所有的按钮状态。您可以改变Catalyst中的某些特定的属性。选择Over状态标记图形（而不是文本），然后在属性文件中选择Appearance（外观） > Blend mode（混合模式）: Luminosity（亮度）。此外，您可以通过在Adobe Illustrator CS5中选择图形，然后右键点击> Edit（编辑）来修改illustrator中的图形。我将在Illustrator中修改该文件，一旦我完成修改，您就可以在illustrator中选择Done（完成）。我所做的操作是改变背景颜色，这样当您将鼠标悬停在这个按钮上时，它将会高亮显示。

显示Apperance（外观）选项的属性窗口

显示保存文件选项的Adobe Illustrator 选择Down状态标记图形（而不是文本），然后修改该图形，这样用户能够注意到这个变化。此时您可以通过使用File（文件） > Run Project（运行项目）来运行这个项目，随后浏览器将会被打开，您可以看到该按钮的不同状态。

项目在浏览器中显示

Creating Text Input Component

选择Text Input（文本输入框）图形，然后在HUD菜单中选择Convert Artwork to Component（转换Artwork为组件）> Text Input（文本输入框）。

转换Artwork为文本输入框

Creating Horizontal Scroll Bar Component

选择图形，然后在HUD菜单中选择Convert Artwork to Component（转换Artwork为组件）> Horizontal Scrollbar（水平滚动条）。

HUD菜单显示了编辑水平滚动条外观的选项，请点击Edit Parts（编辑部件）按钮。

下一步是设置Thumb和Track。 在HUD中，您可以看到Group菜单，并且可以对Thumb和Track进行设置，这些Thumb和Track是选择构成这些组件的图形时所需要的，然后点击那个复选框。

编译并运行该项目，然后您将可以在浏览器中看到我们所创建的应用并使用这些组件。 通过选择File(文件)>Save as DarkNight.fxp（另存为DarkNight.fxp文件）来保存项目。

Import FXP into Flash Builder

该项目被保存为FXP类型，Flash Builder 4可以识别这种类型的文件，并且允许导入FXP项目。 打开Flash Builder 4，选择File（文件） > Import Flex Project (FXP)...（导入Flex项目（FXP）...），浏览并选择DarkNight.fxp，然后选择Finish（完成）。

Adjust Flash Catalyst generated code

在使用Flach Catalyst代码之前我们经常需要进行一些微调。 Flash Catalyst生成的代码使用硬编码的x、y坐标、宽度或高度值来布置元素，然而它并没有考虑到那些需要重新调整尺寸的组件的其它用法。 由于我们正在创建一个主题，因此我们需要适当地调整组件的尺寸。 我们所需要做的是去找到包含这些硬编码的x、y坐标值、宽度或者高度值的代码，然后将这些值转换成非约束型的数值。 例如，在我们的代码中，我们需要调整这个按钮组件，这样它可以被适当地调整大小。 我们还需要将这个矩形的宽度值从112像素修改为一个非约束型的数值，在本例中为100%。

请看下面的代码。

初始代码：

<s:rect y="0" x="1" width="112" radiusy="3.00067" radiusx="3.00067" d:id="4" height="24"></s:rect>

新代码：

<s:rect y="0" x="1" width="100%" radiusy="3.00067" radiusx="3.00067" d:id="4" height="24"></s:rect>

我们还将RichText标签组件的位置从一个硬编码的数值修改为居中显示。 请看下面的代码。

初始代码：

 

1. <s:RichText ai:aa="2"
2. color="#212121"
3. columnCount="1"
4. fontFamily="Myriad Pro Semibold" fontSize="14"
5. d:id="5"
6. kerning="on"
7. d:label="ATE Text To TLF Text"
8. text="Button" textAlign="center"
9. d:userLabel="Button"
10. flm:variant="1"
11. whiteSpaceCollapse="preserve"
12. x="36" y="6"
13. buttonMode.over="true">

 

新代码：

 

1. <s:RichText color="#212121"
2.             textAlign="center"
3.             maxDisplayedLines="1"
4.             horizontalCenter="0"
5.             left="10" right="10" top="0" bottom="2"
6.             fontFamily="Myriad Pro Semibold" fontSize="14"
7.             kerning="on" verticalAlign="middle"
8.             text="Button"
9.             flm:variant="1" whiteSpaceCollapse="preserve"
10.             buttonMode.over="true">

 

Create CSS document

最后一步是创建一个CSS文件，这个文件将被用来定义Spark或者MX中的所有组件的皮肤。Flash Catalyst已经自动地为我们创建了这个名称为Main.css的CSS文件，但是这个类还没有被应用到程序中。 您所需要做的是在CSS文件中定义skinClass和focusColor。 请看下面的实现代码：

 

1. /*
2.   Dark Night - Flex 4 Theme by Elad Elrom.
3. */
4. @namespace s "library://ns.adobe.com/flex/spark";
5. @namespace mx "library://ns.adobe.com/flex/halo";
6. @namespace d "http://ns.adobe.com/fxg/2008/dt";
7. @namespace fc "http://ns.adobe.com/flashcatalyst/2009";
8. @namespace components "components.*";
9. s|Button
10. {
11.    focusColor: #0d103f;
12.    skinClass: ClassReference("components.Button1");
13. }
14. s|HScrollBar
15. {
16.    skinClass: ClassReference("components.HorizontalScrollbar1");
17. }
18. s|TextInput
19. {
20.    skinClass: ClassReference("components.TextInput1");
21. }

 

Integrating a theme into Flash Builder / Flex Plugin

此时您已经创建了您的第一个主题，然后您想要通过Flex 4 SDK的插件将它添加到Flash Builder或者Eclipse的主题列表中。 下面的说明对于Flash Builder 4或者Eclipse中的Flex 4插件同样适用。

在Flash Builder 4中，切换到设计视图，然后在Appearance（外观）窗口下点击“Current theme: Spark” （当前主题：Spark）链接。

点击“Import Theme…”（导入主题）>，然后浏览该项目和CSS文件所在的位置，设置Theme name（主题名称）

并点击OK。现在在您的Flex项目中已经可以使用新的主题了。

一旦您创建了新的项目，您就可以切换到您刚刚创建的主题，CSS和组件将会被自动复制。 您同样可以删除一个主题或者通过社区分享该主题。