从Flex3到Flex4的转变

Flex 4的十大变化 http://www.infoq.com/cn/articles/top-10-flex4-changes

 

RIA知识库 
flex 
RIA

1. 集成Adobe Catalyst

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

2. Spark组件架构

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

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

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

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

3. MXML 2009

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

下面的应用声明示例展示了如何使用该命名空间以及如何为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">

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

<s:Button label="My Flex 4 Button" />

下面的代码声明了Flex 3的Button：

<mx:Button label="My Flex 3 Button" />

请浏览MXML 2009规范以深入了解其变化。

4. 对View States的改进

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

<!-- Given the states A,B,C --> 
<m:states> 
  <m:State name="A"/> 
  <m:State name="B"/> 
  <m:State name="C"/> 
</m:states> 

<!-- This button will appear in only states A and B --> 
<Button label="Click Me" includeIn="A, B"/> 

<!-- This button will appear in states A and B --> 
<Button label="Button C" excludeFrom="C"/>

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

5. FXG支持

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

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

6. 皮肤增强

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

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

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> 

   <fx:Metadata> 
   <![CDATA[ 
    /** 
     * @copy spark.skins.default.ApplicationSkin#hostComponent 
     */ 
    [HostComponent("spark.components.Panel")] 
    ]]> 
   </fx:Metadata> 

   <fx:Script> 
     /* Define the skin elements that should not be colorized. 
      For panel, border and title backround are skinned, but the content area and title text are not. */ 
      static private const exclusions:Array = ["background", "titleField", "contentGroup"]; 

     /** 
      * @copy spark.skins.SparkSkin#colorizeExclusions 
      */ 
     override public function get colorizeExclusions():Array {return exclusions;} 

     /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ 
     static private const contentFill:Array = ["bgFill"]; 

     /** 
      * @inheritDoc 
      */ 
     override public function get contentItems():Array {return contentFill}; 
   </fx:Script> 

   <s:states> 
     <s:State name="normal" /> 
     <s:State name="disabled" /> 
   </s:states> 

    . . . . . 

   <s:Rect left="1" right="1" top="31" height="1"> 
    <s:fill> 
     <s:SolidColor color="0xC0C0C0" /> 
    </s:fill> 
   </s:Rect> 

   <!-- layer 5: text --> 
   <!-- Defines the appearance of the PanelSkin class's title bar. --> 
   <s:SimpleText id="titleField" lineBreak="explicit" 
      left="10" right="4" top="2" height="30" 
      verticalAlign="middle" fontWeight="bold"> 
   </s:SimpleText> 

   <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1"> 
   </s:Group> 

</s:SparkSkin>

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

请点击这里深入了解Gumbo的皮肤组件。

7. 更新的布局组件

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

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

<s:Group width="400" height="400"> 
  <s:layout> 
   <s:HorizontalLayout paddingLeft="5" paddingTop="5" /> 
  </s:layout> 

  <s:Button label="Button 1" /> 
  <s:Button label="Button 2" /> 
</s:Group>

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

8. Flash Builder 4

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

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

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

9. 编译器性能

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

请阅读Peter Donovan的文章来深入了解相关信息。

10. 新的文本功能

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

如你所见，Flex 4代表了该流行的RIA平台的巨大进步。请查看Matt Chotin的文章《What's new in Flex 4 SDK beta》来深入了解Flex 4 SDK的变化。

 

--------------------------------------------------------------------------------------------------------------------------------
flex4 beta发布了，它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者，当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战，因为flex4 beta的一个目标就是保持与flex3的兼容。

在这篇文章里我会提供关于flex4 beta主体带的一个大概的浏览，介绍一下Flex3到Flex4架构上的区别，以及在组件，布局，状态，效果上的改变。这篇文章里，halo代表flex3里的原始组件。spark代表flex4 beta里的新的组件。

将应用迁移到flex4 beta

把应用从flex3迁移到flex4，不会遇到太大的麻烦。除了看到一些bug被修补了以及默认的主题换了，你还会看到你的应用会在flex4里工作的更好。但是还是有些东西你需要注意。

◆播放器的依赖

flex4 beta 需要flash player10的支持。

◆样式选择器需要命名空间

对于一个css样式选择器以前你可能只需要这样写

 Button {  
cornerRadius: 10;  
}  
DateField {  
color: #780800; } 

但是在flex4 beta里你必须加上命名空间。

 < mx:Style> 
@namespace "http://www.adobe.com/2006/mxml";  
…  
< /mx:Style>

更进一步，如果你用了StyleManager.getStyleDeclaration("Button")，在flex4里你必须把命名空间给加上  如：StyleManager.getStyleDeclaration("mx.controls.Button")。

◆Flex3到Flex4主题的变化

主题已经由默认的halo变成了spark。所以你的应用在flex4里看起来可能会不一样了。当然了，你要是想用halo也是有办法的。你可以用-compatibility-version=3.0这个标识也可以修改additional compiler argument（附加的编译器自变量）为_local en US -theme=halo.swc。

如果你选择用Spark，你会发现很多在Halo里工作的样式到Spark里就不工作了，spark主题只支持有限的样式。想要修改如border之类的外观你需要自定义的皮肤。flex4也提供了一个Wireframe皮肤来帮助你快速建立模型。

除了默认样式的变化，预加载进度条也变化了。这个更轻量级的进度条会缩短启动的时间。你要想还是用原来的加载进度条你只需加上下面这一条：

preloader="mx.preloaders.DownloadProgressBar"

。

Flex3到flex4 beta架构改变一览

flex4 给设计师和开发者提供一个更平滑的工作流。为了实现这个，flex4框架提供了可视化组件和其行为的明确的分界。 在flex3里一个组件代码包括逻辑，布局和可视化的变化，但是在flex4里一个组件被分配到了不同的类，每个类都掌控不同的方面。

◆flex4里的包和命名空间

flex4里保存了flex3的全部类，它们全在mx.*的包里。当然除此之外，flex还提供全新的spark.*包来保存组件，核心类，效果，滤镜，布局， 皮肤和工具。

flex提供了一套组件，其中很多与halo有同样的名字，为了避免名字的冲突，随flex4而来的是4个不同的命名空间：MXML 2006, MXML 2009, Spark, and Halo。

MXML 2006:过时的mxml语言命名空间，曾用在flex3。如果用flex4编译flex3的应用程序，你依然可以用这个命名空间。

URI: http://www.adobe.com/2006/mxml

默认前缀：mx

MXML 2009: 全新的mxml语言命名空间，是纯的语言命名空间，不包含组件。

URI: http://ns.adobe.com/mxml/2009

默认前缀：fx

SPARK:这个命名空间里包含了所有的新的Spark组件，他应该和MXML 2009一起使用。

URI: library://ns.adobe.com/flex/spark

默认前缀: s

HALO:这个命名空间包含所有halo的组件，应该与MXML2009一起使用。

URI: library://ns.adobe.com/flex/halo

默认前缀：mx

flex4在css方面也提供了多样的命名空间的支持。所以，在使用css时必须注意命名空间已避免冲突。

 < fx:Style> 
@namespace s "library://ns.adobe.com/flex/spark";  
@namespace mx "library://ns.adobe.com/flex/halo";  
s|Button {  
color: #FF0000;  
}  
mx|DateChooser {  
color: #FF0000;  
}  
 < /fx:Style> 

新的组件和容器

◆组件

flex4修改和新增了一些组件，也有些组件是halo有的,但是spark没有。adobe建议你halo和spark一起用。至于两者都有什么，没什么下面有个网址你可以去看看。

http://www.adobe.com/devnet/flex/articles/flex3and4_differences_04.html

◆state语法的改变

state语法变了，变得更加的有弹性和直接。你甚至可以根据上下文来针对性的改变你的状态。下面是重点：

1，只有状态被定义到了状态数组。

2，AddChild和RemoveChild，不能再用了。取而代之的是includeIn和excludeFrme属性 。这两个属性是组件的属性。

看例子吧！

这是flex3应用状态的方式。

 < mx:states>
< mx:State name="submitState" basedOn=""> 
< mx:AddChild relativeTo="{loginForm}" > 
< mx:Button label="submit" bottom="10" right="10"/> 
< /mx:AddChild> 
< mx:RemoveChild target="{firstTextInput}"/> 
< /mx:State> 
< /mx:states> 
< mx:TextInput id="firstTextInput" /> 
< mx:Canvas id="loginForm" /> 

这是flex4

 < s:states> 
< s:State name="submitState" /> 
< /s:states> 
< s:TextInput id="firstTextInput" excludeFrom="submitState" /> 
< s:Group id="loginForm" > 
< s:Button label="submit" bottom="10" right="10" includeIn="submitState"/> < /s:Group> 

3,setProperty,setStyle和setEvent被点语法取代了。

下面是flex3的做法

 < mx:states> 
< mx:State name="submitState" basedOn=""> 
< mx:SetProperty target="{submitButton}" name="label" value="submit" /> 
< mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/> 
< mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/> 
< /mx:State> 
< mx:State name="clearState" basedOn=""> 
< mx:SetProperty target="{submitButton}" name="label" value="clear" /> 
< mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" /> 
< /mx:State> 
< /mx:states> 
 < mx:Button id="submitButton" /> 

下面是flex4的做法

 < s:states> 
< s:State name="submitState" /> 
< s:State name="clearState" /> 
< /s:states> 
< s:Button label.submitState="submit" textDecoration.submitState="underline" 
click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/> 

4,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态。