flex3和flex4之间的区别

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

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

将应用迁移到flex4 beta

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

播放器的依赖

flex4 beta 需要flash player10的支持。

样式选择器需要命名空间  

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

1. Button {
   
2. cornerRadius: 10;
   
3. }
   
4. DateField {
   
5. color: #780800; 
6. }

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

<mx:Style>
@namespace "http://www.adobe.com/2006/mxml";
…
</mx:Style> 更进一步，如果你用了StyleManager.getStyleDeclaration("Button")，在flex4里你必不把命名空间给加上  如：StyleManager.getStyleDeclaration("mx.controls.Button")。

主题的变化  

主题已经由默认的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"。 

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时必须注意命名空间已避免冲突。

1. <fx:Style>
   
2. @namespace s "library://ns.adobe.com/flex/spark";
   
3. @namespace mx "library://ns.adobe.com/flex/halo";
   
4. s|Button {
   
5. color: #FF0000;
   
6. }
   
7. mx|DateChooser {
   
8. color: #FF0000;
   
9. }
   
10. </fx:Style>