[转] [Flash/Flex] Flex框架下的RIA开发现场 -- 第1回 Flex 4与FlashCatalyst的基础知识

http://bbs.9ria.com/thread-75529-1-1.html

 

资讯类型: 翻译

来源页面: http://www.atmarkit.co.jp/fwcr/rensai2/flex4_01/01.html

资讯原标题: Flexフレームワークで変わるRIA開発の現場 -- 第1回 ワークフローを変えるFlex 4とFlash Catalystの基礎知識

资讯原作者: 高橋俊光

我的评论: 

对这篇文你有啥看法，跟贴说说吧！欢迎口水和板砖，哈哈。欢迎大家和我们一同分享更多资讯。

本帖最后由 flashjerry 于 2011-3-9 22:10 编辑

 

 

第1回 改变了工作流的Flex 4及Flash Catalyst的基础知识

Flex4框架在Adobe CS5中担当着新的核心角色。本连载将从工作流开始，围绕着RIA开发现场发生的变化，以及Flash Builder 4、Flash Catalyst、Adobe AIR 2等技术、工具、框架的功能做一翻介绍和解说。

 在CS5中担当着新核心角色的Flex4框架

    推动Flash成为富客户端/RIA领域强力平台的开发框架Flex，终于在日前发布了4.0版。以Eclipse为基础的集成开发环境Flash Builder(以前叫Flex Builder)也同样提升到4.0版。

    更值得一提的是，此次又出现了一个全新的交互式设计工具Flash Catalyst。Flash Catalyst全称是Adobe Flash Catalyst CS5，它是Adobe Creative Suite 5（CS5）系列产品之一。

    Flash Catalyst读取SteelDesign，包含各种特效、过渡等互动元素。通过GUI编辑便可构筑界面。

 

 

 

 

    此外，与Flash Catalyst CS5同样，Flash Builder（标准版）也被包含在CS5的Web专业版和大师版中，这令RIA开发的环境准备工作变得更加轻松。

 

 

用Flash Catalyst进行RIA开发，会发生怎样的变化?

    随着Flex 4和Flash Catalyst的出现，RIA开发的工作流也将获得改善。

 

□ 迄今为止的UI设计工作流

    在应用Flex进行基于Flash的RIA开发中，用户接口（UI）设计是由UI设计师本人或程序员根据针对Steel Design创建MXML，再为各个画面状态的定义外观及其状态间转换时的效果等。将这些动态交互设计通过MXML/ActionScript编码展现出来，得到更直观的印象。这些工作，不论哪个都需要会Flash Builder的程序员或理解MXML/ActionScript的设计师才能进行。

 

    若设计人员自己便能将交互设计为止的工作具体实现是最好不过了，但实际情况却是设计人员通常在Photoshop、Fireworks、Illustrator上面进行工作。UI设计的一般流程是这样子的，设计师和程序员通过一起看这些设计软件的输出文件来进行交互设计的传达，程序员用Flash Builder做出原型，再由设计师确认原型的行为直至双方都觉得没有问题。 

 

图1　迄今为止的UI设计工作流

 

 

    至今为止，由于RIA是“富”的，基于交互的设计场景自然必不可少。然而实际情况中，程序的实现是取决于程序员的，能否正确地反映设计者的初衷是个难题。

    Flash Catalyst工具解决了以上问题。接下来将介绍一下工作流发生了怎么样的变化。

 

□ 今后的UI设计工作流

    若使用Flash Catalyst，即使设计师不精通MXML/ActionScript，也不用依赖于程序员编码，便可将自己的想法原原本本地呈现出来。过去，设计师会由于对程序员的说明，或实际编码困难等原因而考虑重新设计。现在，可以从这些返工作业中解放出来了。

    这些设计文档以MXML文件形式保存。Flash Catalyst中存在设计视图和代码视图。切换到代码视图，就会显示出Flash Builder那样的项目文件树形视图和组件的MXML代码。建立及编辑好的项目，能保存为可导入到Flash Builder的FXP（Flex Project）文件。

 

图2　今后的UI设计工作流

 

    FXP文件就像是将此前的Flex项目原封不动地作了ZIP压缩。通过该FXP文件，能实现将设计无偏差地从设计师传递到程序员的工作流。

 

在Flex4中改进了的MXML包含了哪些内容？

    前文讲到通过Flash Catalyst能进行形形色色的交互设计，这同时也意味着只通过MXML便能完全地完成这些定义。在Flex4之前，做丰富的皮肤渲染处理时，必须先要理解组件的内部定义才能进行ActionScript编码。

    为此，在Flex4中引入了一个新的“Spark组件”架构，将组件的动作与皮肤、外观分离而独立出来，使得在Flash Catalyst中能够进行基于MXML的设计。

 

□ Spark组件

    Spark组件，是将先前版本中“mx.*”包下的组件（也称“Halo组件”）的内部定义（生命周期）重载而成的架构。观察Spark组件的继承关系可以发现，它们与Halo组件同样继承了mx.core.UIComponent基类。

    另外，在Spark组件中目前还没有DataGrid等控件，需要时得同时使用Halo组件。

    ※译者按：MX组件包括50多个控件。在Flex4发布时，Spark组件大约重载了20多个MX组件，并在不断地进行着完善，最终会完成所有MX组件的重载工作。而在这之前可能需要在画面中混用Spark组件和MX组件。幸运的是，笔者在翻译本文时，Spark DataGrid已经发布了。

 

□ Flex 4的命名空间

　Flex 4的MXML，除了引入Spark组件等之外，还为了明确区分可视化与非可视化元素而改变了标签的构成。命名空间（包名）也随之进行了重新定义。

 

命名空间 前缀 URI 概要

MXML2009 fx   http://ns.adobe.com/mxml/2009 MXML语言的新命名空间。为从组件中分离出非可视化元素而使用。

Spark组件 s library://ns.adobe.com/flex/spark 为与MXML2009一同定义Spark组件而使用

Halo组件 mx library://ns.adobe.com/flex/mx 为MXML2009一同定义既存的Halo组件而使用

MXML2006 mx http://www.adobe.com/2006/mxml 用于在Flex4中使用既存的MXML语言标准，与以上3个区别使用的向下兼容的命名空间

 

 

□ 让MXML能进行图像化定义的FXG

    Flex4的MXML含有一套用来作图形化定义的子集,称为FXG（FleX Graphics）。并为FXG增加了扩展名为.fxg的文件格式。Photoshop、Fireworks以及CS5开始的Flash Professional都能生成FXG格式的文件。此外，还能被矢量图形处理软件Illustrator所存取。

    在Flash Catalyst中，若要修改被读取对象的设计，只要在上下文菜单中选择“在Illustrator中编辑”便可。编辑中途和编辑完成后的反映都能在两者之间顺利转换。

 

RIA开发的“团队构成”也会发生变化吗？

    Flash Catalyst能导出SWF文件。因此，能将该文件直接交给用户在Flash Player上确认设计。由此，Flash Catalyst也支持原型数据的编辑。通过原型给用户确认设计的阶段 ，可以跳过程序员而进行，这也关系到降低成本吧。

    然而，就像非Flash设计人员会问到诸如“动画能做到什么程度？”之类不一而足的问题。我们也可以反过来说，在RIA开发中具备着能让设计人员最大限度地发挥实力的环境空间。

    随着Flash Player将触角伸向Android等移动环境，担任设计人员的工作增多，在开发团队中与程序员的人数比例也或将发生变化。 

栏目　「Flash Builder也能作为高效的原型开发工具吗?!」

    我认为既不必使用Flash Catalyst，也无需借助于交互式设计，也能进行应用程序开发。只要使用Flash Builder就能做原型设计。Flex拥有种类丰富的组件，通过拖拽等GUI操作便能获得需要的MXML设计视图。

    Flash Builder 4预装了Flash Catalyst组件的默认数据--线框图（Wireframe），能方便地进行原型设计。下载试用一下有使用期限的免费版便可有所体会。