Flex4 新特性

发布时间：2020-12-15 05:11:44 所属栏目：百科来源：网络整理

导读：原文地址：?http://www.ibm.com/developerworks/cn/web/1103_mars_flex4/index.html?ca=drs- Flex4 新特性概述 Adobe Flex 最初是由?Macromedia?公司发布的，自 2005 年 10 月 Flex 被 Adobe 以 Flex SDK 2.0 发布之后，Flex SDK 已是一个开源的框架，用于构

原文地址：?http://www.ibm.com/developerworks/cn/web/1103_mars_flex4/index.html?ca=drs-

Flex4 新特性概述

Adobe Flex 最初是由?Macromedia?公司发布的，自 2005 年 10 月 Flex 被 Adobe 以 Flex SDK 2.0 发布之后，Flex SDK 已是一个开源的框架，用于构建富客户端应用程序。开发语言也由 Action Script 2.0 升级为 ActionScript3.0,，并需要 Flash Player 9 以上做为运行时环境。Flex 3 对 Flex 的框架进行了优化，将 Flex 框架集成到了 Flash Player 里，即 runtime share library(RSL)，这样就可以将 Flex 框架做为公共类库应用到程序中，减小了程序自身的体积，提高程序的运行效率。

Adobe 于 2009 年发布了 Flex 4 的 bate 版。现在，我们已经可以在 opensource.adobe.com 下载 Flex 4 SDK 的正式版本。与之前版本相比，Flex 4 对外观 (Skin)、效果（effect）、布局 (Layout)、数据绑定等在功能上很大的增强和改进。

Flex 4 提供了多种主题皮肤供用户选择来改变整个项目的主题外观，Skin 的设计也将组件的逻辑元素与可视元素明确的区分开来，引入了新的皮肤和组件架构，被称为 Spark，但是 Flex 4 保留了 Flex3 的命名空间和组件库，所以 Flex4 保持了与 Flex3 的向后兼容。Spark 是以 Flex 3 的 Halo 架构为基础构建的，Spark 扩展了 Halo 的核心基类 UIComponent，所以现有 MX 组件可以与新 Spark 架构组件相互结合应用，彼此也可以轻松实现互操作。

Spark 对于效果（effect）在功能上进行了增强，主要体现在效果应用的对象范围与新特效的增加增强上，Spark 中可以将效果应用在任意的对象和类型上，提升了其灵活性，增强的特效主要表现在：支持过渡自动反向、将 Pixel Bender 过滤器应用为效果 ( 即图片着色的效果 )、在 XYZ 三个平面中变形和基于复杂关键帧的动画。Spark 扩展了布局机制，包含一个非常灵活的布局机制，运行时可指定的布局包含对 2D 旋转和刻度的全面支持，还可以在布局后将 Flash Player 10 新的 3D 功能应用于任何组件。与 Flex 3 相比 Flex 4 最大的不同是 Spark 对 FXG(MXML 图形元素 ) 的支持，FXG 是基于 MXML 标签来定义图形显示组件的，在以前的版本中，如果要在界面显示一个特殊的图形，需用 Action Script 调用 Flex SDK 的绘图 API 来实现，与 Flex3 相比对开发的效率和功能的实现提升不少。

还有一些新功能如对本地文件的操作，变换项目不同的主题皮肤、双向数据绑定等等，这些功能在以前的版本中如果要实现，需要写大量的代码来实现，现在 Flex4 对这些功能全部支持。

回页首

Flex 4 的重要特性及其应用

命名空间的变化

Flex 4 将 Flex 3 中原有的类全部保留了下来，并引入的新的 Spark 类库，Halo 与 Spark 共同享用了大部分的类名称，为了避免 MXML 中出现名称冲突，所以命名空间与之前的版本相比有相应的变化。Flex 4 SDK 有四个命名空间：MXML 2006、MXML 2009、MX 和 Spark。

MXML 2006 命名空间主要应用于 Flex 4 正式版之前的版本，并且 Flex 4 正式版之前的版本也只有 MXML2006 命名空间，该命名空间包含了 Action Script 顶级元素及 MX 包中所有组件类。

其中后面三个命名空间主要作用于 Flex 4 正式版中，它们所代表的内容分别是：

xmlns:fx="http://ns.adobe.com/mxml/2009"

fx 命名空间下包含 Action Script 顶级元素和内建到 MXML 编译器里的标签。

xmlns:mx="library://ns.adobe.com/flex/mx"

mx 命名空间包含着放在 mx.* 包里那些组件，Flex 图表、Flex 数据可视化组件等等。

xmlns:s="library://ns.adobe.com/flex/spark"

s 命名空间包含所有 Spark 组件，与 MXML 2009 语言命名空间一起使用。S 命名空间包含 spark.* 和 flashx.* 包中所有核心类。这个命名空间还包含了 19 个 RPC 类，例如我们常用到的 HTTPService 和 RemoteObject 组件，如果需要详细了解 s 命名空间的具体对象，可以参见您所下载的 Flex 4 SDK 目录 sdks4.0.0frameworks 下的 spark-manifest.xml 文件，里面有详细的分类和说明。

新特效与三维支持

Flex 4 中的效果与 Flex 3 相比是一个全新架构的一组特效类，都继承自 Animate 类，Animate 类继承自 Effect 类，Flex 3 中的效果基类 TweenEffect 也是继承自 Effect，所以这两组特效类是一种平行关系，但是 Spark 中的特效对所有对象都有效，包括原有的 Halo 控件,新的 Spark 控件,甚至 graphic 绘制的图像，所以我们从 Flex 3 向 Flex 4 移植代码时可以保留原有代码不变。

Flex 4 中的特效按其对执行对象的类型不同，可以分为五种。

Flex 4 新特效分类列表

类型	功能描述
Property effects	动态改变一个或多个目标对象的属性 (Animate、Fade,Resize,and AnimateColor)
Transform effects	缩入、旋转和位置的改变 .（Move,Rotate,and Scale）
Pixel-shader effects	主要是针对图片象素着色的动态效果 (CrossFade and Wipe)
Filter effects	过滤器效果（BevelFilter、BlurFilter 、ColorMatrixFilter、ConvolutionFilter、DisplacementMapFilter、DropShadowFilter、GlowFilter、GradientBevelFilter、GradientFilter、GradientGlowFilter、ShaderFilter）
3D effects	3D 特效（Move3D、Rotate3D、Scale3D）

3D 特效只能应用于 Spark 组件，因 Spark 组件支持 Z 坐标，支持三维是 Flex 4 的新特性之一。3D 特效是通过改过 x.y,z 的坐标值，实现目标对象远离或靠近的视觉效果，还可以实现让目标对象围绕某个坐标旋转的效果。

我们有时在购物或娱乐型的网站，会看到一些翻页的效果，在以前这类特效一般是由 Flash 制作的，Flex 很难做到。现在 Flex 4 中也提供了类似的特效类来实现翻页的功能。Rotate3D 类可以在三维方向上围绕 x、y 或 z 轴旋转目标对象。旋转是围绕目标的转换中心发生的。现在一个登录界面为例，让该界面围绕 X 轴以逆时针的方向旋转，

关键代码：

定义 Rotate3D 对象，设置作用对象及 X 轴旋转属性值。

 <fx:Declarations> 
 <s:Rotate3D id="rotateEF" target="{loginPanel}" angleXFrom="360" 
 angleXTo="50" duration="3000" repeatCount="1"/> 
 </ fx:Declarations> 
 ...... 
 <mx:LinkButton label="Need to Register?" click="rotateEF.play()"/>

运行效果：

图 1. 登录窗口

图 2. 绕 Y 轴旋转 50 度后界面效果 :

Figure xxx. Requires a heading

布局模型

在 Flex 3 中我们常用到的容器布局组件有 Canvas、HBox、VBox、Tile 等等，每一种对应一种排列子组件布局的样式，如 Canvas 只支持绝对定义，HBox 只支持横向排列子组件，VBox 只支持竖向排列子组件，Tile 平铺子组件可自动换行显示，很明然这些容器布局的实现算法与容器是绑定在一起的，重用性较差，而且这些重量级的容器组件大量使用后会导致最终生成的 SWF 体积非常大，不利于 WEB 界面显示，所以官方建议尽量用 Canvas 布局，少用或不用其它容器组件。在 Flex 4 中，布局的实现算法与容器完全分离。

Spark 布局算法的类型分为四种：BasicLayout( 绝对定位布局 - 默认），HorizontalLayout( 水平布局 )，VerticalLayout( 垂直布局 )，和?TileLayout( 格子布局方式 - 新增 )，并且开发人员可以自定义布局。常见的容器有：Group、DataGroup、SkinnableContainer、SkinnableDataContainer、orderContainer 和 Panel，容器与布局组件可任意组合使用，这样布局的实现算法可以得到重用，与 Flex 3 相比，布局模型从继承父容器到组合使用容器得到了彻底的转变。Spark 容器组件对数据的支持也有功能上的增强，Flex 3 中容器中只能包含可视化的组件，Spark 在此基础上也支持基本的数据类型，如果 String，Number，Array 等等。

现在以一个登录表单页面来了解 Flex 4 的页面布局机制。

Flex 4 示例关键代码 :
<s:Panel width="312" y="34" x="87" height="206" dropShadowVisible="true" chromeColor="#B0BDC4" title="Login" cornerRadius="6" backgroundColor="#B0BDC4"> <mx:Form horizontalCenter="-1" top="10" backgroundAlpha="1" borderColor="#FEF8F8" borderStyle="outset" backgroundColor="#FFFFFF" width="289" height="118"> <mx:FormItem label="UserName:" backgroundAlpha="0"> <s:TextInput/> </mx:FormItem> <mx:FormItem label="Password:" backgroundAlpha="0"> <s:TextInput/> </mx:FormItem> <mx:FormItem label="Group:" backgroundAlpha="0"> <s:ComboBox> </s:ComboBox> </mx:FormItem> </mx:Form> <s:Button label="Cancel" fontSize="12" bottom="13" x="218"/> <s:Button label="Submit" fontSize="12" bottom="13" x="131"/> </s:Panel>

运行效果：

图 3. 应用 Flex 4 界面元素及布局组件实现的登录界面

我们以实现同样的功能，看一下在 Flex 3 中是如何实现的,

Flex 3 示例关键代码：
<mx:Panel x="48" y="75" width="295" height="192" title="Login"> <mx:Form horizontalCenter="0" top="5" backgroundAlpha="0"> <mx:FormItem label="UserName:" backgroundAlpha="0"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Password:" backgroundAlpha="0"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Group:" backgroundAlpha="0"> <mx:ComboBox></mx:ComboBox> </mx:FormItem> </mx:Form> <mx:ControlBar bottom="10" right="10" horizontalAlign="right"> <mx:Button label="Submit" fontSize="12"/> <mx:Button label="Cancel" fontSize="12"/> </mx:ControlBar> </mx:Panel>

运行效果：

图 4. 应用 Flex 3 界面元素及布局组件实现的登录界面

根据以上两个实例的比较，在代码结构中有明显的区别。Flex 3 的 Panel 容器中只有位置上很少的属性设置，而 Flex 4 做了很多属性样式的设置，这是因为 Flex 3 中 Panel 容器内置了很复杂的样式及布局算法，而在 Flex 4 中 Panel 只是做为一个存放可视组件的容器，样式需要自定义实现，Flex 3 和 Flex 4 生成的 SWF 的文件大小分别是 73KB 和 43KB。

这里只是很小的简单实例，如果比较复杂的界面布局中，Flex 4 的容器及布局的组合应用，将在灵活性和程序优化上得到更大的体现。

本地文件操作

做为 WEB 应用程序对客户端机器的文件操作都有安全性的限制，如果在实现对本地文本文件的读写操用只能采用 JavaScript 和 fileinput 控件来获取本地路径，再对本地文件进行读写操作。而在 Flex 3 中则是通过间接调用 JS 来实现，从本质上讲都是一种方法。对于该问题 Flex 4 提供了新的文件操作类?FileReference,该类包含对本地文件的读取和写入所有方法，而且与之前的方法相比使上方便了许多。

关键代码：

importflash.net.FileReference; varfileRef:FileReference = newFileReference(); private function openfile():void{ // 注册选择文件事件 fileRef.addEventListener(Event.SELECT,selectHandler); // 注册文件加载事件 fileRef.addEventListener(Event.COMPLETE,onLoadComplete); // 打开浏览文件窗口选择文件 fileRef.browse(); } private functionselectHandler(event:Event):void{ varfile:FileReference = FileReference(event.target); // 加载文件内容 file.load(); } private functiononLoadComplete(event:Event):void{ // 读取文件内容 vartxtStr:String = fileRef.data.readMultiByte(fileRef.data.length,"utf-8"); } protected functionsaveBtn_clickHandler(event:MouseEvent):void{ fileRef.save(txt.text,"edb.txt"); }

皮肤与样式表

Flex Builder 4 缺省主题样式是 Spark 主题，我们之前提到过 Flex 4 保留了 Flex 3 的皮肤和组件架构，即 Flex 4 同时包含有 Halo 和 Spark 两种主题皮肤，所以你可以通过设置项目的属性来改变当前项目的主题样式。通过“Properties”（属性）->“Flex Theme”（Flex 主题）面板将主题从默认 Spark 主题改为 Halo。在“Flex Theme”（Flex 主题）面板中，单击 Halo 主题，并保存。

修改 Flex4 主题样式

图 5.Flex 4 提供的主题皮肤选项列表

选择 CSS 模板样式

CSS 模板是对界面配色方案的定义。Flex 4 提供了以下五种 CSS 模板。

图 6.CSS 配色模板列表

设置界面风格

在该设置界面的 Flex 4 Graphical Samples 中可以选择界面风格，比如金属风格 (Arcade)、深蓝色金属 (CobaltGraphical)、石墨 (GraphiteGraphical)、木纹风格 (Zen)

图 7. 界面风格选项列表

使用 Flex4 提供的这些主题模板可以实现快速建模，提高开发的效率。

双向数据绑定

双向数据绑定是 Flex 4 的一个新特性，顾名思义就是将两个对象的值绑定在一起，无论哪个对象的值发生变化，与之绑定的另外一个对象上的值也会发生相应的变化。一般我们会将数据模型与页面表单的值绑定在一起，当表单值发生改变时，表单值也会自动更新到数据模型上，再用数据模型做一些值有效性校验，这样省去额外的代码，只需一个绑定符即可，也使代码整体上很简洁。

我们通过具体实例来比较 Flex 3 与 Flex 4 中如果同样实现双向数据绑定的方法的差别，实例要实现的功能是任意一个文本框输入，两个文件框都可以同步显示，

关键代码如下：

在 flex3 中，数据的双向绑定用：

在 FLEX4 中，数据的双向绑定用：

很明显，Flex3 要实现双向绑定，就必须用数据绑定符“{}”将两个文本输入框的值都绑定，而 Flex 4 中则使用新增加的双向数据绑定符 “@{}”来实现。

MXML 图形元素

在 Flex 3 中如果我们要显示一个矢量图形，我们就要通过可视化组件的 graphics 对象调用绘图 API 来完成，对此，Flex 4 向开发者提供一组基本几何图形类，通过 MXML 标签描述设定其属性来完成矢量图形的绘制，此外这些图形元素还支持渐变色、透明度、位图填充等功能。

我们以 MXML 图形标签绘一个有立体效果的圆体来了解 Flex 4 的图形元素标签的应用。。

关键代码：
<s:Ellipse width="100" height="100" x="281" y="171"> <s:filters> <mx:DropShadowFilter color="0x000000" alpha="0.7" distance="10" angle="45"/> </s:filters> <s:fill> <s:RadialGradient> <s:GradientEntry color="#ffff99" alpha="1" ratio="0"/> <s:GradientEntry color="#ff6600" alpha="1" ratio="1"/> </s:RadialGradient> </s:fill> </s:Ellipse>

运行效果：

图 8. 圆球立体效果

该示例应用了 MXML 图形元素 Ellipse( 用于绘制圆形或椭圆 ) 标签，滤镜效果 (DropShadowFilter)，还有填充渐变色功能来完成。

总结

本文以对比的方式介绍了 Flex 4 带来的部分新特性，未提及的部分请读者关注 Flex 的官方文档或在实际使用过程中自行体会。希望本文能对 Flex 使用者带来帮助。

参考资料

学习

您可以参考?Flex 4 API?全面了解组件的功能。
如果想对 Flex 4 Skin 有更详细的了解可以参阅 developerWorks 的?《用于创建 SaaS 的 Flex 4 特性》。
从?Adobe Open Source?随时关注更多关于 Flex 4 SDK 内容。
安装?Tour de Flex查看 Flex 4 组件应用实例及代码。
随时关注?AIRIA?开发交流论坛，关注 Flex 开发过程中遇到的难题，分享 Flex 开发经验心得。
developerWorks Web development 专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过?Web 2.0 新手入门?栏目，迅速了解 Web 2.0 的相关概念。
查看?HTML5 专题，了解更多和 HTML5 相关的知识和动向。

讨论

加入?developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!