从Flex3到Flex4

简介: flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者,当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战,因为flex4 beta的一个目标就是保持与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里你必须加上命名空间。
@namespace " http://www.adobe.com/2006/mxml"; … 更进一步,如果你用了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的应用程序,你依然可以用这个命名空间。
默认前缀:mx
MXML 2009: 全新的mxml语言命名空间,是纯的语言命名空间,不包含组件。
默认前缀: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时必须注意命名空间已避免冲突。
@namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; s|Button { color: #FF0000; } mx|DateChooser { color: #FF0000; } 新的组件和容器
◆组件
flex4修改和新增了一些组件,也有些组件是halo有的,但是spark没有。adobe建议你halo和spark一起用。至于两者都有什么,没什么下面有个网址你可以去看看。
◆state语法的改变
state语法变了,变得更加的有弹性和直接。你甚至可以根据上下文来针对性的改变你的状态。下面是重点:
1,只有状态被定义到了状态数组。
2,AddChild和RemoveChild,不能再用了。取而代之的是includeIn和excludeFrme属性 。这两个属性是组件的属性。
看例子吧!
这是flex3应用状态的方式。
这是flex4
3,setProperty,setStyle和setEvent被点语法取代了。
下面是flex3的做法
下面是flex4的做法
4,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态。
flex4 beta还有其他的特性,以后的文章继续在讨论。
adobe官方说从flex3到flex4得转变painless。你认为呢?
 
本文来自CSDN博客,转载请标明出处: http://blog.csdn.net/heimaoxiaozi/archive/2011/01/06/6121316.aspx
阅读(392) | 评论(0) | 转发(0) |
目录
相关文章
|
JavaScript 容器
什么是Flex
1:屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 2:可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 3:可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4:可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5:可以控制元素在页面上的布局方向; 6:可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
122 0
|
前端开发 容器
flex从总结到了解
flex 是一种布局方式,在 CSS3 之后开始有。它主要由父容器和子项组成
194 1
flex从总结到了解
|
内存技术 开发工具 数据可视化
flex水平垂直居中
我是通过flex的水平垂直居中噢! html,body{ width: 100%; height: 200px; } .parent { display:flex; align-items: center;/*垂直居中*/ justify-...
1101 0
|
Web App开发 JavaScript Java
flex学习
早就想弄个flex的东西了...总是没有心情弄..有的时候项目让人心力憔悴...   最近,,想着是破罐子破摔..弄点别的东西...换个心情..然后在去弄下项目...(已经快接近尾声了)   总是在开发的第一线..技术上面什么都弄..公司里面还要应付其他同事的问题...   能帮助别人就帮助吧..本人也没有别的什么有点..就代码上面略有研究.(投入的时间多了自然就有所领悟了)   1,先弄个s
1311 0
|
XML Java 数据格式
Flex 4 advancedDataGrid的使用
参考 http://www.cnblogs.com/xuehai/archive/2009/09/26/1574531.html                                                                                     ...
1416 0