【AICon】AI 基础设施、LLM运维、大模型训练与推理,一场会议,全方位涵盖! >>> 了解详情
写点什么

Flex 4 的十大变化

  • 2009-07-26
  • 本文字数:3879 字

    阅读完需:约 13 分钟

本周 Adobe 发布了 Flex 4(Gumbo)的首个官方 beta 版。该版本包含了众多的变化。本文从较高层次审视了这个流行 RIA 框架的最新版,讨论了其所发生的主要变化。

1. 集成 Adobe Catalyst

Flex 4 的一个主要特性就是提供了对 Adobe Catalyst(Adobe 新的设计工具,用于创建富 Internet 应用而无需编写代码)集成的支持。Catalyst 改变了开发者与设计者协作的方式,因为它清楚地知道应用开发者与设计者之间工作方式的显著差异。这样开发者与设计者都能专注于自己所擅长的领域,凭借 Catalyst,无论开发者还是设计者都能按照自己所习惯的方式进行工作。Flex 4 中的很多变化都是围绕着 Flex 与 Catalyst 的集成进行的。请查看 Adobe Catalyst 站点以了解其详细信息。

2. Spark 组件架构

Flex 的每个版本都包含了完整的组件库,其中含有用于构建应用的通用组件,如数据表格、按钮及布局容器等等。Flex 4 的底层组件架构名为 Spark,而在 Flex 3 中则叫做 Halo。为了支持 Catalyst,Flex 4 更新了底层的组件模型以达到松耦合的目的。

在新的 Spark 组件模型中,核心逻辑、皮肤以及布局都被分开了,这样我们就能单独处理其中任意一部分而又不会影响到其他部分。Spark 组件模型构建于 Halo 组件模型之上,这意味着 Spark 扩展了 Halo 的核心基类 UIComponent,这样我们就能以增量的方式使用 Flex 4,同时还能将 Flex 3 组件应用在 Flex 4 应用中。

除此以外,Flex 4 还对效果(effect)进行了增强。现在可以将效果应用在任意的对象和类型上,这么做提升了其灵活性。Flex 4 的效果由新的“spark.effects”包实现。就像新的组件库一样,Flex 4 的效果也被重新实现了,但却并没有对 Flex 3 的效果进行任何变更,这么做的目的是为了保持向后兼容。请查看 Chet Haase 所写的关于Flex 4 效果的文章或是其博客以更多地了解Gumbo Effect。

阅读白皮书以更多地了解Spark 架构

3. MXML 2009

MXML 基于 XML,构建于 Flash Player 所用的编程语言——ActionScript 3 之上。MXML 用于对用户界面和支持工具(比如说 IDE,现在是 Catalyst 了)的视图区域进行布局。MXML 2009 包含了大量更新以对不同的行为(核心、皮肤和布局)进行解耦,同时还提供了新的组件库。现在 Flex 4 的组件在其自己的包中(spark.components)得以实现,同时又没有对 Flex 3 的组件进行任何变更,为此 MXML 2009 专门提供了一个新的命名空间以提供支持。

下面的应用声明示例展示了如何使用该命名空间以及如何为 Spark 和 Halo 组件定义命名空间:

<s:Application
xmlns:fx=“ http://ns.adobe.com/mxml/2009
xmlns:s=“library://ns.adobe.com/flex/spark”
xmlns:mx=“library://ns.adobe.com/flex/halo”>

这样,我们就可以通过下面的代码声明 Flex 4 的 Button:

<s:Button label=“My Flex 4 Button” />

下面的代码声明了 Flex 3 的 Button:

<mx:Button label=“My Flex 3 Button” />

请浏览 MXML 2009 规范以深入了解其变化。

4. 对 View States 的改进

Flex 2 将状态(states)概念引入到了 Flex 框架中,这样我们就可以通过简单的状态改变来管理视图组件的变化。Flex 4 改进了视图状态(view states)以简化其语法,这样我们就能更轻松地使用他们了。新语言属性 includeIn 和 excludeFrom 就是简化语法的一个例子,我们可以设定组件的这两个属性值以响应状态变化(参见下面的代码示例)。

<m:states>
<m:State name=“A”/>
<m:State name=“B”/>
<m:State name=“C”/>
</m:states> <!-- This button will appear in only states A and B -->

点击这里以进一步了解View States 的变化。

5. FXG 支持

Flash Player 的核心是个绘图引擎。Adobe 在 Flash Player 10 中引入了 FXG,现在又将其引入到了 Flex 中。FXG 是个声明式的图形格式,可以在工具间传递内容,这意味着设计者可以在 Catalyst 或 CS4 Illustrator 中创建内容,接下来 Flex 应用开发者就可以将其导入并使用而无需修改任何内容。

请阅读 FXG 规范以了解更多细节信息。

6. 皮肤增强

Spark 组件模型最大的变化在于对皮肤的颠覆性改造,现在皮肤可以控制组件的所有可视化部分,同时还将逻辑封装到了组件核心之外。这样我们就可以对组件的可视化部分进行独立修改而不会影响到底层的核心逻辑。

来看看 PanelSkin.mxml 皮肤文件吧,Panel 容器的默认皮肤代码如下:

<s:SparkSkin xmlns:fx=“ http://ns.adobe.com/mxml/2009 ” xmlns:s=“library://ns.adobe.com/flex/spark” alpha.disabled=“0.5”> fx:Metadata

<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent(“spark.components.Panel”)]
]]>
</fx:Metadata> fx:Script

/* Define the skin elements that should not be colorized.
For panel, border and title backround are skinned, but the content area and title text are not. */
static private const exclusions:Array = [“background”, “titleField”, “contentGroup”]; /**

* @copy spark.skins.SparkSkin#colorizeExclusions
*/
override public function get colorizeExclusions():Array {return exclusions;} /* Define the content fill items that should be colored by the “contentBackgroundColor” style. */

static private const contentFill:Array = [“bgFill”]; /**

* @inheritDoc
*/
override public function get contentItems():Array {return contentFill};
</fx:Script> <s:states>

<s:State name=“normal” />
<s:State name=“disabled” />
</s:states> . . . . .

<s:Rect left=“1” right=“1” top=“31” height=“1”>

<s:fill>
<s:SolidColor color=“0xC0C0C0” />
</s:fill>
</s:Rect> <!-- layer 5: text -->

<s:SimpleText id=“titleField” lineBreak=“explicit”
left=“10” right=“4” top=“2” height=“30”
verticalAlign=“middle” fontWeight=“bold”>
</s:SimpleText> <s:Group id=“contentGroup” left=“1” right=“1” top=“32” bottom=“1”>

</s:Group> </s:SparkSkin>

由于该皮肤文件唯一的作用就是控制 Panel 容器的可视化外观,因此设计者可以修改组件的样式而无需编辑其源代码,也不必了解组件的内部行为。更为重要的是,设计者可以按照自己熟悉的方式来使用 Catalyst。

点击这里深入了解Gumbo 的皮肤组件。

7. 更新的布局组件

熟悉 Flex 开发的人可能会注意到 Flex 3 中的大多数容器都已经不在 Gumbo 组件库中了。这是由于布局已经被解耦了,现在我们需要通过代理(delegtion)来处理他们。因为大多数 Flex 3 容器仅仅就是为了提供不同的布局样式(比如说用于水平布局的 HBox,用于垂直布局的 VBox 等等),因此现在他们已经没什么用了。

下面的示例表明 Flex 开发者现在也可以定义布局了。该示例利用 Group 类来管理按钮,Group 是个新的 Spark 类,用于管理其中的内容条目。布局的结果就是两个并排放置的按钮,就像是使用 Flex 3 中的 HBox 的结果一样。

<s:Group width=“400” height=“400”>
<s:layout>
<s:HorizontalLayout paddingLeft=“5” paddingTop=“5” />
</s:layout> <s:Button label=“Button 1” />

<s:Button label=“Button 2” />
</s:Group>

来自 Adobe 的 Ryan Stewart 对新的布局机制进行了深入分析

8. Flash Builder 4

Flash Builder 4(之前叫做 Flex Builder)是面向应用开发者的最新的 Eclipse IDE。该新版本带有众多更新,包括条件调试断点、更多的重构工具并支持 FlexUnit 4。一如往常,它还包括 MXML、ActionScript 3、可视化设计器以及 Flex 性能与内存分析器(只有专业版才有该性能分析器)。

除此之外,该最新版还提供了高级的数据管理特性以简化数据为中心应用的开发。这包括客户端的数据管理特性,它可以处理 CRUD 操作以及在大集合中进行滚动。

点击这里来深入了解该IDE。

9. 编译器性能

几乎每个 Flex 3 开发者心中都有一个痛——糟糕的编译器性能。基于此,Gumbo 的一个主要目标就是改进 Flex 4 中的编译器性能。虽然官方尚未发布性能基准,但来自 Adobe 的 Peter Donovan 根据自己所作的一些试验对其进行了测试,结果表明新的编译器性能提升了 25%。他说要想将性能提升 3 到 4 倍只能进行重新设计。当然了,每个企业级 Flex 应用的开发者都希望今年底 Flex 4 正式发布时能实现这一点。

请阅读 Peter Donovan 的文章来深入了解相关信息。

10. 新的文本功能

Flash 应用(无论是 Flex 还是非 Flex 应用)的一个主要议题就是高效处理文本的能力。在 Flash Player 10 中,Adobe 引入了全新的文本引擎以支持 RIA 的需要(多语言、打印以及键盘快捷键等等)。Gumbo 引入了大量新的文本类(RichText、 SimpleText 等等)以在 Flex 框架中提供更健壮的文本支持。除此以外,Adobe 正在全力开发新的 Text Layout Framework 以赋予 ActionScript 3 开发者利用 Flash Player 文本引擎的能力。请点击这里以深入了解Text Layout Framework。

如你所见,Flex 4 代表了该流行的RIA 平台的巨大进步。请查看Matt Chotin 的文章《What’s new in Flex 4 SDK beta》来深入了解Flex 4 SDK 的变化。

作者简介

Jon Rose 是 Gorilla Logic, Inc. (位于科罗拉多州的博尔德)的一名企业软件咨询师和 Flex 业务主管。他还是知名的企业软件社区 InfoQ.com 的编辑。另外,他是 DrunkOnSoftware.com 的主办人之一,这是一个面向那些爱豪饮的朋友的视频网站。他的客户有小公司,也有政府部门。爱解决难题的天性使其致力于开发高质量的软件。你可以通过其博客了解他。


感谢宋玮对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。

2009-07-26 22:3110759
用户头像

发布了 88 篇内容, 共 258.7 次阅读, 收获喜欢 8 次。

关注

评论

发布
暂无评论
发现更多内容

imazing2023免费版iOS管理工具

茶色酒

imazing2023

自己手写一个redux

helloworld1024fd

JavaScript

JPEX推出竞猜世界杯冠军球队活动,质押平台通证赢奖金

股市老人

leetcode 220. Contains Duplicate III 存在重复元素 III(困难)

okokabcd

LeetCode 数据结构与算法

开源浪潮下,Apache APISIX 如何成为全球最活跃 API 网关

API7.ai 技术团队

API网关 APISIX 网关 OpenSergo

全新出品!Github总榜排行第七的SpringCloud生态全栈笔记我粉了

Geek_0c76c3

Java 数据库 程序员 架构 面经

MathType2023软件安装word教程

茶色酒

MathType2023

EasyRecovery2023绿色版下载安装教程分享

茶色酒

EasyRecovery15 easyrecovery2023

划重点!2022面试必刷461道大厂架构面试真题汇总+面经+简历模板

Geek_0c76c3

Java 数据库 程序员 架构 面试

两种方式修复谷歌翻译无法使用问题

echeverra

FL Studio水果软件最新21中文版编曲工具

茶色酒

flstudio FL STUDIO20.9 FL Studio 水果FL Studio

一步步实现React-Hooks核心原理

helloworld1024fd

JavaScript

OA是什么意思?

优秀

OA oa办公系统 OA是什么意思

一文带你理解@RefreshScope注解实现动态刷新原理

JAVA旭阳

Java spring 10月月更

太神了!阿里p7大佬总结的Java面试心得,起始—进阶—突击,一应俱全!

Geek_0c76c3

Java 数据库 开源 程序员 架构

优秀!阿里甩出GC面试小册,仅7天Github获赞96.9K

Geek_0c76c3

Java 数据库 程序员 JVM 规划

easyrecovery2023数据恢复软件功能介绍

茶色酒

EasyRecovery easyrecovery2023

后CNN探索,如何用RNN进行图像分类

华为云开发者联盟

人工智能 华为云 CNN 企业号十月PK榜

CDR2023最新版本有什么新功能?

茶色酒

easyrecovery15注册机非常强大的数据恢复软件

茶色酒

EasyRecovery Easyrecovery破解 EasyRecovery15

超详细教程:在Blender中打造毛毡风格角色

Renderbus瑞云渲染农场

blender Renderbus瑞云渲染

怎样徒手写一个React

helloworld1024fd

JavaScript

基础设施 NFTScan 正式发布 Avalanche 网络 NFT 浏览器

NFT Research

区块链 NFT web3 数据基础设施 Avalanche

技术内幕 | StarRocks Pipeline 执行框架(上)

StarRocks

数据库

会声会影2023全新功能介绍

茶色酒

会声会影 会声会影2023

CleanMyMac X2023苹果电脑必备下载软件

茶色酒

CleanMyMac X

面试官:你说说Vue中的组件和插件有什么区别?

CoderBin

vue.js 面试 前端 组件 10月月更

从零手写react-router

helloworld1024fd

JavaScript

太强了!阿里巴巴最新开源303页Spring全家桶高级笔记,深入瓦解源码

Geek_0c76c3

Java 开源 程序员 架构 开发

京东的“618”高并发秒杀终极版教程!(Java语言设计)

程序知音

Java 架构 并发编程 高并发 后端技术

打造面向工业4.0的智能工厂01|云边协同架构助力视觉AI缺陷检测应用构建

EMQ映云科技

AI 物联网 IoT emqx 10月月更

Flex 4的十大变化_Java_Jon Rose_InfoQ精选文章