探索Flash Catalyst和Flash Builder工作流程

来源:我要学flash网 | 作者:admin | 发表时间:2011-02-16 | 点击:  次

RIAMeeting翻译小组成员张志为翻译。

作为一个专业的交互设计工具,在富因特网应用(RIA)开发的世界里,Adobe Flash Catalyst的加入为设计者和开发者提供了一个基于Flex框架进行高表现力的web和桌面应用程序生成的机会。

任何新工具的引入都会带来一些问题,比如谁应该使用它,它将在何种程度上影响现有的工作流程,以及您如何适应设计和开发过程以接受它所提供的机会。

在这篇文章中,我将为使用Flash Catalyst and Adobe Flash Builder 4作为富因特网应用程序开发过程的一部分探索出一套工作流程。 更具体地说,我将讨论以下工作流程:

  • 交互式内容(不含动态数据)
  • RIA,线性设计和开发
  • RIA,迭代开发(单个项目/小团队)
  • RIA,以原型为导向的(prototype-lead)开发
  • RIA,迭代开发(多个项目/大团队)

任何上述的内容都可能会刚好适合您的需要,但是,更可能的情况是,您将希望根据您的团队规模、团队内部的技能现况以及您正在进行的项目的范围来合并、改写和定制工作流程。

要求

为了充分利用本文,您可能需要下载以下软件:

Flash Builder 4

Adobe Flash Catalyst CS5

预备知识

使用Flash Catalyst和Flash Builder 4的知识

关于作者

Andrew Shorten是Adobe的Flash Builder高级产品经理,热衷于提高基于计算机体验的质量、丰富程度和价值。 Andrew在富士通(Fujitsu)工作期间经常为政府和企业客户开发网站、kiosk和移动用户界面。 从为Macromedia、Microsoft和Adobe工作起,他就开始与设计者、开发者、web代理和组织合作来帮助他们提供丰富、吸引人和成功的web和桌面体验。

理解典型的角色

在看具体的工作流程之前,对富因特网应用程序开发中角色的了解是很重要的。

在不同的项目的项目里面,角色范围的要求是有很大不同的,但是一般来说,您将需要创建设计图,考虑应用程序屏幕的布局,规划导航、行为和应用程序内的交互,最后还要创建一些可以展示给终端用户的东西。 这些是在本文中考虑工作流程时我将讨论的核心角色。

当然,还有其他的角色,您可能需要,也可能不需要依赖您的项目的于复杂性和范围,包括系统架构的定义,服务的开发,或者支持服务器端的基础设施,质量保证,安全和项目管理。 我认为这些角色超出了本文的范围,因为我的目标是把重点放在使用Flash Catalyst和Flash Builder进行客户端的RIA开发。

图1. 一个典型RIA开发团队中角色的识别

注意,我这里所说的角色不是指人或工作的头衔。 根据项目的大小和复杂程度,以及在其开发中需要的技能,这种情况也是可能出现的,即一个人承担所有这些角色,并且他或她一个人做完所有事情。 同样,这种情况也是有可能的,即在一个大的团队里,将每一个角色都拆分成特殊的子域并分配给个人。

工作流程1:交互式内容(不含动态数据)

术语富因特网应用程序包含大量不同的用例(use case),从开发的角度看,在一个更简单的层次上,它是这样一类应用程序,无需使用MXML或者ActionScript,Flash Catalyst可以辅助进行开发。

通过使用组件(component)、状态、时间线、交互和动作序列,完全可能创建一个富因特网应用程序,该程序可以被部署为一个SWF(Flash Player文件格式)并且可以使用安装了Flash Player 10的浏览器进行观看。

注意: 为了学习如何开始使用Flash Catalyst,您应该回顾以下资源:

在这个工作流程中,您将通过使用Adobe Illustrator CS4或者Adobe Photoshop CS4为您的应用程序创建一个作品(artwork),并将其导入到Flash Catalyst中,将图像转换成组件,向应用程序中添加状态,使用时间线在各个状态之间形成动画,并且添加互操作以允许用户在您的应用程序中导航(并且,可选的是链接到外部站点/资源(sites/assets)。

图2. 交互式的内容工作流程

已知的这种方法的主要限制是,它是不可能将动态数据加到您的应用程序中。 您可以创建数据感知的控件,并使用设计时数据面板将数据添加到您的应用程序中,但是这个数据在程序是由终端用户运行时不能改变。 为此,您需要考虑本文中提到的其他工作流程。

为了将您的Flash Catalyst工程导出以便可以被部署到Flash Player上,在主应用程序菜单中转到File > Publish to SWF/AIR。

工作流程2:线性设计和开发

作为一个独立的RIA开发工具Flash Catalyst有着它的限制,显然,它是一个交互设计工具,而不是一个开发环境。 为了创建一个扩展Flash Catalyst提供的函数的应用程序,在该程序中您需要进行代码编辑或者添加新的MXML文档或ActionScript类,那么您将需要使用Flash Builder。

Flash Builder是一个专业的集成开发环境(IDE),提供旨在使用ActionScript和可选地Flex框架进行开发富因特网应用程序所需的功能。

进一步分析工作流程1中提到的限制,举一个具体的例子,在该例子中您将需要在开发过程中使用Flash Builder,这个例子就是,您的应用程序需要在运行时从一个web server、web service或一个第三方的API(应用程序程序员接口)获取数据。

使用工作流程1相同的方法,您使用一个Creative Suite工具创建您的作品,将其导入Flash Catalyst,使用Flash Catalyst中的功能添加状态、动画和交互,接着将您的工程保存为一个FXP文件。 为了做到这一点,在Flash Catalyst的主应用程序菜单中转到File > Save As。

图3. 采用线性设计和开发方法创建RIA的流程

现在您可以将该FXP文件提供给那个负责实现应用程序中附加功能的那个人了;这个人可能就是您自己(如果您一个人创建整个应用程序),也可能是开发团队中的一个开发者。

在Flash Builder中,从主应用程序菜单中选择File > Import Flex Project(FXP),接着选择FXP文件,那么Flash Builder将创建一个新的工程,并导入Flash Catalyst在工程的交互设计阶段生成的代码(参见图4)。

图4. Flash Builder导入Flex工程对话框

在导入的工程中,您将看到Main.mxml文档(参见图5)。 这是主应用程序文件,它定义了每个状态的布局、任何状态间的转移和您在应用程序层面定义的交互。 这个文件不包含对任何您在Flash Catalyst中定义的组件的定义;这些都可以在组件包中被找到。

图5. Flash Builder中从Flash Catalyst导入的工程

注意:关于Flex 4中组件皮肤的信息可以参见Ryan Frishberg的介绍Flex 4 beta皮肤的文章。

作为那个负责定制或扩展应用程序的人,您现在可以使用Flash Builder中的代码和设计视图,或者利用Data/Services面板定义在运行时取数据的使用远程操作的调用。

注意:要了解更多的信息,可以参考我的那个关于使用Flash Catalyst、Flash Builder和ColdFusion设计和开发一个以数据为中心的应用程序的教程。

关于该线性设计和开发方法的限制,应该知道的是,它不考虑这样的场景,即您需要在从Flasho Catalyst导出并导入Flash Builder之后,对应用程序或者它的组件的可视化设计进行改动。

一旦您已经将一个Flash Catalyst的Flex工程导入到Flash Builder中之后,就不可能在Flash Catalyst中重新打开它了。 (开发团队将为将来的版本研究这一可选方法,但是这在Flash Catalyst的第一版本中将是不可用的。) 为了克服这一限制,可以考虑本文中的其他工作流程,特别是工作流程3,它扩展了这里所使用的方法以支持迭代开发。

工作流程3:迭代开发(单个项目/小团队)

如果您预计需要改变组件皮肤中使用的作品(artwork),或者在应用程序界面的其他地方,那么您将希望自己对该工作流程很熟悉。

建立在工作流程2之上,在您将FXP导入到Flash Builder并开始定制开发工作之后,现在需要将对可视化设计的改变包含到应用程序中。

这些设计上的改变应该在Flash Catalyst中被完成,通过打开原始FXP文件(即,之前从Flash Catalyst中保存,并导入Flash Builder使用的),进行必要的改变并保存成一个新的FXP文件。 建议您使用File > Save As来创建一个新版本的FXP文件,而不是覆盖之前的版本。

图6. 迭代开发,适用于单个项目和/或小的开发团队

在Flash Builder中您可以导入更新了的FXP文件,使用和之前一样的File > Import Flex Project(FXP)选项;但是,这一次Flash Builder将为您提供创建一个新的拷贝或覆盖现有工程的选择——您应该选择“Import new copy of project”。

图7. 选择“Import new copy of project”方法以包含设计改变。

一个新的Flex工程将会被在Flash Builder中被创建,它包括主应用程序文件和所有工程中使用的组件皮肤,不管它们自原始工程导入后是否已经改变。 整合Flash Catalyst中发生的变化是一个手动的过程,您必须使用Flash Builder进行;但是,有一个工具您可以用来辅助这项任务。

在新导出的Flex工程上点击右键,从上下文菜单Version > [Name of original project(原始工程名称)]中选择Compare Project(比对工程)。 Flash Builder将对比两个工程中的所有文件,并给出一个存在差异的文件的列表(见图8)。

图8. 在Flash Builder中比较两个工程以发现它们的差异

因为您应该不需要对组件皮肤自己进行重大的改变(任何被加入到工程中的业务逻辑都应该在主MXML文档中,例如新的MXML文档或者新的ActionScript类),所以组件皮肤中被高亮显示的将很可能是那些在Flash Catalyst中被改变的。

该对比工具提供了一种预览原文件和新文件之间不同的可视化方法,如此您可以决定是否将某个改变包含到工程中——使用工具栏遍历各个不同并将改变的代码从左边窗口复制的右边的窗口,或者按需从右边的窗口复制到左边窗口。

工作流程5提供了一种迭代开发的替代方案,适用于更加复杂的工程或者更大的开发团队。

工作流程4:以原型为导向的开发

并不是每个工程都是以您可以导入Flash Catalyst中的用户认可的或者最终的设计作品开始的。

在这一场景中,一种替代的方法是在Flash Catalyst中使用三维模型组件来创建应用程序的脚手架(scaffold)——这是应用程序的一个包含占位符组件的版本,有状态和交互的定义,这表示它代表了应用程序基本的交换模型,但是没有使用可视化设计(见图9)。

图9. Flash Catalyst中的三维组件面板

使用这种方法,脚手架工程可以用Flash Builder打开,应用程序开发工作可以在等待设计作品完成并获批准的同时继续进行。

图10. 使用基于三维模型工程同时进行设计工作以加快开发

为了给用于工程的三维模型组件创建组件皮肤,您可以在Flash Catalyst中依次选择每个组件,或者选择“Edit in place”(使用Flash Catalyst画图工具和属性面板来自定义设计),或者选择“Edit in Illustrator CS5”在Illustrator中加载并编辑作品。

当设计的修改完成后,保存一个FXP文件的更新版本,并使用工作流程3中描述的方法来将对组件皮肤的修改合并到您已存在的工程中。 或者,您可以同时使用三维模型组件和将在下一节描述的更高级的迭代开发工作流程。

工作流程5:迭代开发(多个项目/大团队)

在工作流程3中描述的迭代开发方法依赖于分析对比FXP文件的两个版本之后合并修改的不同手动处理。 在这种工作流程中,您使用另一种Flash Catalyst支持的文件类型,FXPL或者Flash Catalyst Library Package(Flash Catalyst库包)。

一个FXPL只包含组件皮肤、项目渲染器、自定义组件和您在您的工程中定义的支持的组件,而不包括主应用程序MXML文档。 这使得Flash Catalyst库包对于在多个Flash Catalyst工程之间共享一套可重用的组件是很理想的,也使得用单个包分发更新的各套组件皮肤以在Flash Builder中使用成为可能。

图11. 使用Flash Catalyst库包(FXPL)文件的迭代开发

该工作流程依赖于您的主应用程序文档和所有其他的支持用的MXML文档,还有在一个分离的Flex工程中定义的那些ActionScript类。 您可能选择使用前面描述的原型工作流程来创建该工程,或者您可以用Flash Builder从头开始开发该应用程序。

当您通过使用File > Import Flex Project(FXP)选项向Flash Builder中引入一个Flash Catalyst库包(FXPL)时,一个Flex库工程就被创建了。 这一类的工程包括那些被设计用于一个或多个Flex应用程序的代码,这些代码在独立的工程中被定义。

为了关联这个Flex库工程和您的应用程序,在包含您的应用程序代码的工程上点击右键,选择Properties,接着选择Flex Build Path > Library Path,点击Add Project选项,再接下来从显示的列表(见图12)中选择需要的库工程。 您应该看到库工程出现在编译(build)路径库列表中。 当您完成编译(compile)应用程序时,库工程中相关的代码将会被自动地被包含到您编译的SWF中。

注意:欲了解更多关于Flex库工程的信息,请参考Flash Builder文档。

图12. 为一个工程进行Flex Build路径设置,示意了一个库工程的使用

组件包包括所有组件皮肤(例如由Flash Catalyst所创建的)为用到您的Flex应用程序中现在是可获得的了,并且通过使用组件标签上的或CSS文档中的skinClass属性您可以将皮肤与合适的组件进行关联,例如:

<s:Button id="myButton" skinClass="components.myButtonSkin" />

当附加的组件皮肤变成可获得的或者现有的皮肤被更新了时,您可以导入一个新的FXPL,代替现有的Flex库工程,并且新的组件皮肤在您的Flex应用程序中将是可用的。 为了使该方法能够工作,请避免对Flash Builder的组件包中的文件进行修改。

一个超出本文范围,但是在使用这个工作流程时却很重要的地方是在一个Flex工程中用Flash Catalyst创建的一般/通用(custom/generic)组件的使用。 您可能会考虑将Flash Catalyst产生的组件转变成皮肤并将它们和从SkinnableComponent类扩展来基于ActionScript的组件一起使用,以便清晰地分离组件设计和业务逻辑。 这留给读者作为一个练习以深入研究这个选项(option),直到在Flex开发者中心未来出版一篇全面讲述该主题的文章。

其他工作流程

虽然不是一个官方的推荐工作流程列表,但是本文所提到的所有方法在Flash Catalyst和Flash Builder的现有各版本中都是被支持的。

在您使用Flash Catalyst和Flash Builder工作时,您可以考虑一些第三方工具和其他可选择的工作流程;这些经常可以进一步提高高级开发者的生产力。 但是,请注意,其中有些工具可能使用了不支持的或者非推荐的方法,从而导致它们不能和Flash Catalyst和Flash Builder的未来版本配合使用。

下一步去哪里

欲探讨Flash Catalyst并贡献更多建议(hints and tips),请访问Adobe Forums的Flash Catalyst板块。 欲学习使用Flash Catalyst,请参考Flash Catalyst开发者中心的相关资源和教程。 也可以参考Adobe实验室(Adobe Labs)上的WorkflowLab(测试版)。 WorkflowLab(测试版)包括很多功能以方便利用它来创建、分享和跟踪工作流程,并方便使用工作流程最佳实践开始一个新的工程。 它可以被用于计划工程任务和全面的工作流程,并可以为工程的事后分析组织想法,或者可以被用于使用内置的工作流程起点学习最佳实践。


本文引用地址:
  最新评论: 共有位网友发表了评论
  发表评论:
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: