基于Flex的表现层开发技术

Flex简介

Adobe Flex是支持RIA(rich internet applications)的开发和部署一系列发展中的技术和产品线的概括词，包括the Flex Framework, Flex Builder , and Flex Enterprise Services 等。

传统的程序员在开发动画应用方面存在困难，FLEX试图通过提供一个程序员们已经熟知的工作流和编程模型，让程序员更快更简单地开发动画及RIA应用。在多层式开发模型中，FLEX应用属于表现层。

1，Flex Framework 包括 MXML、类库、组件、容器和效果(effects)等。它不需另外的服务器或IDE就可以生成和美化FLEX应用程序。

2，Flex Builder 是在Eclipse基础上创建的全新RIA IDE，是生成FLEX应用的最简单最强大的方式。实现了集成编译器，代码缩进，调试，设计视图，源代码控制系统集成等许多功能。它可以当作标准的独立应用软件，也可以当作Eclipse的插件使用。

3，Flex Enterprise Services拥有众多新功能，比如自动测试，企业通信支持(提供一种发布/订阅的通信架构)，数据服务(使本地处理的数据和服务器端同步)。最新版的FLEX支持创建静态文件，该文件使用解释编译方式并且不需要购买服务器许可证就可以在线部署。FLEX服务器也是客户端和XML Web Services及远程对象(Coldfusion CFCs，或Java类，等支持Action Message Format的其他对象)之间通讯的通路。

FLEX采用GUI界面开发，使用基于XML的MXML语言。FLEX具有多种组件，可实现Web Services，远程对象，drag and drop，列排序，图表等功能；FLEX内建动画效果和其它简单互动界面等。相对于基于HTML的应用(如PHP,ASP, JSP, ColdFusioh即CFMX等)在每个请求时都需要执行服务器端的模板，由于客户端只需要载入一次，FLEX应用程序的工作流被大大改善。FLEX的语言和文件结构也试图把应用程序的逻辑从设计中分离出来。

 

集成Flex和ASP.net

由上文介绍可知，Flex是一种表现层技术，它可以比较方便的支持开发动画和特殊效果的界面。

Flex能输出成为Flash格式（swf文件），在浏览器中的Flash Player插件中运行。

 

1.         Flex与服务端集成

Flex支持与流行的Web框架进行集成。Flex被下载到浏览器中，通过下列方式与服务器进行交互。

     HttpService：是Flex通过Http协议与远程进行数据交互。由于是使用Http协议，对于各种的服务端ASP、JSP和PHP等。

     WebService：Flex支持与WSDL1.1标准的Web Service进行交互。Flex支持SOAP方，web Service请求和应答。

     Remote Component：Flex通过Remote Component与Coldfusion和Java组件。也可以通过第三方组件与.NET交互，如AMF Gateway(由The Silent Group开发的Fluorine)。这也是通讯效率最高的一种方式。

 

 

 

                 

 

                             Flex与远程集成的图示

 

 

 

2.         Flex与JavaScript应用的集成

 

传统的 Ajax 开发依旧是实现富 Internet 应用程序（RIA）的最主要方法，而Flex的优点在丰富，精致的界面体验，表现能力更强。两者并不冲突，传统的Ajax应用可以与Flex集成，在需要图形化等丰富表现力的场合，使用Flex应用。

     Flex通过ExternalInterface和FABridge可以与JavaScript实现相互调用。

u       ExternalInterface

将数据从 Flash 容器（HTML/JavaScript 代码）传递到 ActionScript 代码中有许多种简单方法，包括使用查询字符串和 <param> 标记。但是，这种方法仅限于将数据传递到容器中。一种功能更强大的技术是使用 ExternalInterface 类，这是一个应用程序编程接口（API），它用于代理 ActionScript 与 JavaScript 语言之间的通信。清单 1 中的示例最佳演示了 ExternalInterface 的使用：

 

 

 

 

清单 1 演示了如何使用 ExternalInterface 类注册 ActionScript 函数，以便 JavaScript 代码可以调用该函数。您可以通过先定义 ActionScript 函数，然后使用 addCallback() 方法将该函数公开给要执行的 JavaScript 来完成操作。在 HTML 端，只需获得 Flash 容器的句柄并调用该函数，该函数是使用 addCallback() 方法的第一个参数命名的。虽然此演示主要是将函数公开给 JavaScript 代码，但是您可以使用另一种方式：使用 ExternalInterface 类的 call() 方法。

ExternalInterface 类可以十分强大，但是实现该类有很大的缺点。要使用 ExternalInterface，必须可以编写代码以实现 ActionScript 和 JavaScript 环境。这不但要求额外的技巧，而且需要翻倍的工作量。在这种情况下，维护代码以及两个非常健壮的技能集可能会变得很困难。

u        FABridge

为了解决针对 Flash 外部 API 的开发限制，Adobe 发布了 FABridge。Flex SDK附带的 FABridge 是用于公开 Flash 内容以编写浏览器脚本的小型库，并且它可以在大多数主要浏览器平台中工作。使用 FABridge，现在实质上不再需要直接实现 Flash 外部 API 所需的管道代码。此外，实现桥接所需的技能也不再健壮。作为一名 JavaScript 开发人员，您只需能够了解哪些 ActionScript 属性和方法可用。

(请参考相关文档)

基于Flex的表现层开发的优缺点

性能

从几个方面来看Flex的性能：

第一、   Flex图形显示效率

Flex是基于Flash的框架，Flash的效率决定Flex的效率。

Flex能否支持展示1500个节点图形元素？

 

第二、   下载Flex的输出的Flash（.swf）的性能

由于企业网管的应用主要在企业内部网络中，有相对较高的带宽，下载速度会相当快。同时可以利用浏览器缓存，一个客户端第一次访问下载后，以后访问无需再重复下载。这里要防止将Flash做的过于庞大复杂，降低用户体验。

第二、Flex与远程通讯的性能

Flex远程通讯的方式可以归纳为两种传输协议：利用xml和二进制通讯。其中后者效率要更高。Xml正是大多数web的通讯方式，如Ajax, Web Service等。所以可以看到flex并没有降低数据通讯的效率，相反还可以利用Flex一些特性，做到更到效率的通讯。

表现力

一、丰富的组件

      Flex提供一整套的工业级的控件，以及非常灵活的组件框架，丰富方便而灵活的前后台数据交互方式，可以提供用户很好的体验。

      组件包括表格、树、列表等各种常用组件。

      图形控件包括饼图、柱状图、线图、气泡图、区域图、图例等

      由于Flex已经开源，一些第三方厂商和开发人员也开发了一些第三方Flex组件库

其中比较优秀的ILog Elixir。

二、矢量图形和API支持

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

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

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

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

三、多媒体支持

   支持播放音频和视频流。

 开发方式和难度

       Flex是提供程序员开发动画、复杂图形应用和RIA的工具和框架。所以使用Flex的主要是UI开发工程师， 由美工来完成一些图片，纯动画（与业务逻辑无关，使用Flash开发工具）。

Flex开发中主要包括MXML（一种描述界面的XML）和ActionScript脚本语言。ActionScript脚本，也是一种面向对象的脚本语言。通过面向对象的方式开发，可以提高UI组件的可重用度和一致风格。Flex中的UI组件风格类似Swing。

      Flex支持运行期调试。

Flex的熟练开发人员目前不多，但是其学习曲线较低。熟练的java和.net程序员经过培训可以轻松进行Flex开发。

 

• 
• 大小: 50.3 KB

• 
• 大小: 44.9 KB

• 查看图片附件

分享到：

基于Flash的图表组件 | JavaScript和java的面向对象 (2)

• 2008-09-03 20:34
• 浏览 3562
• 评论(0)
• 查看更多