
原文地址Top 10 Mistakes when building Flex Applications
使用RIA框架构造Web 1.0的应用程序。
One of the largest challenges when moving from Web 1.0 applications to the RIA’s development paradigm is learning to think differently. Flex gives developers an advanced component library that allows for doing things that simply weren’t possible only a few years ago. Often, the power of Flex is missed, and the framework is used to implement more traditional Web 1.0 applications.
从Web 1.0应用程序转到RIA程序开发上时一个很有挑战的事情是学会以不同的方式思考。Flex为开发者提供了一个高级组件库,使用这些组件就可以很简便的做一些前些年都不可能的事情。但是,常常会忘了Flex的这个强大功能,而仅仅使用框架开发传统的Web 1.0应用程序。
Building Web 2.0 applications is more than partial page refresh and rounded corners. For example, Flex developers should be using vectors to provide users a visual understanding of data, and advanced controls for a rich application flow. Stephan Janssen discusses this struggle recently with InfoQ.com:
As a Java developer, learning Object Oriented ActionScript and the UI markup language is really a walk in the park. The challenge however for (Java) developers is that we’re not designers, and with RIA technologies these two skills are very much needed.
构建Web 2.0应用程序不仅仅是实现页面的局部刷新和圆角。比如,Flex开发者应该使用图形把数据以可见、易懂的方式展示给用户,并提供对应用程序流程控制的高级操作。Stephan Janssen 这样说:对于一个Java开发者,学习面向对象的ActionScript和UI标记语言是很简单的事情。但是对于Java开发者来说,困难在于我们不是设计师,但是对于RIA技术来说这两种技能都需要。
忽略了标准的浏览器体验。
While Flex does provide an excellent platform for improving the user experience, it still important to maintain familiarity of things like the back button, book marking, and auto complete.
尽管Flex提供了一个改善用户体验的优秀平台,但是有些很重要的功能不应该忽略,比如后退按钮,书签,以及自动填充。
Flex 3 includes new Deep Linking features for back button support and book marketing. You can learn more at labs.adobe.com. There are number of components out there for implementing auto-complete. From the Adobe Exchange, you can use the AutoComplete Input component.
Flex 3 包含了新的深度链接功能以支持后退按钮和书签。更多知识请访问labs.adobe.com。另外还有一些组件实现了自动填充。从Adobe Exchange 你可以找到自动填充的输入组件。
过多使用容器导致应用程序运行缓慢。
Flash Player uses a hieratical display object graph, similar to the HTML Document Object Model (DOM). The deeper containers are nested the longer the rendering takes. Adobe’s Flex Developer Center has an article that covers best practices related to Flex performance, including the use of containers in detail:
The biggest Flex performance danger is yielding to the temptation to use containers randomly. Deeply nesting too many containers hinders the performance of your application. This is the number one performance danger that Flex developers succumb to—and luckily it is 100 percent avoidable.
Flash Player 使用继承的结构显示对象图形,就像HTML文档对象模型(DOM)。容器嵌套的越深,渲染需要的时间越久。Adobe的开发者中心有一篇描述Flex性能的文章,其中也包含了使用容器的细节:深度嵌套很多容器会降低你应用程序的性能。这是Flex开发者最可能出错的地方,幸运的是我们100%可以避免它。
使用XML传输数据降低应用程序的速度。
Flex offers developers a number of options for data transfer between the Flex client application and the server, including AMF3, XML, SOAP, and straight HTTP requests. Ward demonstrates the use of these technologies and performance benchmarks in his Census application.
Flex为开发者提供了几种Flex客户端和服务器之间数据传输的选择,包括AMF3,XML,SOAP,以及直接的HTTP请求。Ward在他的Census中演示了使用这几种技术的性能表现。
BlazeDS should be considered for Greenfield projects using Java on the backend. BlazeDS is Adobe’s recently open sourced Data Services product that uses the AMF3 protocol. AMF is a binary transfer protocol that is easy to integrate with Java, and offer significant performance benefits over XML. There are open source implementations of AMF for every major backend technology.
在使用Java做后台的工程里可以考虑使用BlazeDS。BlazeDS是Adobe最近开源的数据服务产品,它使用AMF3协议。AMF是二进制传输协议,用Java结合起来非常容易,并且拥有XML的很多重要性能特征。当前已经有针对每个主流后台技术的AMF的开源实现。
If BlazeDS is not an option, Hessian could be an option. Hessian offers ActionScript/Flex support for their binary web services protocol.
如果不用BlazeDS,还可以使用Hessian。Hessian为他们的二进制Web服务协议提供了ActionScript/Flex支持。
尝试雇佣Flex开发人员。
Experienced Flex developers are very hard to find right now. Flex is at the point in the adoption curve which Java was at in the late nineties. The demand for Flex developers is exceeding the supply. This makes finding experienced Flex developers difficult. This, however, creates a huge opportunity for Java developers to expand their skill sets and work with a fun emerging technology. Many companies looking for Flex developers have great success training Java or other web application developers for only a few weeks on Flex. Flex’s language and APIs are easily learnable by developers who are familiar with Web and GUI programming.
现在很难找到有经验的Flex开发人员。现在Flex的情况跟上世纪90年代时Java的情况差不多。Flex开发人员供不应求。这造成了寻找有经验的Flex开发人员比较困难。不过,这也给了Java开发者一个扩展他们技能、使用一种有趣技术的巨大机会。很多公司仅仅使用几个星期就把Java或者其他Web应用程序开发人员培训成立Flex开发人员。对于熟悉Web和GUI编程的开发者来说,学习Flex的语言和API是很容易的。
过度使用动画。
Using Flash as the runtime enables developers to easily add animations and effects. However, developers should make sure that the animations have meaning and provide context. Otherwise, they will annoy users. The timing of animations is also important. Interaction designers can help make recommendations on when animations should and should not be used. Interaction designers can also recommend the best type of animations, the duration, and the best easing function.
在运行期使用Flash使得开发者很轻松的添加动画和特效。但是,开发者应该确定使用的动画是有意义。有内容的。否则,他们会惹恼用户。动画的时间也很重要。交互设计师可以帮助决定何时使用动画,何时不应该使用。交互设计师同样可以推荐最佳的动画类型、时间长度以及最佳的过度效果。
There is good a post on the use of animations at laair.org:
Most animations are simply TOO LONG. They are long, and slow, and boring, and excessive. Tone it down. If there is one thing I have found, its that I hate waiting for stupid animations to finish so I can do something else.
在laair.org上有一篇很好的关于使用动画的文章:大多数动画都太长。又长、又慢,惹人烦。如果说我从中发现了什么的话,那就是我痛恨要一直等到那愚蠢的动画结束后才能进行其他操作。
Don’t get me wrong I am not bashing animations. I am simply bashing animations that are simply too long or too extravagant for their purpose. Every animation can be broken down to having a purpose. Figure out the purpose of your animation and apply accordingly.
不要误会我的意思,我并不是在抨击动画本身。我只是批评那些太长或太过分的动画。每个动画都是有目的性的。明确你使用动画的目的能帮助你正确的应用动画。
没有建立一个企业级的生态系统。
As with other software projects, it is important to setup an enterprise ecosystem for your Flex applications.
跟其它软件工程一样,为你的Flex应用程序建立企业生态系统很重要。
Test Driven Development (TDD) is a staple of most any enterprise project in this day-and-age. For Flex, the FlexUnit framework is available for coding unit tests. On Adobe’s Developer Connection, Neil Webb discusses TDD for Flex developers and using FlexUnit. In addition, Flexcover is available for code coverage reporting.
当今大多数企业工程中主要用的是TDD。对于Flex,FlexUnit框架能够用来测试代码单元。在Adobe的开发者联盟上,Neil Webb为Flex开发者介绍了TDD以及使用FlexUnit。另外,也可以使用Flexcover。
Continuous Integration (CI) is a proven practice for building cohesive applications when multiple developers are contributing. Similar to Java applications, both Ant and Maven plug-ins are available for CI builds of your Flex applications.
没有使用整个框架。
There are a number of optional features available in Adobe Flex that you should consider using in your applications. For example, Runtime Shared Libraries (RSL) is available for reducing the size of your applications:
You can shrink the size of your application’s resulting SWF file by externalizing shared assets into standalone files that you can separately download and cache on the client. Multiple Flex applications can load these shared assets at runtime, but each client need only to download them once. These shared files are called Runtime Shared Libraries.
Flex中提供了一些功能你应该考虑用到你的程序中。比如,运行时共享库(RSL)能够减小程序的文件大小:
把共享资源放到单独的文件中,然后分开下载它们并缓存在客户端,使用时再连接到程序中,这样就能减小程序最终生成的SWF文件的大小。多个Flex程序都可以在运行时加载这些共享资源,而用户只需要下载一次就可以了。这些共享的文件被称为运行时共享库。
Another under used feature of the framework is the built in accessibility features. You can read more about the accessibility features of Flex in Adobe’s livedocs. In addition to built in accessibility, the framework provides built in features for localization. For the latest Flex 3 framework features, checkout Adobe’s Getting Started introduction page.
另外一个可能被忽略的功能是内置的辅助功能。你可以阅读Adobe的在线文档获取详细信息。除了内置的辅助功能,本框架还提供了本地化的功能。更多功能请查看Adobe的介绍页面。
使用复杂的渲染降低了DataGrid的效率
The out-of-the-box itemRenderer for the DataGrid is very optimized. Mistake #3 discussed the performance impacts of deeply nested containers. One of the places in Flex where containers can easily get deeply nested is in the DataGrid’s item renderers. The number of item renderers which are rendered by the DataGrid is the number of visible rows times the number of visible columns. Custom DataGrid and List item renderers should be very optimized. When complex layout logic is needed in an item renderer, it is best to use UIComponent (or other more low-level classes) and position the contents for that cell manually.
DataGrid的itemRender非常实用。本文的第3条错误描述了深度嵌套影响性能。Flex中能够轻松嵌套的就是DataGrid的item renderer。DataGrid需要渲染的子项个数 = 可见的行数*可见的列数。自定义的DataGrid和List的item renderer应该好好优化。如果需要在一个item renderer中使用复杂的排列逻辑,最好是使用UIComponent(或其他低层次的类)并手动设置单元格的内容。
没有准备脱机使用的程序。
The traditional model for RIAs is in the browser. However technologies like Adobe AIR and Google Gears is allowing those applications to run offline. By not preparing for a potential offline architecture when users demand it, changing your applications to support offline features may be very difficult. Typically, in web applications business logic lives on the server. In offline RIAs, business logic must transition to the client. This makes it nessecary to architect ahead of time where certain business logic will need to live in order for applications to work both offline and online.
RIA的传统模式是浏览器。但是像Adobe AIR和Google Gears这样的技术允许应用程序脱机工作。如果没有事先设计好脱机部分的结构而用户又需要它,这时候再改变你的程序来支持脱机工作的功能可能会非常困难。通常,事务逻辑由服务器保持。但在脱机工作的RIA程序中,事务逻辑必须转移到客户端。所以要事先考虑到事务逻辑应该保存在哪里才能让应用程序既能脱机工作也能联机操作。
混合模式就是把一个图像(基图像)的颜色跟另一个图像(混合图像)一起组合成第三种图像——结果图像就是屏幕上显示的实际图像。一个图像中的每一个像素都会和其他图像中对应的像素一起作用来生成最终结果中相同位置处的像素值。
每个display对象都有blendMode属性,它可以设置成下面的值之一。在BlendMode类中定义了一些相关的常量。当然了,你可以直接使用这些常量的实际值:一些字符串。
以下面两个图像为例,我们在圆形(2)上应用blendMode,它将叠在另一个图像(1)上

(more…)
[注]本文主要包括:介绍缓存的优点、启用和不应该启用缓存的几种情况、如何启用缓存、设置不透明背景来优化性能
不管是创建一个应用程序还是一个复杂的脚本动画,随着Flash文件的增大,你需要考虑考虑下性能和优化。如果内容是静态的(比如一个矩形),Flash不会优化它。因此,当你改变这个矩形的位置的时候,Flash会重绘整个Shape实例。 (more…)
[注]本文中这些内容需要注意:缩放属性scaleX、scaleY与AS2.0中的_xscale、_yscale取值范围不同;如何控制缩放时不变形。
有两种方式可以测量和改变一个display对象的大小,一种是使用尺寸属性(width和height),另一种是使用缩放属性(scaleX和scaleY)。
每个display对象都有一个width属性和一个height属性,它们的初始值就是以像素为单位的该对象的大小。你可以读取这两个属性的值来测量display对象的尺寸,也可以赋给它们新值以改变display对象的大小,如下所示:
(more…)
上下移动或左右滚动display对象
如果一个display对象比你想让它显示的尺寸大,可以使用scrollRect属性定义这个display对象的可见区域。另外,通过改变scrollRect属性的值来响应用户的动作,可以控制内容左右移动或者上下滚动。
scrollRect属性是Rectangle类的一个实例,Rectangle类把定义一个矩形区域所需要的数据绑定在一个对象中。要定义display对象的可见区域,首先创建一个Rectangle实例,然后把它赋给display对象的scrollRect属性。接下来,把scrollRect属性读到一个单独的Rectangle变量中,通过改变目标属性值就可以左右移动或上下滚动了(比如,改变这个Rectangle实例的x值来左右移动,或者改变y值来上下滚动)。然后再把这个Rectangle实例赋值给scrollRect属性,通知display对象改变它的值。
(more…)
不管你使用哪种display对象,所有的display对象共有一些操作。比如,它们都可以放置在屏幕上,在深度堆栈中前移或后移,被缩放、旋转等等。因为所有display对象都是从相同的基类(DisplayObject)中继承的这些功能,因此不管你操纵TextField实例、Video实例、Shape实例,还是其他的一些display对象,这些功能的表现是一样。
一、改变位置
对于任何一个display对象经常做的操作就是把它放置到屏幕上。要设置一个display对象的位置,改变它的x和y属性。 (more…)