第 1 章 Flex 简介• Flex 是 Adobe 公司开发的支持 RIA （ Rich Internet Applications ）开发和部署的技术产品，主要面向企业级的应用。借助于 Flex 强大功能，能够开发出增强更富有交互性和标签的用户界面。• 对于初识 Flex 的开发者，总是对 Flex 产生不同的疑问，什么是 RIA ？什么是 Flex ？ Flex 有哪些特点。本章将带着着这些问题 RIA 和 Flex 进行简要的介绍。

1.1 RIA 技术概述• RIA 是 Rich Internet Applications 的缩写，翻译为丰富互联网应用程序。 RIA 的目标是将桌面程序的表现力与浏览器的程序的方便、快捷结合在一起。开发者可以在浏览器程序上部署 C/S 客户端的程序，得到比传统 HTML 更强大的表现力。

1.1.1 RIA 的特点• RIA 最突出的特点为“ Rich” ，同时 RIA 最核心的部分也体现在“ Rich” 中。“ Rich” 包含了两层含义：• 1 ．丰富的数据模型• RIA 技术提供了多种数据模型来处理客户端复杂的数据操作。使用 RIA 可以将部分原本需要在后台程序处理的问题转移到客户端，使数据能够被缓存在客户端，从而可以实现一个比基于 HTML 的响应速度更快，且数据往返于服务器的次数更少的用户界面。• 2 ．丰富的界面元素• RIA 技术提供了比 HTML 更为丰富的界面表现元素，密集、响应速度快和图形丰富的页面元素与数据模型结合在一起，为用户提供好的使用体验。

1.1.2 RIA 的产生背景• 互联网日益成为应用程序开发的主要平台。随着Web 应用程序复杂性越来越高，传统的 Web 应用程序已经渐渐不能满足 Web 浏览者的要求，这就是所谓的“体验问题（ Experience Matters ）”。 RIA 的出现，解决了上述问题的新思路。• RIA 大致经历了三个发展过程，如图所示。

服务器

客户端 客户端 客户端

客户端/服务器

服务器

浏览器/服务器主机应用程序 RI A应用

RIA发展图

1.1.3 RIA 目前的发展趋势• 由于 RIA 技术带来的巨大优势， RIA 技术得到不断的推广和进步。而随着 RIA 技术的发展，出现数个各具特色的 RIA 客户端开发技术，推动 RIA技术的发展。• 1 ． Adobe Flash/Flex• 2 ． Laszlo• 3 ． Microsoft WPF/Expression ：

1.2 什么是 Flex• 在了解了什么 RIA 以后，本节开始介绍什么是 Flex 。 2004 年初， RIA 技术的主要倡导者 Macromedia 发布了 Flex 。 Flex 是为满足希望开发 RIA 的企业级程序员的需求而推出的表示层服务器和应用程序框架，它可以运行于 J2EE 和 .NET 平台。 Flex具有桌面应用程序的响应性与丰富性，又具有 Web 传播范围广的的特性。接下来首先介绍一下 Flex 的基本架构。

1.2.1 Flex 的基本架构• Flex 的基本架构包括 4部分，如图所示。• 1 ． Adobe SDK• 2 ． Adobe Flex Charting • 3 ． Adobe Flex Data Services • 4． Adobe Flex Builder

Flex SDK2MXML ActionScript3.0Flex框架和类库命令行编译与调试

消息服务数据管理服务RPC服务

Flex Data Services2

Flex Charting2 可扩展图形组件

消息服务

数据管理服务

RPC服务

消息服务

Flex Builder2

Flex基本架构

1.2.2 Flex 的特点• Flex弥补了许多传统 Web 应用缺乏的元素，减少了于服务器之间通信的次数，更为详细的展示数据的细节。最适用的应用程序包括：解决多步处理、客户端验证、控制可视数据，使桌面应用和 Web 应用结合在一起，表现出更强大的表现力。• Flex 在解决用户体验困难的同时，也带来了新的特点，具体如下。• 1 ．高效性• 2 ．易用性• 3 ．灵活性• 4．全面性

1.2.3 Flex工作机制• 在介绍 Flex工作机制之前，先简要介绍 Flex 应用程序的组成。一个 Flex 应用程序通常包含 6种元素，如图所示。• 1 ． Flex Framework• 2 ． MXML• 3 ． ActionScript• 4． CSS• 5．图形资源• 6．数据

Fl ex Framework

MXML

图片 数据

Fl ex应用程序

CSS

ActionScript

Flex应用程序包含元素

1.3 Flex 开发环境安装及配置• 本节以 Flex 2 为例，介绍 Flex 的开发环境及配置。• Flex 开发环境包含以下 4个组成部分。• SDK 2 ： Flex 标准开发组件，包含 Flex框架。• Flex Charting 2 ： Flex 图表组件。 • Flex Builder 2 ：开发 Flex 应用的集成开发工具，基于 Eclipse创建。• Flex Data Service 2 ： Flex 数据服务，应用程序使用数据服务与服务器交换数据。• 上述 4个部分同时也是 Flex 的基本框架中的 4个部分。本节讲述如何安装 Flex 的相关软件。

1.3.1 如何获得 Flex• 在 Adobe 的官方网站（ www.adobe.com）上，可以下载到 Flex 产品软件： Flex SDK 2 、 Flex Builder 2 、 Flex Charting 2 以及 Flex Data Service 2 。图为 Adobe官方网站的下载首页。

Adobe下载首页

1.3.1 安装 Flex Builder 2• 下面介绍如何安装 Flex Builder 2 ：• （ 1 ）双击安装文件后，弹出“ Adobe Flex Builder 2 Installer” 对话框，如图所示。• （ 2 ）选择安装模式。在图中可以看到，可以选择 2 种模式进行安装：• Flex Builder and Flex SDK：该模式了 Flex Builder 2 的完整模式，将在计算机中重新安装基于 Eclipse 的 Flex Builder• （ 3 ）在安装的最后阶段，弹出“ ColdFusion Installation Info” 对话框，询问是否安装 ColdFusion Extensions for Flex Builder 2 ，如果需要则单击【 Yes】按钮，不需要可以单击【No】按钮。• （ 4）启动 Flex Builder 2 。在结束安装后，可以启动 Flex Builder 2 。如果为首次使用，弹出“ Flex Builder 2 Activation”激活产品对话框。输入 Flex Builder 2 和 Charts 的激活码，

安装界面 是否安装 ColdFusion Extensions for Flex Builder2

1.3.2 安装 Flex Data Service 2• Flex Data Service 2 （以下简称 FDS ）可以在多个操作系统上安装，包括： Windows 、 UNIX、 Solaries 。 Flex Data Service 2是基于 J2EE 的 Web 应用，除安装 Flex Data Service 2 ，还需安装其运行所需的 Web容器。所以安装 Flex Data Service 2 分为 2个部分：• 安装 FDS 。• 安装Web容器。 FDS 可以与多种 Web容器协同工作，包含： Tomcat 、 WebSphere ， JBoss等。• Adobe 发布的最新 Flex Data Service 为 LiveCycle Data Service ES 。下面介绍如何安装 LiveCycle Data Service ES 以及运行所需的 Web容器。

FDS欢迎界面

1.4 第一个 Flex 应用• 在安装 Flex Builder 2 后。就可以即可开始编写自己的 Flex 应用了，下面以是一个简单的 Flex应用程序，在页面上显示“ Hello Flex” ，如图所示。

Hello Flex界面