• 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样式选择器以前你可能只需要这样写

    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")。

    主题的变化 

    主题已经由默认的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时必须注意命名空间已避免冲突。

    <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。你认为呢?

    这篇文章的原文:http://www.adobe.com/devnet/flex/articles/flex3and4_differences_07.html

  • 相关阅读:
    Redis-10 Bitmap位图基本操作
    Redis学习-09 hyperloglog基本操作
    Redis学习-08 Geospatial地理位置详解
    Redis学习-07 Zset有序集合
    Redis学习-06 Hash哈希基本操作
    部分知识路径
    Docker 容器中安装vi、ifconfig、ping命令
    Java new一个对象的过程超级详解
    SVN
    创建ssm项目
  • 原文地址:https://www.cnblogs.com/orchid/p/1524643.html
Copyright © 2020-2023  润新知