Flex4相对于Flex3的变化

以下内容转载自互联网，如侵犯您的权利，请来信告知！

 

      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,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态。

flex4 beta还有其他的特性，以后的文章继续在讨论。

adobe官方说从flex3到flex4得转变painless。你认为呢？

 

Flex4相对FLex3的组件变化

customizations much more straightforward. Here is a table showing Flex 3 Halo components and their Flex 4 beta Spark counterparts:

Flex 3 Halo Component Flex 4 beta Spark Component

mx.controls.Button	spark.components.Button
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ComboBox	spark.components.DropDownList (w/o editability)
mx.controls.HorizontalList	spark.components.List (with a HorizontalLayout)
mx.controls.HRule	spark.primitives.Line
mx.controls.HScrollBar	spark.components.HScrollBar
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage
mx.controls.LinkBar	spark.components.ButtonBar (with a custom skin)
mx.controls.LinkButton	spark.components.Button (with a custom skin)
mx.controls.List	spark.components.List
mx.controls.NumericStepper	spark.components.NumericStepper
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.TextArea	spark.components.TextArea
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List (with a TileLayout)
mx.controls.ToggleButtonBar	spark.components.ButtonBar
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VRule	spark.primitives.Line
mx.controls.VScrollBar	spark.components.VScrollBar
mx.controls.VSlider	spark.components.VSlider
mx.core.Application	spark.components.Application
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	spark.components.WindowedApplication
mx.containers.Canvas	spark.components.Group
mx.containers.HBox	spark.components.HGroup
mx.containers.Panel	spark.components.Panel
mx.containers.Tile	spark.components.Group (with a TileLayout)
mx.containers.VBox	spark.components.VGroup

Adobe encourages you to use Halo components and containers along with Spark components. Because Adobe continues to build components atop the same base class (UIComponent), there should be full interoperability between Spark and Halo. Here is a table of the components and containers that do not currently have direct Spark equivalent classes.

Flex 3 classes with no direct Flex 4 beta counterpart

mx.controls.Alert

mx.controls.ColorPicker

mx.controls.DataGrid

mx.controls.DateChooser

mx.controls.DateField

mx.controls.Menu

mx.controls.MenuBar

mx.controls.PopUpButton

mx.controls.PopUpMenuButton

mx.controls.ProgressBar

mx.controls.RichTextEditor

mx.controls.TabBar

mx.controls.Tree

mx.containers.Accordion

mx.containers.ApplicationControlBar

mx.containers.ControlBar

mx.containers.DividedBox

mx.containers.Form

mx.containers.Grid

mx.containers.TabNavigator

mx.containers.TitleWindow

mx.containers.ViewStack

Changes in states syntax

Flex 4 beta has promoted the states functionality to a full MXML language feature. As a result, you will likely find states to be much more flexible and direct. The new states syntax is more inline, allowing state-specific changes to be specified in context. Here are the key differences in the Flex 4 beta syntax:

• Only states are defined within the states array.
• In the new states syntax, you cannot use de>AddChildde> and de>RemoveChildde>. Instead, you define a component's role in a particular state on the component itself using the de>includeInde> and de>excludeFromde> attributes.

In the following Flex 3 example, states are used to include a Button and remove a TextInput only when the de>currentStatede> of the document is de>submitStatede>. This approach can get very verbose with more complex states.

<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" />

Here is the simpler Flex 4 beta code using de>includeInde> and de>excludeFromde>.

<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>

• de>SetPropertyde>, de>SetStylede>, and de>SetEventHandlerde> have been replaced by a new dot syntax, which allows you to qualify MXML attribute values with a specific state identifier.

In the following Flex 3 example, the code defines a property, style, and event for a Button in de>submitStatede>.

<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" />
        de><mx:SetEventHandler target="{submitButton}" name="click" de>handler="emptyDocument()" />
    </mx:State>
</mx:states>
 
<mx:Button id="submitButton" />

In Flex 4 beta, the code looks like this:

<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"/>

• A component can no longer be in an undefined or null state. By default, the first declared state is the initial state of a component.
  The new syntax is available when a document uses the MXML 2009 language namespace. You cannot mix the legacy syntax and the new states syntax. The old syntax is available only in the MXML 2006 namespace.

Additionally, each component now supports a set of states defined in its skin class, which makes it simpler to apply visual changes depending on the state of a component. For example, if you look at the skin for the Spark Button, you will find the following states defined:

<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>

The ButtonSkin class defines what happens visually to a Spark Button in each one of these states.

This is only a brief introduction to the new Flex 4 beta states syntax. Visit the Enhanced States Syntax Spec to find more details.