Flex的背景和技术特点-Flash actionscript

【 tulaoshi.com - FLASH 】

《Flex 3 RIA开发详解与精深实践》
Flex 3程序设计基础

Flex 是一种RIA开发技术，具有更好的网络交互能力，更加绚丽的表现效果，同时在企业级的扩展上也游刃有余。Flex技术对软件开发人员的要求并不苛刻，MXML和ActionScript都遵循技术标准，用相对简单的代码就可以完成绚丽高效的Flex应用程序。

作为Flex技术的组成部分，Flex Charting让我们可以灵活地进行图表编程，Flex Data Service让我们可以将Flex应用程序部署成为企业级应用。

Flex Builder是一个实用的集成开发环境，通过这个环境，可以高效地完成Flex程序的编写。

1.1  RIA概述

本章内容介绍Flex的背景和技术特点，并通过示例程序来展示Flex的界面效果和技术内涵。

Internet已经是我们生活的一部分，而看网页可以说是网络浏览者与Internet最简单的沟通方式。打开浏览器，进入一个网站浏览，这就是浏览者们看到的最直观的Internet的外表。尽管页面上不是单一的文字，但也仅仅是页。然而如今这些传统的呆板的页已经不再能满足网络浏览者的要求了。多媒体、多元化的信息表现在一个页面上，的确很是单薄。

另一方面，开发人员也一直在为过分依赖于页面刷新、请求响应等诸多传统网页开发技术固有的问题而烦恼。当然我们不能忽略B/S架构能够取代C/S长期大行其道有一个重要的因素，就是网络带宽问题。

传统网页内容简单，节省网络带宽的优势是与生俱来的，而如今网络技术在不断地发展，软硬件发展又达到了一个并驾齐驱的时期，软件系统已经不需要等待硬件的发展而发展。有了强烈的需求，又有了充足的硬件基础，新技术应运而生，Rich Internet Application (RIA)的出现给网络浏览者和开发人员都带来了全新的体验。

Rich Internet Application即是富因特网应用程序，其特点也体现在一个富字上，传统的HTML页面带给用户的页面元素是极其有限的，输入框、选择框、下拉框等无法替换的元素，恐怕早就对浏览者带来了审美疲劳，更何况在功能上也存在着很大不足。对比传统页面，RIA的界面是富的，基本上一个桌面程序能表现出来的效果，RIA都能表现。

图1.1中的网站是一个名为scrapblog的博客网站，与我们常见到的博客网站不同，这个网站使用一种RIA技术构建，在页面表现力和交互性上都远远超过了常见的博客网页。

图1.1  使用RIA技术实现的网站scrapblog （点击上图放大）

如果说RIA的优势仅仅是丰富的界面表现能力的话，那么大家会认为这不过就是个C/S架构，RIA的另一大特点也正是与C/S架构最大的不同：数据上的富。传统的网页开发基于HTTP协议，数据的交互依赖于请求/响应机制；界面的交互则需要进行页面的跳转和刷新。RIA的处理则有很大不同，在客户端可以进行完整的数据处理，与用户的交互更加友好、更加迅速；界面交互并不依赖页面，消息通过异步请求传递，面向用户界面中的各个小模块，客户端的模块之间关系清晰，处理起来更加灵活。

对于企业级应用来说，RIA技术并不需要替换掉现有的体系结构模型，如JavaEE(以前称J2EE)、.NET架构等。RIA技术通常可以和企业级应用体系结构很好地进行整合。将原有的系统构建成更易用、更直观、更迅速的网页应用程序。在不会影响到原有应用的前提下，RIA技术对表现层进行了大幅度的增强，进一步提升界面的友好程度，并且减少了用户与系统的远程交互频率，减少了带宽需求。

RIA开发技术已经有很多种，Adobe公司的Flex发展日趋成熟，微软公司的SilverLight及Sun公司的JavaFX也崭露头角。Flex技术的优势得天独厚，有强大的Flash平台作后盾，SilverLight和JavaFX在RIA的实现上则各有侧重，SilverLight作为一个浏览器插件支持广泛，而且对于JavaScript和微软的.NET技术无缝结合，而JavaFX体系不仅希望利用编写更容易的JavaFX Script取代JavaScript，更是提供了JavaFX Mobile，为手机及移动设备增加了应用程序支持。

 

1.2  Flex简介

Flex是一种基于标准编程模型的高效RIA开发产品集，最初由Macromedia公司在2004年发布，后被Adobe公司冠以商标。Flex最大的特点是基于全球流行的网络动画平台Macromedia Flash。2000年以来，Flash动画愈发火爆，闪客们的作品为Internet增添了绚丽的色彩，而Flash的播放器Flash Player已经成为浏览器上首选的不可或缺的插件，为了看到页面中生动的Flash动画，大部分浏览者都会安装Flash Player。通过Flex技术，开发人员可以将RIA程序编译成为Flash文件，为Flash Player所接受，也就是说，Flex技术所开发出来的程序对于大部分浏览者而言并不需要安装额外的客户端支持，这是一个得天独厚的优势。

基于标准编程模型的高效RIA开发产品集，这是Adobe公司对Flex技术的官方定义。下面我们就来进行详细的分析。

一个完整的Flex程序由MXML代码和ActionScript代码组成。MXML基于XML标准，用于配置和设计Flex程序的界面及编写表现层数据模型；ActionScript基于ECMAScript，原来用于设计Flash动画，其语法规范类似于JavaScript。这样两种基于W3C标准的开发语言就构成了Flex程序，两种语言的关系类似于HTML和JavaScript，这样一来(尤其对于传统网页开发者来说)，Flex根本没有什么门槛。

Flex 3是Flex的一个成熟版本，它的产品集包含以下几部分。

1. Adobe Flex 3 SDK

Flex SDK是Flex产品集中最基础的也是必需的组件，使用其他组件必须在SDK的基础上，单独通过SDK就可以完成常用的程序设计。

2. Adobe Flex Builder 3

Flex Builder是一个基于Eclipse的集成开发环境，通过Flex Builder 可以对程序进行所见即所得的界面设计，并支持MXML和ActionScript的智能编写，可以在很大程度上提高Flex开发的效率。

3. Adobe LiveCycle Enterprise Suite

LiveCycle ES是Flex企业级开发部署套件，以应用于企业级组件，使得Flex可以部署到JavaEE应用服务器上。

Flex 3 SDK的系统需求如下。

Windows平台：Windows 2000，XP，Server 2003，Java 1.4~1.5 Macintoshi平台：Mac OS X v.10.4.x，Java 1.5 Linux平台：Red Hat Enterprise Linux 3~4，Suse 10，Java 1.4~1.5 Solaris平台：Solaris 9，10，Java 1.4~1.5 处理器需求：Intel Pentium II 450MHz或更快/PowerPC G3 500MHz或更快/ Modern processor(800MHz或更快) 内存需求：512MB RAM(推荐1GB) 硬盘需求：200MB可用硬盘空间

可见开发Flex的硬件需求并不很高，当前主流的计算机都可以胜任。Flex技术的所有资源下载都可以通过 http://www.adobe.com 获得。

 

1.3  MXML

MXML是一种基于XML的标记语言，在Flex技术中，MXML用于设计用户界面，实现丰富的Flex表现层。从作用上说，MXML和HTML的功能是基本一致的，都是设计用户界面，但是MXML提供了较HTML更为丰富的界面组件，并且在开发上更为结构化，条理更加清晰。

MXML的编写同样类似于HTML，它通过标签来定义和描述组件。按照学习编程的惯例，下面请看一个用MXML编写的Hello World示例。

示例1.1  Hello World

?xml version="1.0"?
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
mx:Panel title="Flex MXML Test" x="10" y="10" fontSize="12"
mx:Label text="Hello World. 世界，你好！" fontWeight="normal" fontSize="24" fontFamily="Times New Roman" fontStyle="italic" alpha="1.0"/
/mx:Panel
/mx:Application

通过示例1.1的代码可以看到，虽然MXML是类似于HTML的格式，但是Panel、Label等开发组件表达了一个GUI开发平台才具备的特征。MXML是基于XML语言的，可读性很强，由标签(Tag)、标签中的属性(Attribute)及属性值(Attribute Value)等元素组成。

那么，如何才能运行起这个Hello World呢？

第一，用一个普通的文本编辑器，如记事本、EditPlus等，编写并保存上述代码，需要注意的是文件扩展名要保存为小写的mxml，如 test.mxml，我们暂且把它保存在C盘的user文件夹下。

第二，使用Flex 3 SDK的命令行进行编译，Flex的编译工具在SDK的bin文件夹下，如Flex 3 SDK解压缩到C盘根目录，那么在命令行执行(本书所有代码示例部分都默认使用C:user作为代码文件夹)：

cd c:flex_sdk_3bin
mxmlc c:usertest.mxml

可以看到在user文件夹下生成了test.swf文件。

第三，用浏览器或Flash Player打开这个swf文件，就看到了这个Hello World的运行效果，如图1.2所示。

图1.2  Hello World运行效果

结合图1.2我们来分析一下这个程序的代码。

mx:Application是MXML的根元素，是MXML所有组件的容器。在这个标签中，我们要声明mxml的命名空间。

mx:Panel是个面板组件，是GUI程序开发的常见组件，其功能是个组件容器。我们把它的标题设置成了Flex MXML Test，并对位置尺寸进行了设定。

mx:Label同样是GUI程序开发必不可少的组件之一，常用于文字容器，在图1.2中，这个Label的内容就是Hello World. 世界，你好！这个字符串，并将其嵌套在一个mx:Panel中。在这个程序里，mx:Panel是mx:Label的容器。

这就是一个标准的MXML的大致写法。需要特别注意的一点是，在第一行的?xml version=1.0?中有时候需要进行指定的编码，我们用文本编辑工具处理的时候要保存成对应的编码，如为了方便处理中文和国际化，我们可以把第一行改写成?xml version=1.0 encoding=utf-8?，并将代码保存为UTF-8格式。

 

1.4  ActionScript

ActionScript是为Adobe Flash设计的面向对象的程序设计语言，在Flex开发中，ActionScript的基本作用类似于传统网页开发中的JavaScript，同时ActionScript还要负责Flex程序的逻辑控制和业务建模。ActionScript遵循欧洲计算机制造商协会(ECMA)通过的ECMAScript标准，而ECMAScript出自JavaScript派生出的标准ECMA-262，因此无论是使用语法还是技巧方面，ActionScript与JavaScript都非常相似。

作为Flex技术的组成部分，ActionScript充当着更加重要的角色。如果说MXML是Flex亮丽的外表，那么ActionScipt就赋予了Flex聪慧的灵魂。对于开发者而言，在ActionScript上所下的功夫要大于MXML，MXML作为界面表现层需要更多的是外观设计，而ActionScript则需要担当起用户交互、数据处理和业务逻辑处理的重任。不仅如此，在MXML中所使用的Panel、Label等Flex内建组件都是基于ActionScript类实现的，应用ActionScript可以继承这些内建的组件对象来创建自定义的Flex组件，使得开发的灵活性大大增加。ActionScript的应用还可以涉及到表现层数据模型以及异步远程请求及响应的事务处理。

我们可以通过mx:Script标签在MXML文件中插入ActionScript代码或导入ActionScript类文件。而在编译过程中，ActionScript代码和MXML代码都会被分离成ActionScript类，最终编译器连接所有的ActionScript类，编译生成SWF文件。

1.4.1  在MXML中使用ActionScript脚本

MXML使用mx:Script标签实现对ActionScript的内部编译支持，因此，ActionScript脚本代码可直接在标签内编写，此时ActionScript以方法为基本单位独立作用，可在MXML代码中直接调用。这里需要注意的是，MXML内部嵌入ActionScript代码的方式并非使用了单独的编译机制，在MXML进行编译的过程中，内部的ActionScript代码会被抽取出去并创建独立的ActionScript类文件，最后组合到SWF文件之中。

下面来看一看在MXML内部使用ActionScript的示例程序。

示例1.2  使用ActionScript脚本

?xml version="1.0" encoding="utf-8"?
!--此示例程序中要使用中文，因此进行编码声明，请注意保存时选择正确的编码--
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
mx:Script
![CDATA[
public function changeText():void {
    disp1.text = "使用ActionScript";
}
]]
/mx:Script
mx:Panel title="Flex ActionScript Test" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" x="10" y="10" fontSize="12"
mx:Label id="disp1" text="Hello World. 世界，你好！" fontWeight="normal"
fontSize="24" fontFamily="Times New Roman" fontStyle="italic"
alpha="1.0"/
mx:Button label="点击这里"  fontSize="16" click="changeText()"/
/mx:Panel
/mx:Application

示例1.2的程序基本是对上一个HelloWorld示例的扩充，我们对Label添加了一个id属性，并在mx:Script中对这个id进行引用，请特别注意mx:Script标签在MXML中的引用方式，其内容为ActionScript代码，因此要用![CDATA[  ]]括起来保证对其作为一个字符内容的引用，否则ActionScript代码中的操作符很容易与XML的关键字发生冲突，如、、&等符号在XML中都有特定的意义。

下面来看看这个示例的运行效果。

如图1.3所示，这次运行的效果多了一个按钮组件，即代码中的mx:Button，并且我们设置了按钮组件的click属性，即设置了按钮的单击触发为执行ActionScript方法changeText()，接下来可以单击按钮查看效果，结果如图1.4所示。

图1.3  ActionScript测试运行效果一

图1.4  ActionScript测试运行效果二

在图1.4中，Label的文字内容被替换成为字符串使用ActionScript。我们可以看到ActionScript代码中changeText()方法的作用是，响应一个按钮单击事件，通过属性id引用MXML的界面组件，并通过用户交互来处理组件的变化，这是ActionScript最常见的应用方法。本示例中，通过changeText()方法对id为disp1的Label组件进行text赋值操作，通过这个示例我们可以熟悉一下ActionScript的一些语法规则，public function changeText():void是ActionScript的方法定义，访问控制字为public，而function是方法定义关键字，方法名称为changeText，返回值类型为void。在MXML代码中直接嵌入ActionScript时不需要设计ActionScript类，直接以方法作为执行单位。

如果是简单的事件响应处理，如输入校验、组件可见性控制等处理，那么用上面的方法还没有问题，但如果需要对数据进行复杂的逻辑操作或者需要对MXML的组件进行定制操作，就需要ActionScript类来完成了。

1.4.2  使用ActionScript类

在上面的示例中，我们把ActionScript代码嵌入到MXML中使用，如果大量的程序脚本都集中在MXML文件内，会给开发和维护都会带来极大的不便，因此在开发时要注意尽量将ActionScript代码从MXML文件中分离出去。

对ActionScript代码进行分离的最简单方法也是通过mx:Script标签来实现，需要设置mx:Script标签的source属性。例如我们的ActionScript文件是includes文件夹下的tools.as，那么可以通过mx:Script source=includes/tools.as来实现对ActionScript文件的引入，这样ActionScript的代码部分可以从MXML中分离出去。

但是仅仅用上述方式分离代码还是不够的，这种方式仅仅在书写上将ActionScript代码单独分离出去，与HTML中引入JavaScript的方式是完全一致的，而文件对实际的程序设计和代码维护并没有起到作用，因此使用mx:ScripTuLaoShi.comt的source属性容易造成误区，导致ActionScript的滥用。对于规模较小或逻辑很清晰的RIA应用，仅使用ActionScript方法就可以满足大部分要求，而对于一个较大的软件项目或者比较复杂的RIA应用，必须对ActionScript类进行设计。

ActoinScript是面向对象的程序设计语言，而类是面向对象程序设计语言的精髓。面向对象的特性(封装、继承和多态)都被ActionScript很好地支持。使用ActionScript进行开发时，可以使用所有的面向对象特性。

在SDK的功能支持上提供了完善的API，使用ActionScript类可以实现系统的所有逻辑操作和数据模型处理，实现对系统的分层开发，同时也用于进行企业级模块的构建；对于界面开发，可以使用ActionScript类对现有的MXML类继承并进行定制化开发，也可以在组件操作上实现自定义的功能。

ActionScript使用包(Package)对类进行组织，定义一个包的同时，相当于隐含规定了一个命名空间，可以很好地解决类的组织问题。不同的包下可以放置同名的ActionScript类，在不同的包中调用类需要用Import语句来导入，因此可以很好地避免同名类的冲突问题。对于类文件在计算机中的物理位置 需要用与包名称相对应的文件夹名来存放，如net.airdev.book这样一个包下的类文件，应该在netairdevbook这样的文件夹路径之下进行保存，包结构与文件结构完全对应。有Java开发背景的开发者对包肯定不会陌生，ActionScript中包的使用与Java中是基本一致的。

下面对一个以Flex实现的四则运算计算器程序进行结构设计，并在程序中实现一个自定义组件，程序设计类图如图1.5所示。

图1.5  Calculator程序设计类图

我们把MXML文件视为一个控制表现层的类Class4MXML，在MXML中要建立输入框、计算方法选择按钮和计算按钮，其中计算按钮使用一个继承自Button的自定义组件MyButton。

程序需要负责计算的功能模块，因此我们设计一个Calculator类，这个类提供一个计算方法run，该方法需要三个参数，两个操作数arg1、arg2和一个计算方法标记method。

代码文件夹结构如下：

C:usertest.mxml
C:usermyControlsCalculator.as
C:usermyControlsMyButton.as

示例1.3a  计算器应用程序的MXML代码

!--Test.mxml--
?xml version="1.0" encoding="utf-8"?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml xmlns:cmp= "myControls.*"
!--声明一个名为cmp的命名空间，以此来引用myControls包中的自定义组件--
mx:Script
![CDATA[
import myControls.*;
//通过import命令导入myControls包中的类
var calcul = new Calculator();
//实例化一个Calculator类
]]
/mx:Script
mx:Panel title="Flex ActionScript Test" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" layout="absolute" height="180" width="304"
!--把Panel的layout属性设置为absolute，从而对这个Panel上的组件进行坐标定位--
mx:Label id="ta1" text="Calculator Test" fontWeight="bold" fontSize="16" width="250" height="30" x="10" y="10"/
mx:TextInput id="n1" width="77" x="10" y="46"/
mx:TextInput id="n2" width="77" x="198" y="46"/
mx:TextInput id="res" width="77" x="74" y="99" enabled="false"/
!--设置输入和输出所需要的TextInput组件--
cmp:MyButton click="res.text=calcul.run(Number(n1.text), Number(n2.text),tp.value).toString()" x="196.5" y="99"/
!--配置一个自定义组件MyButton，并设定该组件的单击事件执行calc1的run方法，并将结果转换成String类型，显示在id为res的TexInput组件上--
mx:Label x="47.5" y="101" text="=" width="18"/
mx:ComboBox id="tp" x="112" y="46" width="60"
mx:dataProvider
mx:Array
mx:Object label="+" data="0" /
mx:Object label="-" data="1" /
mx:Object label="*" data="2" /
mx:Object label="/" data="3" /
/mx:Array
/mx:dataProvider
/mx:ComboBox
!--配置可选择的操作符，支持四则运算--
/mx:Panel
/mx:Application

这个MXML的编写方法与前面的示例基本一致，只是增加了命名空间以支持自定义组件Mybutton的使用，并对各个组件的定位进行了一些坐标控制。

示例1.3b  计算器应用程序的ActionScript代码

//Calculator.as
package myControls {
//包声明
public class Calculator {
//类声明
public function run(a:Number,b:Number,c:Number):Number {
//函数声明。变量a和b为操作数，变量c为计算类型
var res:Number;
//计算结果通过res变量返回
if(c==0){
res = a + b;
}
else if(c==1){
res = a - b;
}
else if(c==2){
res = a * b;
}
else if(c==3){
res = a / b;
}
return res;
}
}
}
//MyButton.as
package myControls {
import mx.controls.Button;
import flash.events.MouseEvent;
import mx.controls.Label;
public class MyButton extends Button {
public function MyButton() {
this.label = "GO";
this.setActualSize(100, 30);
}
}
}

示例1.3的程序由以上3个程序文件组成，text.mxml为表现层，在MXML初始化时创建了一个Calculator的实例；Calculator.as和MyButton.as 分别对应两个功能模型，Calculator类提供了一个计算器方法，而MyButton类则继承了MXML的标准组件Button类，本程序中的自定义组件仅仅是在组件构造方法中实现了对label属性和定位的初始化，在实际应用过程中，对组件类的继承可以进行更复杂的定制化操作。

程序运行效果如图1.6所示。

图1.6  Calculator程序的运行效果

1.5  Flex的事件机制

事件处理是GUI开发的重要组成部分，早在传统的Client/Server开发中，事件驱动的开发法就已经是GUI开发的主流。

1.5.1  Flex事件处理

软件开发者在开发过程中只关注某个组件响应某个事件后所做的操作，即被驱动的操作，而不用像结构化线形开发那样去关注驱动事件的动作。响应特定事件的组件叫做事件监听器(Event Listener)。

一个用于交互的GUI组件会被预先定义它可能遇到的事件，软件开发者即可根据开发需求来编写事件监听器，响应部分或全部的事件触发，图1.7展示了这个触发过程。作为开发者，我们首先需要了解特定的GUI交互组件支持哪些事件，之后便可以根据需求写出相应的事件监听器。

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/flash/）

图1.7  GUI系统中的事件处理流程

在示例1.2和示例1.3中，我们已经使用到了Flex的事件机制，Flex开发基于ActionScipt对象，事件已经作为Flex可视化组件的属性。我们可以在MXML中直接为组件的事件属性设定事件监听方法或者代码。

在示例1.2中，我们设定mx:Button的单击事件(click)属性为click=changeText()，并写了一个changeText方法作为单击事件的监听器。这样，当单击Button的时候，就会触发Button的click事件，changeText方法将被调用。而在示例1.3中，我们把ActionScript脚本直接复制给了click，这样整个脚本将作为一个事件监听器。Flex可视化组件开发的事件处理方式与HTML页面开发中的JavaScript脚本使用是非常相似的。

如果我们需要在事件监听器中处理事件源，即产生事件的组件，那么需要为事件监听的方法传递参数event，例如可以对示例1.2中事件监听方法的定义和mx:Button的事件属性做一些修改。

(1)  事件监听方法定义的修改：

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/flash/）

public function changeText(event:Event):void

(2) Button事件属性的修改：

mx:Button label="点击这里" fontSize="16" click="changeText(event)"/

在Button事件属性的修改中，event作为一个关键字来使用，而非自定义变量，因此我们可以在标签中直接使用event来创建当前组件所触发的事件对象。

ActionScript类Event构建的时候会把事件源组件作为一个成员属性，这样在事件监听器中，我们可以通过event来操作事件源组件。

在MXML中设定事件属性值的方式叫做事件监听器内建。这种方式适合应用在简单的事件处理上。如果遇到需要多个事件监听器联合使用等复杂的事件处理情况，则需要应用Flex的事件注册。

1.5.2  Flex事件监听器注册

Flex的可视化组件对象都继承了EventDispatcher类，因此它们都支持事件注册方法addEventListener。该方法的定义如下：

addEventListener(type:String, listener:Function,
useCapture:Boolean = false, priority:int = 0,
useWeakReference:Boolean = false):void

通过addEventListener方法，我们可以为可视化组件注册一个事件监听器。type参数表明事件监听器的类型，如鼠标单击事件(MouseEvent.CLICK)；listener参数是事件监听器的具体方法；useCapture参数设定是否在事件的捕获阶段就进行响应；priority参数设定事件监听器的优先级；useWeakReference参数设定事件监听器方法是否为弱类型，一个强类型的事件监听器方法是不会被Flex进行自动垃圾收集的。

先前我们提到的事件监听器内建方式，实际上已经创建了一个默认的事件监听器方法，并把ActionScript脚本的内容写入方法，但这种方法的最大不足就是无法操作一个以上的事件监听器。

而使用addEventListener方法注册事件监听器的方式，我们可以控制事件响应的捕获方式和优先级；当我们已经添加的事件监听器在程序的运行过程中需要取消掉的时候，我们可以通过removeEventListener方法来实现。而这些功能在事件监听器内建方式中不会被支持，理由也很明了：内建的事件监听器都是匿名的，我们无法引用到匿名监听器的监听实体方法。

因此，在使用Flex事件机制的时候，还是应该尽量选用事件监听器注册的方式来构建事件处理，这将为事件交互处理带来更多的可扩展性。

1.6  使用Adobe Flex Builder

诚然，我们通过UltraEdit、EditPlus甚至记事本都可以完成MXML及ActionScript的编写工作，然而作为一个偏重于界面设计的程序设计语言，成熟的集成开发环境(Integrated Develop Environment，IDE)是必不可少的，在处理大量的界面元素以及对程序的编译错误排查时，有一个好的IDE更可以达到事半功倍的效果。

Adobe在发布Flex的同时就发布了一个高效的IDEFlex Builder，对Flex的开发提供了强大的支持。需要注意的是，Flex Builder是一款商业的IDE，从网上下载可以获得30天的免费试用期，之后需要付费才能使用。

Flex Builder 3属于Flex 3产品集，是一款基于Eclipse的IDE，通过Flex Builder 3可以高效地完成MXML、ActionScript以及Flex Charting的设计和编写，快速创建各种Flex项目及应用程序。

不仅如此，Flex Builder 3还支持Adobe的新一代RIA开发平台Adobe Integrated Runtime，即AIR。AIR是基于桌面系统的RIA开发技术和运行时环境，实现了Web应用的桌面化。通过AIR，我们可以使用现有的Web开发技术开发出界面效果更加绚丽多彩的桌面应用程序，如Flash/Flex/ActionScript、HTML/CSS/JavaScript、Ajax等技术都可以在AIR下发挥作用。Flex Builder 3提供了AIR的开发，其开发方式和特点与Flex开发是完全一致的。

关于AIR开发的详细介绍可阅读本书的第四部分。

Flex Builder 3支持Windows和Macintosh系统，同时由于基于Eclipse，Flex Builder 3的安装版本分为独立安装和插件安装两种。在此，推荐已经装有Eclipse的开发者使用插件安装的方式进行安装，一方面避免了Eclipse及JRE的重复安装，另一方面是支持JavaEE的企业级开发和Flex开发更好的结合。

在安装插件版本的时候注意设定正确的Eclipse路径位置，以保证Flex Builder 3的正确运行，安装过程如图1.8所示。在Please Choose an Existing Eclipse Folder: 下方的文本框中填写Eclipse的路径。

图1.8  插件版Flex Builder 3的安装过程

Eclipse是一款强大的集成开发环境和模型平台，Eclipse早期只能支持Java语言的开发，后来C/C++、UML、Ruby等语言都在Eclipse平台的基础上实现了定制的集成开发环境，Adobe的Flex也是一样。Flex Builder基于Eclipse，因此有Eclipse开发经验的开发者上手非常容易，而对于新手来说Flex Builder带来的是规范和广泛应用的强大集成开发环境平台，熟悉Flex Builder后对Eclipse平台也能有所了解。

1.6.1  Flex Builder系统需求

相对于单纯的Flex SDK，Flex Builder对系统的配置要求更高一些，尤其是对处理器和内存的需求增大。

(1)   Flex Builder 3(包含SDK和Charting组件) Windows平台需求如下。

处理器：Intel Pentium 4处理器 内存需求：1GB RAM 硬盘需求：500MB可用硬盘空间 操作系统：Microsoft Windows XP with Service Pack 2，Windows XP Professional，Windows 2000 Server，Windows 2000 Professional或Windows Server 2003 Java平台：Java Virtual Machine: Sun JRE 1.4.2，Sun JRE 1.5，IBM JRE 1.5 Eclipse：Eclipse 3.1~3.2

(2)   Flex Builder 3(包含SDK和Charting组件)Macintosh平台需求如下。

处理器：1.25GHz PowerPC G4~G5或Intel系列处理器 内存需求：1GB 硬盘需求：500MB可用硬盘空间 操作系统：Mac OS X v.10.4.7 or 10.4.8 Java平台：Java Virtual Machine: Sun JRE 1.5 Eclipse：Eclipse 3.2(仅支持插件方式安装)

从上述需求可以看出，要使用Flex Builder，必须有Java平台的支持，使用插件方式安装则需要Eclipse，因此安装过程较常见的IDE要复杂一些，需要注意Java和Eclipse的版本匹配等问题，推荐使用Windows平台开发，使用Java SE 1.5版本和Eclipse 3.2版本。

Java和Eclipse的资源下载，可以从下列网站获得。

Sun Java官方网站：http://java.sun.com/ Eclipse官方网站：http://www.eclipse.org/

1.6.2  使用Flex Builder进行开发

Flex Builder的主要界面都沿用了Eclipse的模型。在Flex Builder 3中，我们可以新建一个Flex项目，如图1.9所示。

图1.9  新建Flex项目

暂时可以使用默认方式创建Flex项目，将其命名为HellowBuilder，确认之后就进入了Flex的开发环境。如图1.10所示，这是一个Flex Develop视图的Eclipse界面，创建了HellowBuilder项目，Flex Builder自动创建了一个HellowBuilder.mxml文件，并加入了MXML的基本代码。当我们完成程序设计时，只需右击导航器中的mxml文件并在Run as 菜单条目中选择Flex Application命令即可运行程序，在Debug as菜单条目中选择Flex Application命令则可以进行程序的跟踪调试。各功能区域的作用如下。

菜单栏：IDE支持的所有开发功能菜单。 工具栏：菜单栏中某些常用条目的快捷方式。 导航器：可以按照不同模式浏览当前项目的文件结构。 编辑区：代码编写区域。 定制视图：可以显示控制台、搜索窗口、调试窗口等信息。 大纲：显示当前代码的组织结构。

图1.10  Adobe Flex Builder 3的界面（点击放大）

1.6.3  Flex Builder开发特点

Flex Builder对于MXML界面设计的支持是相当强大的，支持所见即所得的开发方式。MXML本身就是由标签语言配置而成，因此我们对于MXML的操作方式更适合于配置和设计。同时，在MXML中我们会常常进行调用ActionScript脚本、调用自定义组件、做数据绑定等操作，Flex Builder对这些方面都提供了完善的支持。

Flex Builder对于MXML的开发提供了两种模式。在Flex Builder的编辑区上方可以看到Source和Design按钮。Source为代码编辑模式，我们可以手工书写MXML代码，完成ActionScript的编写；Design为UI设计模式。当我们切换到UI设计状态后，即切换到UI设计界面，如图1.11所示。各功能区域的作用如下。

1. UI设计器

通过所见即所得的方式设计图形界面。

2. 组件工具栏

可以从中选取各种Flex可视化组件，放到UI设计器中。

图1.11  Flex Builder的设计界面（点击放大）

3. 属性编辑区

编辑选定Flex可视化组件的各种属性。

设计界面的使用非常简单，我们可以从组件工具栏里看到所有可用的界面或数据组件，可以直接拖放到UI设计器，并通过属性编辑区来设定组件的属性。同时在开发过程中在编辑状态和设计状态灵活切换。

我们回头看看第一个Hello World示例，如果使用Flex Builder将如何完成。

切换Flex Builder的开发状态为Design。 添加一个Panel组件到UI设计器，然后在属性编辑区，设定Title的属性为Flex MXML Test。 添加一个Label组件到Panel组件(拖放过程中会有蓝色直线定位提示)，在属性编辑区，设定Text属性为Hello World. 世界，你好！。

如图1.12所示，我们通过简单的鼠标拖放操作就完成了这个Hello World程序。这种所见即所得的开发方式能大幅度地提高界面开发的效率。

另一方面，Flex Builder对ActionScript也提供了强大的支持。Flex Builder中包含着完整的Flex SDK，因此对ActionScript的各项特性支持都非常完善，并且与MXML的结合也非常紧密。

在处理包结构时，可以直接在Flex项目下创建对应的文件夹，完成对Flex程序中ActionScript类的组织。

例如用Flex Builder编辑示例Calculator的程序，可以直接在Calculator项目下创建myControls文件夹，并打包两个ActionScript类文件Calculator.as和MyButton.as。在编码过程中，Flex Builder支持ActionScript的快速开发索引，图1.13中MyButton继承了Button类，即MyButton可以使用所有的Button操作。因此Flex Builder会索引出Button的所有属性和方法，提高了编码的效率。

图1.12  使用Flex Builder设计完成Hello World（点击放大）

图1.13  使用Flex Builder 3编写ActionScript

Flex Builder沿袭了Eclipse体系，大多数Eclipse支持的开发配置、快捷键、调试控制、代码重构等方面的优势都被Flex Builder所支持。Flex Builder同样支持版本控制软件(CVS)，我们可以把MXML代码和ActionScript代码都通过CVS进行管理，因此通过Flex Builder实现大型项目的开发可以达到事半功倍的效果。

 

1.7  在Flex中操作XML

XML(eXtensible Markup Language，可扩展标记语言)常用于数据描述、数据封装和数据结构化处理。XML提供了简单和易读的数据组织方式，可以更加方便和标准地对数据进行读取、传输和操作。Flex技术中使用的MXML也是基于XML的一种标签规范。

1.7.1  XML在Flex中的应用

在Flex中处理XML数据需要理解一些基本的XML概念。在本书中会涉及到的XML概念如下。

1. 元素

元素是XML数据中的一个数据条目，通过一对标签和标签内的子元素定义。XML的元素中可以包含文本数据或其他的元素，也可以为空。

2. 空元素

空元素是不包含子元素的XML元素。通常XML的空元素可以写成自封闭的格式，例如emptyitem/。

3. 文档

文档是一个独立的XML结构。一个XML文档可以包含任意数量的XML元素，但是必须只包含唯一的根元素。

4. 节点

节点和元素的意义相同。

5. 属性

属性是对标签内的一个XML元素条目的命名。通过 属性名=值的格式进行定义。可以看作是位于元素内部的子元素。

Flex为处理XML提供了必要的支持，ActionScript类XML和XMLList用于建立Flex的XML对象。XML类用于描述单一的XML对象，如XML的一个节点数据以及这个节点的所有Attribute值和下级节点信息；XMLList类用于描述一组XML元素，这组元素需要有相同的XML标签，通过XMLList可以灵活地对XML元素集合进行添加、删除、修改和查询操作。

通过MXML我们可以使用mx:XML标签和mx:XMLList标签构造静态的XML结构。ActionScript则可以对MXML的静态XML对象或外部文档进行各种数据处理操作，对于大部分XML数据的处理操作都是通过ActionScript完成。

通常ActionScript可以完成下列关于XML的操作：

构建XML文档，添加XML元素和值。 访问XML元素，属性(Attribute)和值。 查询XML元素。 遍历XML数据的集合。 进行XML类型和String类型的相互转换。 操作XML命名空间。 读取外部的XML文件。

1.7.2  通过E4X处理XML

我们已经了解到ActionScript是基于标准的ECMAScript语言规范构建的，因此也沿袭了ECMAScript处理XML的API子集ECMAScript for XML，简称E4X。E4X包含下列类型用于处理XML：XML、XMLList、QName和Namespace。

1. 创建E4X的XML对象

E4X对于XML的支持遵循着简洁性、高聚合性和易用性的设计原则。因此使用E4X并没有很高的难度。首先我们来看看如何用E4X创建XML类型：

var xmlData:XML =
product
item id = "0001"
nameThinkpad/name
price24000/price
/item
item id = "0001"
nameThinkpad/name
price24000/price
/item
/product

上述代码创建了一个变量名为xmlData的E4X的XML对象。构建方式是非常简单的，和定义一个简单类型的变量没有任何区别，直接把XML的内容按顺序写在等号右边即可，E4X会在编译ActionScript时对XML的合法性进行验证，不合法的XML会在编译过程中报错。

2. 操作E4X的XML类型

E4X的XML对象描述了XML的数据结构、节点、文本节点、属性/属性值、操作指令、注释信息等内容。不包含操作指令和注释信息的XML对象被定义为简单XML对象，在构建XML对象时，可以通过设定下列语句来实现简单对象的创建：

XML.ignoreComments = true;
XML.ignoreProcessingInstructions = true;

包含操作指令和注释信息的XML对象被定义为复杂XML对象，可以通过comments()方法和processingInstructions()方法来处理注释和操作指令内容。

包括上述两个属性，E4X的XML对象共包含5个静态属性，用于初始化设定或定制操作XML的具体格式。属性列举如下。

ignoreComments：
该属性用于指定是否处理XML注释。 ignoreProcessingInstructions：
该属性用于指定是否处理XML操作指令。 ignoreWhitespace：
该属性用于指定是否处理XML中的空格符。 prettyIndent：
该属性用于指定对toString()方法是否进行适当缩进。 prettyPrinting：
该属性用于指定对toXMLString()方法是否进行适当缩进。

XML对象结构的解析和处理通过E4X的方法来实现。E4X为XML对象提供了非常完善的方法支持。通过children()、elements()、parent()方法可以引用到XML对象之中的XMLList对象。本书中对E4X的具体API不详细讲解，读者如有需要可参考ECMA357用户手册。

3. 操作E4X的XMLList类型

XMLList类型表明这是一个具有相同结构的XML元素集合。XMLList对象同样支持children()、elements()、parent()等针对上下级节点的索引。同时，XMLList对象还支持attribute()、attributes()方法来操作自身的属性信息。