英文原文：《How Flex can transform the user experience on the web 》
原文地址：http://coenraets.org/blog/2006/08/how-flex-can-transform-the-user-experience-on-the-web/
译者：Dreamer

Flex如何改观web上的用户体验

既然现在产业把它的注意力转向了客户端和用户体验，那么在经过了10年的沉寂之后，web用户界面的品质将有希望以一个相当快的速度提高。

在这种背景下，Flex提供了可以极大地改观人们与web应用程序交互方式的一系列独特的特性。这些特性包括：

•表现力（矢量图）
•性能（JIT 编译器）
•实时性（二进制sockets和pub/sub通讯）
•丰富的媒体（视频和音频流）
•离线支持（本地存储和桌面客户端）

这些特性单独来说都不是独特的。独特的是所有这些特性都可以在一个无处不在并且非常轻量级的运行环境中（Flash虚拟机）被利用，而现在这个环境在所有主流操作系统上的所有主流浏览器中都是可用的。

表现力

把Flex与表现力联系起来的一个特性是矢量图的实用性。通过使用矢量图，线，形状和图像都可以用几何方法来表现，而不是位图。使用Flex，你拥有访问矢量图API的所有权限，但是多数情况下你都只是简单地使用Flex框架中已经广泛应用了矢量图的组件。

比如，如果你需要绘制一个红色的，半透明的圆角面板（panel），你所需要写的代码就是：

<Panel backgroundColor=”#FF0000″ backgroundAlpha=”0.5″ cornerRadius=”6″/>

尽管这第一个例子很好并且很简洁，但是它并不是革命性的：你也可以通过分割图像得到同样的结果。然而，矢量图对用户界面具有更强大的影响力：它允许你通过任何可行的方法拉伸，收缩，旋转，翻转或者改变对象的形状。换句话说，它允许你把用户界面对象做的好像现实生活中的的物体一样。

通过应用矢量图，把用户界面元素做成看起来像现实生活中的物体的一个简单的应用示例就是Ely Greenfield创建的这个Flickr轨迹线：

http://bridge.quietlyscheming.com/flickr/ajax

这只是一种观念上的证明，但是它展示了这种潜力。矢量图在多种应用中都是有用的。举例来说，一个dashboard，它允许在客户端重画并且动画图表（charting）组件。看一下这里的一个简单示例：

http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html

想象一下，如果每一次点击或者演示都需要图表组件在服务器端被重建然后返回到客户端，用户体验将会如何？

矢量图使得这些平滑和动画过渡变成可能。但是，如同上面所说的一样，你并不需要处理底层的绘图API：这些行为（behaviors）都被封装进了图表组件。

性能

差的性能和缺少just-in-time编译器作为浏览器的主要缺点经常被提出来。这是Flex和Flash虚拟机可以有所作为的另一个领域。 Flex应用程序是作为字节码传输到客户端的，并且Flash虚拟机通过一个JIT编译器协助来执行字节码。这会对代码执行产生了重要影响并在web上取得了“桌面应用程序”般的性能。

性能对于消费者（consumer）和商业应用程序来说都很重要。在消费者应用程序中，它帮助创建流畅的用户体验。在商业应用程序中，它可以帮助你做诸如拥有“桌面应用程序”般响应能力的大量数据传输，而同时还保留了web部署模型的优点。

实时性

浏览器的请求/响应模型在监听服务器端或者其它客户端出发的事件时并不是很好。Flash Player支持二进制sockets，使得与任意的socket服务器进行实时双向通讯成为可能。

Flex Message Service就是创建在这个基础上而且它提供了一个完整的发布/订阅（publish/subscibe）通讯解决方案，允许在“瘦”客户端和服务器之间进行实时的信息交换。Flex Message Service也结合了已有的企业级解决方案体系，比如基于JMS的体系。

Flex的通讯（messaging）和实时性的基础构造，使得在保留轻量web部署模型的同时创建可靠并且可升级的协作和数据推动的应用程序成为可能。

丰富的媒体

视频和音频很快就会成为许多商业和消费者应用程序中的关键组成部分。Web上的视频并不新鲜。但是用户体验却与理想状况相差甚远：安装了错误版本的媒体播放器，多次下载很多字节来安装正确的版本，有限的与视频进行交互的选项（超出了传统VCR按钮的能力），视频和程序其它部分有限的交互。

Flash Player包含了媒体播放和媒体流的性能。因为在连接到Internet的几乎98%的电脑中都安装有Flash Player，所以它其实（到现在为止）是web上最普遍的媒体播放器，这也是它为什么会被像Google Video和YouTube这种主要视频站点所采用的原因。

通过使用Flex，视频可以不仅仅是我们经常在web上看到的被动的体验…它可以通程序的其它部分紧密结合。视频可以通过重新播放来触发事件，并且以此驱动用户界面的其它部分的行为。这些性能使得广泛的具有创新和高度交互式的新型应用程序成为可能（交互式视频指南，交互式“专家咨询”，媒体网站，视频会议/视频聊天方面，等等）。

本地存储和离线支持

Flex应用程序可以在客户端把数据保存在一个本地数据存储中（比如本地的shared object）。当断开与网络的连接时，程序依然可以访问（读/写）本地的数据存储。

目前正在开发的一个轻量级的桌面player（代号Apollo）也将允许你在浏览器外运行Flex运行程序。（你可以在这里找到更多关于Apollo的信息）

改观开发者的体验

Flex还有一个方面应该谈一下。这个方面不是关于改观用户体验，而是关于改造开发者体验……开发具有上面所说的创新性能的应用程序确实很简单。Flex编程模型很强大并且很优雅：一个用来布局程序用户界面的XML声明语言，和一个叫做ActionScipt的符合ECMAScript标准的编程语言的结合体。Flex编程模型也包括了一个含有100个组件以上的类库。

因为很难用语言来描述一个编程模型高效性，所以这里给出了一些例子：

你需要调用部署在中间层的一个JAVA对象中的方法并把结果显示在一个DataGrid中？

<mx:RemoteObject id=”ro” destination=”portfolio”/> <mx:DataGrid dataProvider=”{ro.getStocks.lastResult}” /> <mx:Button label=”Get Data” click=”ro.getStocks()”/>

你需要使用从Web service获得的数据来生成一个条形图？

<WebService id=”ws” wsdl=”sales.wsdl”/> <Button label=”Get Data” click=”ws.getData()”/> <LineChart dataProvider=”{ws.getData.lastResult}”> <horizontalAxis> <CategoryAxis categoryField=”name”/> </horizontalAxis> <series> <LineSeries yField=”revenue”/> </series> </LineChart>

你需要一个流媒体？

<VideoDisplay id=”videoFMS” autoBandWidthDetection=”true” source=”streamName”/>

你是否需要解析一个XML文档并要从第六个员工节点取得zip节点的值？简单地使用下面的E4X(ECMAScript for XML)表达式即可：

employees.employee[5].address.zip

你是否需要创建一个可以展开的（使用动画效果）面板？只需简单地创建一个有多种状态的面板：

<states> <State name=”expanded”> <SetProperty target=”{myPanel}” name=”height” value=”100%”/> </State> </states><Panel id=”myPanel” width=”100%” height=”50%” resizeEffect=”Resize”/> <Button label=”Button” click=”currentState=’expanded’”/>

你需要订阅一个JMS主体并且在每次消息发布的时候都执行一个方法？

<Consumer destination=”myJMSTopic” message=”myHandler()”/>

总结

使用Flex创建富因特网应用程序还有很多其它的理由（Richard Ziade在这里给出了一个很好的列表），但是从一定的高度来说，我觉得Flex的表现力，性能，丰富的媒体，实时性，以及离线的特性可以很大程度地改观web上的用户体验。

出处：Dreamer's Blog
转载时必须以链接形式注明出处及本声明！

---

---