第1篇 基础篇

第1章 Flex概述

Flex是Adobe公司推出的一系列工具和技术，使开发人员可以开发和部署可升级的富互联网应用程序（RIA）。Flex提供了一种现代的、基于标准的语言来支持公共模板设计、客户端运行环境、编程模型、开发模型和高级数据服务。富互联网应用程序（RIA）是指像开发Web网页一样的简单方式来部署富客户端程序。这种程序具有比HTML更加健壮、反应更加灵敏和互动性更丰富的特点。本节将简述Flex的特点及发展情况等，使读者对Flex有一个初步的认识。

1.1 Flex简介

传统的基于HTML的应用程序部署成本低、结构简单、方便易学。很多用户和开发人员于是放弃了现代高性能计算机带来的用户体验，转而追求数据的快速访问，从而丧失了一些重要的UI功能。

然而，某些应用系统并不完全适合采用HTML技术。复杂的应用系统可能要求多次提取网页来完成一项事务处理。例如医药和财务领域系统。这往往导致交互速度很低。另外，如果用户能看到并可以操作图表、进度表和各种层次结构，显然工作会更加容易。

RIA利用相对健壮的客户端描述引擎。这个引擎能够提供内容密集、响应速度快和图形丰富的用户界面。除了提供一个具有各种控件（滑标、日期选择器、窗口、选项卡、微调控制器和标尺等）的界面之外，RIA还允许使用SVG（Scalable Vector Graphics，可伸缩向量图）或其他技术来随时构建图形。例如，使用PNG图片和SWF文件等。

RIA的另一个好处是，数据能够被缓存在客户端，从而可以实现一个比基于HTML的响应速度更快且数据往返于服务器的次数更少的用户界面。对于无线设备和需要偶尔连接的设备来说，RIA应用程序是未来的趋势，并且会逐渐远离基于文本的Web客户端。对于那些运行在移动设备上的应用系统，可以被设计成以离线方式工作，这样当连接丢失时，系统仍能以离线方式工作。

Flex是Adobe公司近两年推出的重量级产品与技术。在Flex出现之前，富互联网应用程序（RIA）是由Flash 8.0或Flash CS3开发的。Flash系列工具在制作动画上有着强大的优势，但是在开发和部署富互联网应用程序时就不是那么高效。Flex的出现就是为了解决这一问题。

Adobe公司对于Flex采取了开源的策略，所以开发者可以在Flex源代码的基础上修改。部分与Flex配套的产品对个人用户免费，如Flex Data Services 2。Flex成熟的技术与产品是Flex 2.0系列，产品包括：Flex 2 SDK、Flex Builder 2、Flex Data Services 2、Flex Charting 2。截止到本书完稿，最新的Flex版本为Flex 3.0 Beta 1。本书讨论与研究的内容均在Flex 3.0 Beta 1范围内。Flex 3.0具有许多新特性，包括可开发桌面应用程序（AIR）、访问本地资源、操作本地SQL数据库、读写文件流等。

Flex具有完善的开发环境Flex Builder。使用此集成开发环境（IDE），开发者可以快速高效地开发富互联网应用程序。Flex采用标准是MXML和ActionScript 3.0。Flex包含丰富的组件与类库，同时支持第三方的组件，开发者可以很方便地使用。Flex采用事件驱动机制，程序的执行过程严格按照事件发生的时间顺序执行。本小节将介绍为读者Flex开发技术的特点、优点和新特性。

1.1.1 Flex的技术特点

Flex可以在企业内部或在Web上创建富互联网应用程序（RIA），堪称最完整、最强大的RIA开发解决方案。它使企业能够创建个性化的丰富多媒体应用程序，极大地提高用户的体验，彻底革新人与Web的交互关系。

1．增强用户体验

Flex使开发人员可以创建一种能增强用户体验的应用程序。传统的基于HTML的应用程序的用户体验只停留于点击、拖曳、查看等简单方式上。富互联网应用程序的用户体验包括丰富的图形界面、图表、进度表以及强大的交互性和实现性。当用户进入一个迷人的用户体验时，用户会知道怎么使用该程序，从而更快地完成一项任务或者找到想要的信息。国外有一些使用Flex开发的大型网站在增强用户体验方面效果很好。例如NOMOS Online网站，如图1-1所示。

图1-1 NOMOS Online效果图

2．完善的开发环境

Flex是用来创建和发布企业级的、通过网络的富互联网应用程序（RIA）的强大的应用程序开发方案。Flex提供了现代的、标准的语言和程序模型。支持公共设计模板，包括集成开发环境（IDE）产品。Flex Builder是开发Flex应用程序的利器，由Eclipse团队开发，开发环境界面与Eclipse相似，如图1-2所示。Eclipse是功能强大、操作容易的开源开发平台，在全球拥有庞大的用户群，相信Java程序员对此不会陌生。

图1-2 Flex Builder开发环境界面

3．通用的配置环境

Flex应用程序在Flash Player 9下执行。可以说Flash Player是RIA应用程序运行的载体，不论Flash程序还是RIA程序都运行于Flash Player。Flash Player具有跨平台性，可运行于Windows系统、Mac系统、Linux等系统。全球98%的电脑中都安装了Flash Player。所以使用Flex开发的应用程序能跨平台地运行于几乎全部的桌面电脑中。另外，由于Flex应用程序在Flash Player中运行，其效果由Flash Player解释，所以不论在何种客户环境中效果都是一样的。

4．企业级的特征

开发人员可以使用Flex Data Services、Fluorine、WebService等服务来处理同步数据和支持实时数据。客户端缓冲和消息传递的能力能使更多的应用程序在网络连接断开时也能继续执行程序。允许多用户在浏览器的不同区域操作或者在同一个应用程序中通话。Flex应用程序可与外部的Flex应用程序、本地浏览器和RIA应用程序等进行通信。

5．消除页面加载

应用程序会先将RIA应用程序进行缓冲下载，这样执行应用程序就像是执行本地程序一样，而不是一系列的链接页面。Flash Player管理客户端接口就像管理一种单一的、不间断的流。当客户端从一个场景到另一个场景时不需要页面从服务器中加载，从而减小了服务器端的负担。

6．标准的架构

MXML是对XML的扩展，基于W3C DOM3的子集规格来实现事件模型。可用CSS1（层叠样式表）来实现样式。Flex 3.0中使用ActionScript语言。ActionScript是欧洲计算机制造商协会（ECMA）制定的标准脚本语言，用以支持基于对象的开发。

7．与浏览器兼容

不论是IE浏览器、FireFox浏览器或是MyIE浏览器都支持Flash Player运行。网络应用程序需要在所有浏览器和平台下运行效果一致。Flex以Flash Player标准作为客户端环境，可以保证在所有平台和浏览器下得到相同的效果。

1.1.2 Flex 3.0的新特性

Flex 3.0较之Flex 2有了许多令人兴奋的新特性。例如，新增桌面应用程序（RIA）、对本地资源的访问、支持HTML等Web开发技术。部分特性将在后面章节中作详细介绍。

1．增强风格设计

Flex 2.0中对风格的设计需要用户手工编写代码。Flex 3.0中新增skin导入向导、样式属性检查、视觉CSS编辑器等辅助工具，来帮助用户快速进行外观设计。

2．增强数据功能

Flex 3.0中增强了DataGird组件功能、图表功能。同时新增数据导入向导、列表数据效果。其中数据导入向导可以方便地在应用程序中加入SQL Server、MySQL等数据库数据。

3．新增Adobe AIR应用程序

AIR技术使得富互联网应用程序开始桌面化，这是Flex 3.0的一次变革。由于AIR应用程序允许访问本地资源，所以可以做更多有关本地操作的工作。例如，读写文件流，操作本地的SQL数据库。AIR技术推出的同时必然新增了许多类与数据类型，同时也新增了许多对系统API的支持。

4．新增多窗口功能

传统的RIA应用程序只运行于Flash Player中，是单窗口式的。AIR应用程序推出后，允许应用程序使用多窗口。

5．增强与后台服务器的交互

Flex 3.0作为客户端应用程序，不能直接对服务器端进行处理。Flex 3.0可通过PHP、LiveCycle Data Services、ColdFusion和Asp.Net等技术与后台服务器交互。另外，Flex 3.0的新建工程向导中可选择要使用的服务器端技术，从而直接在网络中部署Flex应用程序。

6．可集成HTML、JavaScript和Ajax

Flex 3.0中新增HTML组件，该组件允许应用程序访问HTML页面。这样，Flex 3.0就可集成HTML、JavaScript和Ajax等Web开发技术，从而开发出更加丰富的网络应用程序。

1.2 Flex Builder 3的下载与安装

Flex 3.0的安装文件可从Adobe官方主页下载。安装文件版本有Flex Builder 3 Beta-Standalone Installer版本和Flex Builder 3 Beta-Eclipse Plugin版本两种。Flex Builder 3 Beta-Standalone Installer是独立的开发工具的版本，Flex Builder 3 Beta-Eclipse Plugin是可将Flex 3.0集成于Eclipse的安装插件。本小节介绍Flex Builder 3 Beta-Standalone Installer的下载与安装。

1.2.1 安装Flex Builder 3的系统要求

Flex Builder 3可以安装在Windows操作系统上，也可以安装在Mac OS X操作系统中。安装Flex Builder 3的最低配置如下。

1．Windows操作系统最低要求

（1）英特尔奔腾4处理器以上。

（2）1GB内存以上。

（3）Windows XP操作系统，安装Service Pack 2补丁。

（4）Vista Home Premium操作系统或更高。

（5）300MB可用磁盘空间用于安装。

（6）安装Java Virtual Machine，可以是JRE 1.4.2、Sun JRE 1.5或IBM JRE 1.5。

（7）Eclipse 3.2.1或更高（如果选择插件安装于Eclipse方式）。

2．Mac OS X操作系统最低要求

（1）G4 1.25 GHz或是基于英特尔处理器的苹果机。

（2）OS X 10.4.7-10.4.9操作系统。

（3）1GB内存以上。

（4）300MB可用磁盘空间用于安装。

（5）安装Java Virtual Machine，可以是JRE 1.5或JRE 1.6 for Apple。

（6）Eclipse 3.2.1或更高（如果选择插件安装于Eclipse方式）。

1.2.2 下载Flex Builder 3 Beta 1

下载Flex Builder 3 Beta 1步骤如下所示：

步骤1浏览器中输入“http://labs.adobe.com/technologies/flex/”，打开Adobe Flex主页。打开页面如图1-3所示。

图1-3 Adobe Flex主页

步骤2单击“Announcements”列表下的“Flex 3 public beta available on Labs”链接，进入Flex Builder 3 Beta页面，如图1-4所示。

图1-4 Flex Builder 3 Beta页面

步骤3点击“Download the Flex Builder 3 beta”链接，进入Flex Builder 3 Beta验证页面，如图1-5所示。

图1-5 Flex Builder 3 Beta验证页面

步骤4下载Adobe公司的产品需要输入Adobe ID和Password，可以免费注册。注册步骤用户可按网页提示，本书略。在下载页面的“E-MAIL ADDRESS”文本框中输入Adobe ID，“password”文本框中输入密码。单击“Continue”按钮，进入Flex Builder 3 Beta下载页面，如图1-6所示。

图1-6 Flex Builder 3 Beta下载页面

步骤5单击“Flex Builer 3 Beta-Standalone Installer”下的“Download for Windows”链接，开始下载。

1.2.3 Flex Builder 3 Beta 1的安装

在确定系统满足安装的基本要求后，可开始安装Flex Builder 3 Beta 1。安装步骤如下所示：

步骤1双击“flexbuilder3_b1_win_sa_061107.exe”，弹出“Adobe Flex Builder 3 Installer”对话框。安装的第1步骤为“Introduction”，如图1-7所示。

图1-7 第1步骤“Introduction”

步骤2单击“Next”按钮，弹出安装第2步骤“License Agreement”对话框，如图1-8所示。

图1-8 第2步骤“License Agreement”

步骤3选择“I accept the terms of the License Agreement”单选框，单击“Next”按钮，弹出安装第3步骤“Choose Install Folder”对话框，如图1-9所示。

图1-9 第3步骤“Choose Install Folder”

步骤4在文本框中输入安装路径或是单击“Choose…”按钮选择安装路径，单击“Next”按钮，弹出安装第4步骤“Flash Player Installation”对话框，如图1-10所示。

图1-10 第4步骤“Flash Player Installation”

步骤5如果系统未安装Flash Player 9请勾选单选框，单击“Next”按钮，弹出安装第5步骤“Pre-Installation Summary”对话框，如图1-11所示。

图1-11 第5步骤“Pre-Installation Summary”

步骤6在确定安装的概要后，单击“Next”按钮，弹出安装第6步骤“Installing Adobe Flex Builder 3”对话框，开始安装，如图1-12所示。

图1-12 第6步骤“Install Adobe Flex Builder 3”

步骤7完成安装后自动弹出安装第7步骤“Install Complete”对话框，如图1-13所示。

图1-13 第7步骤“Install Complete”

步骤8单击“Done”按钮完成安装。

步骤9在第一次启动Flex Builder 3时会要求输入序列号。可使用Flex Builder 2的序列号来验证。Flex Builder 3允许用户进行30天的试用，试用期内开放全部功能。

1.3 Flex基础结构MXML介绍

开发者使用两种语言来写Flex应用程序：MXML和ActionScript。MXML是一种XML标识语言，用于进行组件布局。MXML中的组件包括了可视组件和非可视组件。非可视组件可以是从服务器中读取的数据源或用户组件绑定至服务器中的数据。

就像HTML一样，MXML提供标签来定义界面。如果开发者有一定的HTML基础，那么对MXML的上手会很容易。但是MXML比HTML更结构化，提供更丰富的标签集。MXML既包含可视组件如datagrid、tree、tab navigator、accordion、menu，也包含非可视组件如web service connection、data binding、animation effect。同时，用户可根据需要，在MXML组件的基础上进行扩展，从而创建自定义组件。

MXML与HTML的最大不同在于，MXML定义的应用程序最终被编译为SWF文件，由Flash Player来执行。Flash Player下执行MXML应用程序比HTML应用程序更加丰富、动感。MXML的代码结构语法如下所示：

        <?xml version="1.0">
        <最外层标签>
          <标签1/>
          <标签2/>
          …
        </最外层标签>

MXML中最外层的标签类型决定了其类型。例如，最外层标签为“<mx:Application>”，则说明此MXML文件定义了一个应用程序。其他标签为最外层标签时，该MXML被称为自定义组件。自定义组件的MXML文件可看做是一种分离，能简化代码、提高重用性。例如，用户定义了一个登录框的自定义组件，此MXML文件可应用于多个需登录框的工程中。

如下示例中定义了一个自定义组件，其最外层组件为下拉框组件，代码如下所示。

        <?xml version="1.0"?>
        <!--   mx:ComboBox是下拉框组件，“xmlns:mx”是名称空间，对于官方提供的组件名称空间都为
    “http://www.adobe.com/2006/mxml”  -->
        <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">      <!--下拉框组件-->
            <mx:dataProvider>                                        <--下拉框组件的数
    据源-->
                <mx:String>AK</mx:String>                            <!--数据1-->
                <mx:String>AL</mx:String>                            <!--数据2-->
          </mx:dataProvider>
        </mx:ComboBox>

下拉框组件的数据由“<mx:dataProvider>”提供，下拉框中的内容项有“AK”和“AL”。

1.4 建立第一个Flex 3.0程序

下面以“Hello World”为第一个例子为读者详细说明如何建立第一个Flex 3.0程序，步骤如下所示。

步骤1单击“File”|“New”|“AIR Project”命令，弹出“Create an Adobe AIR project”对话框。

步骤2在“Project name”文本框中输入工程名，“Server type”下拉框选择“Other/None”，如图1-14所示。单击“Next”按钮，继续工程的创建。

图1-14 设置工程名称

步骤3在“Folder”文本框中输入工程路径，其他可默认，如图1-15所示。单击“Finish”按钮，完成工程的创建。

图1-15 设置工程路径

步骤4在编辑工作区中单击“Design”按钮，进入设计模式，如图1-16所示。

图1-16 设计模式工作区

步骤5从左下角的“Components”列表，选择“LayOut”子文件夹下的“TitleWindow”组件。拖动组件到设计模式工作区，如图1-17所示。

图1-17 设计模式下添加“TitleWindow”组件

步骤6同理，在设计模式下添加“Label”组件，如图1-18所示。“Label”组件位于“Controls”子文件夹。

图1-18 设计模式下添加“Label”组件

步骤7选择“Label”组件，然后在右下角的属性工作区里设置“Label”组件的属性。设置“Text”属性为“Hello World”，“字体”属性为“Georgia”，“字体大小”属性为“24”，字体加粗，如图1-19所示。

图1-19 设置“Label”组件属性

步骤8在代码模式下，生成的MXML代码如下。

        <?xml version="1.0" encoding="utf-8"?>
        <!--新建MXML后，有些代码是自动生成的，例如这里的mx:WindowedApplication标签-->
        <mx:WindowedApplication  xmlns:mx="http://www.adobe.com/2006/mxml"  layout=
    "absolute">
            <mx:TitleWindow width="371" height="301" layout="absolute" y="36" x="122">
                <mx:Label text="Hello World" width="176" height="52" horizontalCenter
    ="0" verticalCenter="0.5" fontFamily="Georgia" fontSize="24" fontWeight="bold"/>
            </mx:TitleWindow>
        </mx:WindowedApplication>

1.5 编译与运行第一个Flex 3.0程序

上一节建立了“Hello World”程序，编译与运行程序的步骤如下所示。

步骤1在想要成为程序默认初始页的mxml文件上右击，选择“Set as Default Application”，如图1-20所示。

图1-20 设置默认初始页

步骤2菜单中单击“Run”|“Run”命令，选择相应的程序名称，这里为“HelloWorld”，Flex Builder 3就开始编译与运行程序。

步骤3效果如图1-21所示。

图1-21 “Hello World”效果图

1.6 小结

本章介绍了Flex技术特点、新特性和优点。Flex应用程序具有丰富的交互性、操作性和用户体验，能开发出在HTML更强大的网络应用程序。用户可操作更加丰富的图形界面、图表、工作流程等来完成某些工作，这比单一的网页体验更具吸引力。Flex 3.0具有更强大的桌面应用特性，同时新增了许多辅助向导工具，使得开发RIA应用程序更加容易。

本章图文并茂地讲解了Flex Builder 3的下载与安装。Flex Builder 3是Flex应用程序开发的利器，能快速、有效地开发Flex应用程序。有关Flex Builder 3的内容将在下一章介绍。

本章最后以“Hello World”为例，为读者详细讲解了Flex应用程序的开发编写及编译运行过程。通过“Hello World”实例，读者能基本了解Flex开发的开发过程、Flex Builder 3工作环境以及如何使用MXML。