Flex 文章

Flex 如何能够转变 Web 上的用户体验

现在整个行业已将其注意力转向客户端和用户体验, 预期 Web 用户界面的质量会在十多年的事实上的休眠之后以一个非常快的节奏得到改进。

在这样的环境下, Flex 提供了一系列独特的功能, 这些功能可以深深转变人们与 Web 应用程序交互的方式。 这些功能包括:

• 表现力 (矢量图形)
• 性能 (JIT 编译器)
• 实时 (二进制套接字和发布/订阅消息处理)
• 丰富媒体 (视频和音频流)
• 脱机支持 (本地存储和桌面客户端)

这些功能本身并不独特。 独特的是, 它们全部一起在一个无处不在且极为轻量的运行时环境 (Flash 虚拟机) 中提供, 今天在所有主要操作系统上的所有主要浏览器中都提供该环境。

表现力

使 Flex 在表现力方面有别于其他软件的一个功能是提供矢量图形。 通过使用矢量图形, 线、形状和图像可以使用几何公式 (而不是位图) 来表示。 通过使用 Flex, 您对矢量图形 API 具有完全的访问权限, 但大多数时候, 您只需使用 Flex 框架中的组件, 该框架已经广泛利用矢量图形。

例如, 如果您需要划一个带圆角的红色半透明面板, 您需的编码的全部内容是:

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

尽管漂亮又具体, 这第一个示例不是创新的: 通过分割图像您可以得到相同的结果。 但是, 矢量图形对用户界面可以有一个更具转变性的影响: 它们使您能以任何可能的方式拉伸、收缩、旋转、翻转或更改对象的形状。换句话说, 他们使您可以使用户界面对象的行为与真实生命对象相似。

由 Ely Greenfield 构建的 Flickr roulette 是利用矢量图形来使用户界面元素看起来像一个真实生命对象的应用程序的一个简单示例:

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

这是一个概念原型验证, 但它显示可能性。 矢量图形在各种不同的应用程序中都是很有帮助的。 例如, 在一个可视仪表板中, 它们允许图表组件在客户端进行重绘和制作动画, 帮助最终用户更好地了解数据趋势和转换。 此处有一个简单的示例:

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

每一次点击或下拉都需要在客户端重新生成图表组件然后将组件带回到客户端, 请想像一下这种用户体验。

矢量图形使得这些流畅的动画转换变为可能。 但是, 您不必再次处理低水平绘制 API: 这些行为都已被封装到图表组件中。

性能

性能低下及缺少 just-in-time 编译器经常被认为是浏览器的重大缺点。 这是 Flex 和 Flash 虚拟机可以有所不同的另一个区域。 Flex 应用程序是作为字节代码提供给客户端的, 字节代码是在 JIT 编译器的帮助下由 Flash 虚拟机来执行的。 这可以在代码执行中造成显著的差异并在 Web 上支持像桌面应用程序那样的性能。

性能对于消费和业务应用程序都很关键。 在一个消费应用程序中, 它帮助生产出一个流畅的用户界面。 例如, 在业务应用程序中, 它可以像响应桌面应用程序那样帮助处理大量数据, 同时保留 Web 开发模型的益处。

实时

在侦听由服务器进程或其他客户端启动的事件时, 浏览器的请求/响应模型不是很好。 Flash Player 支持二进制套接字, 支持与任何套接字服务器的实时双向通信。

Flex Message Service 构建于此基础架构的顶部, 并提供一个完整的发布/订阅消息处理解决方案, 允许在瘦客户端与服务器之间实时交换消息。 Flex Message Service 还与现有企业解决方案系统 (如基于 JMS 的系统) 相集成。

在 Flex 中可用的消息处理和实时基础架构支持以可伸缩和可靠的方式构建的协作和数据推送应用程序, 同时保留轻量 Web 部署模型。

丰富的媒体

视频和音频快速成为许多业务和消费应用程序的关键组件。 但是, Web 上的视频不是新的, 用户经验经常远远达不到最佳: 用户可能安装了错误的媒体播放器版本, 用于安装正确版本的几 MB 下载被分裂开, 与视频交互的选项受到限制 (超出传统的 VCR 按钮之外), 在视频与应用程序的剩余部分之间的交互受到限制。

Flash Player 包含媒体播放和流功能。 因为它在连接到互联网的 98% 的计算机上可用, 事实上 (且到目前为止), 它是 Web 上最普遍使用的媒体播放器, 这也是它为什么被主要的视频站点 (如 Google Video* 和 YouTube*) 所采用的原因。

通过使用 Flex, 视频可以比我们经常提供到 Web 上的被动流体验要好得多… 它可以与应用程序的剩余部分紧密集成到一起。 视频可以在播放过程中触发事件, 并推动用户界面的其他组件的行为。 这些功能支持范围广泛的新的创新和高度交互的应用程序 (交互式视频教程、交互式“专家答疑”系列、媒体门户、环境视频会议/视频聊天等等)。

本地存储和脱机支持

Flex 应用程序可以在本地数据商店中的客户端存储数据 (称为本地共享对象)。 应用程序可以在从网络断开连接时访问 (读取/写入) 本地数据存储。

当前正在开发的轻量桌面播放器 (代码名称为 Apollo) 也将允许您在浏览器之外运行 Flex 应用程序。 (您可以在此处*查找关于 Apollo 的详细信息。)

转变开发人员体验

Flex 值得一谈的不只一个方面。 这一个不是关于转变用户体验的, 而于关于转换开发人员体验的… 开发包括以上列出的创新功能在内的应用程序真的很容易。 Flex 编程模型功能强大且令人愉悦: 它是用于对应用程序的用户界面进行布局的 XML 声明式语言和 ActionScript (一种符合 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 服务检索到的数据生成一个线型图:

<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 构建 Rich Internet Application 存在许多其他和更多精细的原因 (Richard Ziade 在此处*有一个很好的列表), 但从一个较高的层次看, 我认为表现力、性能、丰富媒体、实时和脱机是可以深深转变 Web 上的用户体验的 Flex 功能。

相关链接

• 查看 Flex Developer Derby 的获奖者
• 查看 Adobe Flex 示例应用程序
• 查看 Flex 社区示例应用程序*
• 阅读 Christophe 的网络日记*

关于作者