Flex3到Flex4的转变新特性值得关注

开发 后端
本文向大家介绍一下从Flex3到Flex4的转变,Flex4beta发布了,它是自Flex3以来的重大改革。Flex4beta提供了一种新的组件和皮肤的架构。

本文和大家重点讨论一下从Flex3到Flex4的转变,作为一个Flex3的开发者,当你用Flex4beta编译你的Flex3应用时你应该不会遇到太大的挑战,因为Flex4beta的一个目标就是保持与Flex3的兼容。

从Flex3到Flex4的转变一览

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

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

将应用迁移到Flex4beta

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

◆播放器的依赖

Flex4beta需要flashplayer10的支持。

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

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

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

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

  1. <mx:Style> 
  2. @namespace"http://www.adobe.com/2006/mxml";  
  3. …  
  4. </mx:Style> 
  5.  

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

◆Flex3到Flex4主题的变化

主题已经由默认的halo变成了spark。所以你的应用在Flex4里看起来可能会不一样了。当然了,你要是想用halo也是有办法的。你可以用-compatibility-version=3.0这个标识也可以修改additionalcompilerargument(附加的编译器自变量)为_localenUS-theme=halo.swc。

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

除了默认样式的变化,预加载进度条也变化了。这个更轻量级的进度条会缩短启动的时间。你要想还是用原来的加载进度条你只需加上下面这一条:preloader="mx.preloaders.DownloadProgressBar"。#p#

Flex3到Flex4beta架构改变一览

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

◆Flex4里的包和命名空间

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

flex提供了一套组件,其中很多与halo有同样的名字,为了避免名字的冲突,随Flex4而来的是4个不同的命名空间:MXML2006,MXML2009,Spark,andHalo。

MXML2006:过时的mxml语言命名空间,曾用在Flex3。如果用Flex4编译Flex3的应用程序,你依然可以用这个命名空间。

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

默认前缀:mx

MXML2009:全新的mxml语言命名空间,是纯的语言命名空间,不包含组件。

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

默认前缀:fx

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

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

默认前缀:s

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

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

默认前缀:mx

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

Mxml代码
 

  1. <fx:Style> 
  2. @namespaces"library://ns.adobe.com/flex/spark";  
  3. @namespacemx"library://ns.adobe.com/flex/halo";  
  4. s|Button{  
  5. color:#FF0000;  
  6. }  
  7. mx|DateChooser{  
  8. color:#FF0000;}  
  9. </fx:Style> 
  10.  
  11. <fx:Style> 
  12. @namespaces"library://ns.adobe.com/flex/spark";  
  13. @namespacemx"library://ns.adobe.com/flex/halo";  
  14. s|Button{  
  15. color:#FF0000;  
  16. }  
  17. mx|DateChooser{  
  18. color:#FF0000;}  
  19. </fx:Style> 
  20.  

#p#

 新的组件和容器

◆组件

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

 ◆state语法的改变

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

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

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

看例子吧!

3.这是Flex3应用状态的方式。

Mxml代码
 

  1. <mx:states> 
  2. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  3. <mx:AddChildrelativeTomx:AddChildrelativeTo="{loginForm}"> 
  4. <mx:Buttonlabelmx:Buttonlabel="submit"bottom="10"right="10"/> 
  5. </mx:AddChild> 
  6. <mx:RemoveChildtargetmx:RemoveChildtarget="{firstTextInput}"/> 
  7. </mx:State> 
  8. </mx:states> 
  9. <mx:TextInputidmx:TextInputid="firstTextInput"/> 
  10. <mx:Canvasidmx:Canvasid="loginForm"/> 
  11.  
  12. <mx:states> 
  13. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  14. <mx:AddChildrelativeTomx:AddChildrelativeTo="{loginForm}"> 
  15. <mx:Buttonlabelmx:Buttonlabel="submit"bottom="10"right="10"/> 
  16. </mx:AddChild> 
  17. <mx:RemoveChildtargetmx:RemoveChildtarget="{firstTextInput}"/> 
  18. </mx:State> 
  19. </mx:states> 
  20. <mx:TextInputidmx:TextInputid="firstTextInput"/> 
  21. <mx:Canvasidmx:Canvasid="loginForm"/> 
  22.  

 这是Flex4

Mxml代码
 

  1. <s:states> 
  2. <s:Statenames:Statename="submitState"/> 
  3. </s:states> 
  4. <s:TextInputids:TextInputid="firstTextInput"excludeFrom="submitState"/> 
  5. <s:Groupids:Groupid="loginForm"> 
  6. <s:Buttonlabels:Buttonlabel="submit"bottom="10"right="10"includeIn="submitState"/> 
  7.  
  8. <s:states> 
  9. <s:Statenames:Statename="submitState"/> 
  10. </s:states> 
  11. <s:TextInputids:TextInputid="firstTextInput"excludeFrom="submitState"/> 
  12. <s:Groupids:Groupid="loginForm"> 
  13. <s:Buttonlabels:Buttonlabel="submit"bottom="10"right="10"includeIn="submitState"/> 
  14.  
  15. 3,setProperty,setStyle和setEvent被点语法取代了。  
  16.  

#p# 下面是Flex3的做法

Mxml代码
 

  1. <mx:states> 
  2. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  3. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="submit"/> 
  4. <mx:SetStyletargetmx:SetStyletarget="{submitButton}"name="textDecoration"value="underline"/> 
  5. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="trace('done');"/> 
  6. </mx:State> 
  7. <mx:Statenamemx:Statename="clearState"basedOn=""> 
  8. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="clear"/> 
  9. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="emptyDocument()"/> 
  10. </mx:State> 
  11. </mx:states> 
  12. <mx:Buttonidmx:Buttonid="submitButton"/> 
  13.  
  14. <mx:states> 
  15. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  16. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="submit"/> 
  17. <mx:SetStyletargetmx:SetStyletarget="{submitButton}"name="textDecoration"value="underline"/> 
  18. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="trace('done');"/> 
  19. </mx:State> 
  20. <mx:Statenamemx:Statename="clearState"basedOn=""> 
  21. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="clear"/> 
  22. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="emptyDocument()"/> 
  23. </mx:State> 
  24. </mx:states> 
  25. <mx:Buttonidmx:Buttonid="submitButton"/> 
  26.  

 下面是Flex4的做法

Mxml代码
 

  1. <s:states> 
  2. <s:Statenames:Statename="submitState"/> 
  3. <s:Statenames:Statename="clearState"/> 
  4. </s:states> 
  5.  
  6. <s:Buttonlabel.submitStates:Buttonlabel.submitState="submit"textDecoration.submitState="underline"click.
  7. submitState="trace('done')"click.clearState="emptyDocument()"label.clearState="clear"textDecoration.clearState="none"/> 
  8.  
  9. <s:states> 
  10. <s:Statenames:Statename="submitState"/> 
  11. <s:Statenames:Statename="clearState"/> 
  12. </s:states> 
  13.  
  14. <s:Buttonlabel.submitStates:Buttonlabel.submitState="submit"textDecoration.submitState="underline"click.
  15. submitState="trace('done')"click.clearState="emptyDocument()"label.clearState="clear"textDecoration.clearState="none"/> 
  16.  
  17.  
  18.  

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

Flex4beta还有其他的特性,以后的文章继续在讨论。

adobe官方说从Flex3到Flex4得转变painless。你认为呢?
 

【编辑推荐】

  1. Flex开发者需要知道的10件事
  2. FlexBuilder的路在何方 
  3. FlexBuilder利用trace函数成功调试简明步骤
  4. FlexBuilder3.0与Eclipse3.4的完美结合
  5. 术语汇编 FlexBuilder入门指导

 

 

责任编辑:佚名 来源: javaeye.com
相关推荐

2009-07-16 14:09:24

Flex3到Flex4

2010-08-02 12:44:01

Flex3Flex4

2010-08-12 15:10:17

Flex4

2010-08-02 11:09:45

Flex4

2010-08-10 09:08:29

HTMLTemplatFlex4

2010-08-06 10:56:11

Flex4MyEclipse

2010-08-02 10:50:55

Flex3

2010-08-13 09:05:09

Flex4Halo

2010-08-11 12:50:04

Flex4

2010-08-02 14:04:29

Flex4教程

2010-08-12 14:58:12

Flex4

2010-08-09 12:47:00

Flex4beta

2010-07-27 10:11:04

Flex4

2010-07-27 10:03:57

Flex4

2010-08-11 11:10:08

Flex4打印功能

2010-08-12 14:51:40

Flex4

2010-08-02 11:26:21

Flex4

2010-08-13 10:30:30

Flex4

2010-08-12 14:31:42

Flex4

2010-08-13 14:45:58

Flex4布局
点赞
收藏

51CTO技术栈公众号