企业管理制度学习 Fle 某首先要了解 RIA 技术 RIA 富互联网应用程序是企 企业管理制度学习 Fle 某首先要了解 RIA 技术 RIA 富互联网应用程序是企 Flex 概述概述 1 11 第第 第 章章 章导 读 Adobe Flex是 Adobe 公司推出的多平台的 RIA（Rich Internet Applications） 开发产品。它包含了一系列技术和产品，如 Flex Framework、Flex Builder、Flex Charting、Adobe LiveCycle Data Services ES 等。本章将详细介绍 Flex 和 Flex 技 术 ； 对比 Flex 应用与传统网页应用 ； 学习 Flex 包含的各个元素，以及它们的工作原理。 1.1 RIA 概述 学习 Flex 首先要了解 RIA 技术。RIA（富互联网应用程序）是企业级应用程序客户端的最新技术， 具有高度的用户互动性和丰富的用户体验。RIA 技术的出现是在企业级应用程序经历了几次系统构架 方面的转变的必然结果。 企业级应用程序最初的模式是客户机/服务器（Client/Server，C/S）应用程序。20 世纪 90 年代随 着 Windows 的出现和客户端处理能力的增强，出现了客户机/服务器应用程序。它采用图形用户界面， 客户端的数据处理能力比较强。但由于受到使用局域网的限制，客户端应用程序需要进行不断的更新， 因此其应用范围存在很大的局限性。 20 世纪 90 年代中期，互联网飞速发展，出现了浏览器/服务器（Browser/Server，B/S）应用程序。 Web 技术的使用解决了 C/S 应用程序问题，但由于使用了 HTML 页面形式的用户界面，客户端的数据 处理能力较 C/S 应用程序有所减弱。 RIA 技术的出现重新平衡了客户端和服务器端的关系。RIA 是 B/S 技术在客户端的突破发展，它 是集桌面应用程序的最佳用户界面功能与 Web 应用程序的普遍采用和快速、低成本布署以及互动多媒 体通信的实时快捷于一体的新一代网络应用程序。RIA 大致包括了 Flex、Ajax、WPF、OpenLaszlo 和 Google Web Toolkit 等一系列产品，而 Flex 是同类产品中最领先和成熟的产品，改善了用户体验。 1.2 Flex 概观 Adobe 公司的 Flex 是一个安装在客户端的表现层的服务器；是一个富用户界面组件库；是一个类 XML 基础的标记语言，用来布局组件；是使用 ActionScript 这种 OOP（面向对象程序设计）语言用于 用户界面和应用程序的一个框架。 Flex 将基于标准的语言和各种可扩展用户界面及数据访问组件结合起来，使开发人员能够快速构 建具有丰富数据演示、强大客户端逻辑和集成多媒体的 Flex 应用程序。 使用 Flex 构建的应用程序能 够在所有常见桌面平台上运行，支持对应用程序外观进行完全自定义，并支持各种连接到后端数据和 服务的方法。 1.2.1 Flex 应用技术 对于 Flex 的初学者，首先需要了解什么是 Flex 技术，了解 Flex 所使用的其他附加技术。简单地 说， 编程者在 Flex 框架中建立 Flex 应用程序， 并在 Flash Player 上进行应用。 下面详细地讲解一下 Flex 所使用的各项技术。 1了解了解 Flash Player Flex 是 Adobe Flash 平台的一个组成部分，也是 Flash Player 的一组核心技术。Flex 的应用程序需 要在 Flash Player 上展开， 也就是在 Flash Player 中运行 Flex 应用程序。 Flash Player 是一个用于内容和 应用程序的轻量型运行库，它不仅符合安全要求，而且是基于许多 Web 标准（包括 ECMA-262 编程 语言）构建的。 Flash Player 是被广泛应用的软件技术，几乎所有的计算机都安装某一个版本的 Flash Player，因此 Flex 可以不受平台限制地得以广泛的应用，并且它仅占用 1MB 的少量内存。 Flex 2 以上版本的产品都需要基于 Flash Player 9 的运行，因此在使用高于 Flex 2 版本的 Flex 产品 时，需要安装 Flash Player 9 以上的产品。使用 Flex 框架可以建立和编译代码为.swf 的文件格式，.swf 文件格式是 Flash Player 可以阅读的二进制代码。 2了解了解 Flex 框架框架 Flex 框架就是 Flex 类库和 Flex 所使用的 ActionScript 类的集合的代言词。Flex 框架完全由 ActionScript 类所书写，定义了其控件、容器和管理组件。在本书中，Flex 的类库是将要讲解的主要内 容。图 1-1 显示了 Flex 框架所包含的各类组件。 图 1-1 Flex 框架组件 3Flex Builder Flex Builder 是 Adobe 官方发布的 IDE（集成开发系统） ，用来构建在开源的 Eclipse IDE 上，使用 Flex 的 MXML 和 ActionScrip 技术，进行 Flex 书写和调试。 要注意的是，Flex Builder 和 Flex Framework（框架）并不是同一个概念。Flex Builder 是 Adobe 格 栅商业化的产品，但 Flex SDK 是免费的，编程者可以在任何文本编辑器中编辑 MXML 和 ActionScript 文件，然后在命令行对文件进行编译。 4与与 Live Cycle Data Service（LCDS）集成）集成 LCDS 是 Flex 应用的重要组成部分，简单地说，其作用在于 Flex 应用与数据层之间的发送和获取 数据。在 Flex 中使用数据服务就如使用其他的组件和类。 5附加的附加的 Flex 库和组件库和组件 到目前为止，Flex 3 中有两个官方附加的库，即 Flex Charting 组件（图表组件）和 Flex AdvancedDataGrid（高级数据列表组件）。 6Flex IDE 以开源 Eclipse 为基础的、功能强大的 IDE，具有自动部署、调试和追踪的功能。 1.2.2 Flex 组成元素 如图 1-2 所示， Flex 表现层服务器包含 Flex 应用框架和 Flex 运行服务， 而 Flex 框架又包含 MXML 描述语言、ActionScript 程序语言和 Flex 类库。 图 1-2 Flex 服务的组成 编程者结合 MXML 和 ActionScript 来建立应用程序， MXML 原理定义用户界面元素， ActionScript 原理定义客户逻辑和程序控制。Flex 类库则包含了 Flex 组件、管理器和行为控制。 Flex 运行服务包括支持服务器端的数据传输、编译和高速缓冲内存，内部资源的集成和运行服务 的需求。下面详细介绍各个组成部分。 1MXML 界面语言界面语言 MXML 是基于 XML 的标记语言，用于应用程序用户界面的布局，该用户界面中可包含用于操 作结构化数据和大型数据集合的高级组件。 MXML 提供了表示层逻辑的声明抽象以及用户界面和服务 器端数据之间的绑定。MXML 将表示层问题从业务逻辑中剥离出来，从而有助于开发者生产力和应用 程序可用性的最大化。 使用 MXML 标签可以进行布局、描述行为效果、过渡、定义数据模型、数据绑定。 2ActionScript 编程模型编程模型 ActionScript 是基于 ECMA-262 标准的一种类似于 JavaScript 的强类型面向对象语言，可用于定 义事件监听器和处理器、设置或检索组件属性值，以及处理回调函数等。 ActionScript 是 Flash Player 可以理解的编程语言，也是 Flex 应用的基础。ActionScript 是 MXML 的基础，可以完成 MXML 所不能完成的任务，包括下面的用途： 控制事件。 控制错误。 绑定数据对象到 Flex 控件。 定义用户组件。 3Flex 类库类库 Flex 类库提供了可扩展的预建组件（如容器和控件）、数据绑定、行为以及其他功能。 4建立建立 Flex 应用程序的步骤应用程序的步骤 通常，建立一个基本的 Flex 应用程序包括以下步骤。 （1）使用 MXML 代码设计和布局 Flex 的容器和控件，例如一个按钮控件。代码如下： 如果使用 Flex Builder IDE，则可以应用更多的技术，例如拖放、状态改变、行为效果等。 （2）在 ActionScript 代码中完成实现函数功能。代码如下： private function handleClickFunction(event:Event):void /实现业务逻辑 （3）编译代码，Flex 编译器自动转换 MXML 代码为 ActionScript 代码，并且编译为二进制代码， 输出为 SWF 文件格式，并且在 Flash Player 上运行。使用 Flex Builder IDE 可以完全自动编译所有的 文件。 （4）将 SWF 文件包装在服务器的 HTML 网页中，使用 Flex Builder IDE 这个过程也是完全自动 生成的。 1.2.3 Flex 技术与传统网页技术的对比 在共同点上，传统技术和 Flex 技术都是 N-层（N-Tier）的结构。n 的具体数目取决于应用的很多 因素。多数传统技术包含了至少 3 层的结构：1 个数据层（Data Tier）、1 个业务层（Business Tier）、1 个表现层（Presentation Tier）。数据层通常指数据库或数据源；业务层指应用核心的业务逻辑部分； 传统技术在其表现层包括了 HTML、CSS、JavaScript、JSP、PHP 等技术。 如图 1-3 所示，Flex 首先包含了 1 个数据层（Data Tier）、1 个业务层（Business Tier），数据层 和业务层中间的集成层（Integration Tier）、表现层（Presentation Tier）。与传统技术不同的是，Flex 还有一个客户层（Client Tier），这是与传统网页技术完全不同的一个层面。Flex 的客户层允许用户脱 离服务器工作，不受网络的限制，并且与用户更好地互动。 图 1-3 Flex 应用的 N-Tier 结构 Flex 应用通常是嵌入在表现层的。Flex 应用的客户层比传统技术的表现层更加精致，因此 Flex 的 客户层的建立理所当然地需要更多的时间和资源。 相对于传统的网页，Flex 最突出的优点就是其界面美观，能展现独一无二的图像、动画和音像等 多媒体技术。如图 1-4 所示是 Nike Air 网页展示的与用户互动的视频效果。可以访问此网站（）来体 验一下 Flex 的 RIA 技术的超强用户体验。 图 1-4 Nike Air 的视频效果 同时，由于 Flex 在客户层的 Flash Player 展开使用，因此不存在不同平台不能兼容的问题。Flex 独特的框架，使得用户 UI 设计更加容易、便捷。 1.2.4 Flex 的工作原理 Flex 应用展开在 Web 上的工作原理，与以 HTML 为基础的网页应用有很大的差别。了解 Flex 的 工作原理，就能够知道什么是 Flex 应用必要的工作元素，知道如何建立更好的用户友好的页面。图 1-5 显示了 Flex 各类基础概念的总结， 显示了源程序文件、 编译器和 Flash Player 之间的关系。 第一部分是 Flex 的源程序部分。Flex 应用需要至少一个 MXML 文件或 ActionScript 类文件来构成 Flex 应用的源程序。 图 1-5 Flex 工作原理 图 1-6 显示了 Flex 的工作流程。 通常情况下，