解析Flex4的十大变化-51CTO.COM

本文和大家重点讨论一下Flex4的十大变化，本文从较高层次审视了这个流行RIA框架的***版，讨论了其所发生的主要变化。希望本文的介绍能让你有所收获。

Flex4的十大变化

本周Adobe发布了Flex4（Gumbo）的***官方beta版。该版本包含了众多的变化。本文从较高层次审视了这个流行RIA框架的***版，讨论了其所发生的主要变化。

汇集***Flash平台技术相关资源，提供Flash平台相关工具高速下载

1.集成AdobeCatalyst

Flex4的一个主要特性就是提供了对AdobeCatalyst（Adobe新的设计工具，用于创建富Internet应用而无需编写代码）集成的支持。Catalyst改变了开发者与设计者协作的方式，因为它清楚地知道应用开发者与设计者之间工作方式的显著差异。这样开发者与设计者都能专注于自己所擅长的领域，凭借Catalyst，无论开发者还是设计者都能按照自己所习惯的方式进行工作。Flex4中的很多变化都是围绕着Flex与Catalyst的集成进行的。请查看AdobeCatalyst站点以了解其详细信息。

2.Spark组件架构

Flex的每个版本都包含了完整的组件库，其中含有用于构建应用的通用组件，如数据表格、按钮及布局容器等等。Flex4的底层组件架构名为Spark，而在Flex3中则叫做Halo。为了支持Catalyst，Flex4更新了底层的组件模型以达到松耦合的目的。

在新的Spark组件模型中，核心逻辑、皮肤以及布局都被分开了，这样我们就能单独处理其中任意一部分而又不会影响到其他部分。Spark组件模型构建于Halo组件模型之上，这意味着Spark扩展了Halo的核心基类UIComponent，这样我们就能以增量的方式使用Flex4，同时还能将Flex3组件应用在Flex4应用中。

除此以外，Flex4还对效果（effect）进行了增强。现在可以将效果应用在任意的对象和类型上，这么做提升了其灵活性。Flex4的效果由新的“spark.effects”包实现。就像新的组件库一样，Flex4的效果也被重新实现了，但却并没有对Flex3的效果进行任何变更，这么做的目的是为了保持向后兼容。请查看ChetHaase所写的关于Flex4效果的文章或是其博客以更多地了解GumboEffect。

请阅读白皮书以更多地了解Spark架构。

3.MXML2009

MXML基于XML，构建于FlashPlayer所用的编程语言——ActionScript3之上。MXML用于对用户界面和支持工具（比如说IDE，现在是Catalyst了）的视图区域进行布局。MXML2009包含了大量更新以对不同的行为（核心、皮肤和布局）进行解耦，同时还提供了新的组件库。现在Flex4的组件在其自己的包中（spark.components）得以实现，同时又没有对Flex3的组件进行任何变更，为此MXML2009专门提供了一个新的命名空间以提供支持。

下面的应用声明示例展示了如何使用该命名空间以及如何为Spark和Halo组件定义命名空间：

<s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/halo">

这样，我们就可以通过下面的代码声明Flex4的Button：

<s:Buttonlabels:Buttonlabel="MyFlex4Button"/>

下面的代码声明了Flex3的Button：

<mx:Buttonlabelmx:Buttonlabel="MyFlex3Button"/>

请浏览MXML2009规范以深入了解其变化。#p#

4.对ViewStates的改进

Flex2将状态（states）概念引入到了Flex框架中，这样我们就可以通过简单的状态改变来管理视图组件的变化。Flex4改进了视图状态（viewstates）以简化其语法，这样我们就能更轻松地使用他们了。新语言属性includeIn和excludeFrom就是简化语法的一个例子，我们可以设定组件的这两个属性值以响应状态变化（参见下面的代码示例）。

<!--GiventhestatesA,B,C--> 
<m:states> 
<m:Statenamem:Statename="A"/> 
<m:Statenamem:Statename="B"/> 
<m:Statenamem:Statename="C"/> 
</m:states> 
 
<!--ThisbuttonwillappearinonlystatesAandB--> 
<ButtonlabelButtonlabel="ClickMe"includeIn="A,B"/> 
 
<!--ThisbuttonwillappearinstatesAandB--> 
<ButtonlabelButtonlabel="ButtonC"excludeFrom="C"/>

请点击这里以进一步了解ViewStates的变化。

5.FXG支持

FlashPlayer的核心是个绘图引擎。Adobe在FlashPlayer10中引入了FXG，现在又将其引入到了Flex中。FXG是个声明式的图形格式，可以在工具间传递内容，这意味着设计者可以在Catalyst或CS4Illustrator中创建内容，接下来Flex应用开发者就可以将其导入并使用而无需修改任何内容。

请阅读FXG规范以了解更多细节信息。

6.皮肤增强

Spark组件模型***的变化在于对皮肤的颠覆性改造，现在皮肤可以控制组件的所有可视化部分，同时还将逻辑封装到了组件核心之外。这样我们就可以对组件的可视化部分进行独立修改而不会影响到底层的核心逻辑。

来看看PanelSkin.mxml皮肤文件吧，Panel容器的默认皮肤代码如下：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<s:SparkSkinxmlns:fxs:SparkSkinxmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"alpha.disabled="0.5"> 
 
<fx:Metadata> 
<![CDATA[  
/**  
*@copyspark.skins.default.ApplicationSkin#hostComponent  
*/  
[HostComponent("spark.components.Panel")]  
]]> 
</fx:Metadata> 
 
<fx:Script> 
/*Definetheskinelementsthatshouldnotbecolorized.  
Forpanel,borderandtitlebackroundareskinned,butthecontentareaandtitletextarenot.*/  
staticprivateconstexclusions:Array=["background","titleField","contentGroup"];  
 
/**  
*@copyspark.skins.SparkSkin#colorizeExclusions  
*/  
overridepublicfunctiongetcolorizeExclusions():Array{returnexclusions;}  
 
/*Definethecontentfillitemsthatshouldbecoloredbythe"contentBackgroundColor"style.*/  
staticprivateconstcontentFill:Array=["bgFill"];  
 
/**  
*@inheritDoc  
*/  
overridepublicfunctiongetcontentItems():Array{returncontentFill};  
</fx:Script> 
 
<s:states> 
<s:Statenames:Statename="normal"/> 
<s:Statenames:Statename="disabled"/> 
</s:states> 
 
.....  
 
<s:Rectlefts:Rectleft="1"right="1"top="31"height="1"> 
<s:fill> 
<s:SolidColorcolors:SolidColorcolor="0xC0C0C0"/> 
</s:fill> 
</s:Rect> 
 
<!--layer5:text--> 
<!--DefinestheappearanceofthePanelSkinclass'stitlebar.--> 
<s:SimpleTextids:SimpleTextid="titleField"lineBreak="explicit"  
left="10"right="4"top="2"height="30"  
verticalAlign="middle"fontWeight="bold"> 
</s:SimpleText> 
 
<s:Groupids:Groupid="contentGroup"left="1"right="1"top="32"bottom="1"> 
</s:Group> 
 
</s:SparkSkin>

由于该皮肤文件唯一的作用就是控制Panel容器的可视化外观，因此设计者可以修改组件的样式而无需编辑其源代码，也不必了解组件的内部行为。更为重要的是，设计者可以按照自己熟悉的方式来使用Catalyst。请点击这里深入了解Gumbo的皮肤组件。#p#

7.更新的布局组件

熟悉Flex开发的人可能会注意到Flex3中的大多数容器都已经不在Gumbo组件库中了。这是由于布局已经被解耦了，现在我们需要通过代理（delegtion）来处理他们。因为大多数Flex3容器仅仅就是为了提供不同的布局样式（比如说用于水平布局的HBox，用于垂直布局的VBox等等），因此现在他们已经没什么用了。

下面的示例表明Flex开发者现在也可以定义布局了。该示例利用Group类来管理按钮，Group是个新的Spark类，用于管理其中的内容条目。布局的结果就是两个并排放置的按钮，就像是使用Flex3中的HBox的结果一样。

<s:Groupwidths:Groupwidth="400"height="400"> 
<s:layout> 
<s:HorizontalLayoutpaddingLefts:HorizontalLayoutpaddingLeft="5"paddingTop="5"/> 
</s:layout> 
 
<s:Buttonlabels:Buttonlabel="Button1"/> 
<s:Buttonlabels:Buttonlabel="Button2"/> 
</s:Group>

来自Adobe的RyanStewart对新的布局机制进行了深入分析。

8.FlashBuilder4

FlashBuilder4（之前叫做FlexBuilder）是面向应用开发者的***的EclipseIDE。该新版本带有众多更新，包括条件调试断点、更多的重构工具并支持FlexUnit4。一如往常，它还包括MXML、ActionScript3、可视化设计器以及Flex性能与内存分析器（只有专业版才有该性能分析器）。

除此之外，该***版还提供了高级的数据管理特性以简化数据为中心应用的开发。这包括客户端的数据管理特性，它可以处理CRUD操作以及在大集合中进行滚动。

请点击这里来深入了解该IDE。

9.编译器性能

几乎每个Flex3开发者心中都有一个痛——糟糕的编译器性能。基于此，Gumbo的一个主要目标就是改进Flex4中的编译器性能。虽然官方尚未发布性能基准，但来自Adobe的PeterDonovan根据自己所作的一些试验对其进行了测试，结果表明新的编译器性能提升了25%。他说要想将性能提升3到4倍只能进行重新设计。当然了，每个企业级Flex应用的开发者都希望今年底Flex4正式发布时能实现这一点。请阅读PeterDonovan的文章来深入了解相关信息。

10.新的文本功能

Flash应用（无论是Flex还是非Flex应用）的一个主要议题就是高效处理文本的能力。在FlashPlayer10中，Adobe引入了全新的文本引擎以支持RIA的需要（多语言、打印以及键盘快捷键等等）。Gumbo引入了大量新的文本类（RichText、SimpleText等等）以在Flex框架中提供更健壮的文本支持。除此以外，Adobe正在全力开发新的TextLayoutFramework以赋予ActionScript3开发者利用FlashPlayer文本引擎的能力。请点击这里以深入了解TextLayoutFramework。

如你所见，Flex4代表了该流行的RIA平台的巨大进步。请查看MattChotin的文章《What'snewinFlex4SDKbeta》来深入了解Flex4SDK的变化。

【编辑推荐】