1.2 Flex开发基础

1.2.1 Flex编程模型

为了创建功能完整的应用程序，开发人员必须很好地理解并掌握Flex的编程模型，包括涉及的技术知识。

Flex的编程模型中主要包含Flex类库、MXML以及ActionScript程序语言，结合Flex的编译调试机制，构成了一个开发框架，如图1.1所示。

● MXML：描述应用程序界面的XML语言；

● ActionScript：符合ECMA规范的脚本语言，用于处理用户和系统的事件，构建复杂的数据模型；

● Flex类库：即Flex Framework，是一个基础类库，包括Flex组件、管理器和行为。

1.MXML

在Flex技术中，MXML用于设计用户界面，实现丰富的Flex表现层。从作用上来说， MXML和HTML的功能是基本一致的，都是用于设计用户界面的，但是MXML提供了比HTML更为丰富的界面组件，并且在开发上更为结构化，条理更加清晰。MXML的编写同样类似于HTML，它通过标签来定义和描述组件。

MXML主要用于实现用户界面设计，除此之外，还可以实现非可视化方面的内容，如服务器端数据源，以及用户界面和服务器端的绑定，实现非可视化组件Web服务链接、数据绑定等功能。

2.ActionScript

ActionScript是为Adobe Flash设计的面向对象的程序设计语言，提供了控制和操作对象的功能，用于扩展Flex应用程序。在Flex开发中，ActionScript的基本作用类似于传统网页开发中的JavaScript，同时还负责Flex程序的逻辑控制和业务建模。

ActionScript提供了一个健壮的编程模型，具有面向对象编程基本知识的开发人员对此非常熟悉。另一方面，ActionScript遵循欧洲计算机制造商协会（ECMA）通过的ECMAScript标准，而ECMAScript出自JavaScript派生出的标准ECMA-262，因此无论是在使用语法还是在技巧方面，ActionScript与JavaScript都非常相似。因此，在熟悉JavaScript的情况下使用ActionScript将会使功能实现更加容易。

3.Flex类库

Flex类库包含Flex组件、管理器与行为。使用基于组件的Flex开发模型，开发者可以合并预编译的组件，创建新的组件，或者组合预编译的组件为复合组件。Flex类库包括很多公共包，不同的版本有相应的更新，具体可查看Flex的帮助文档。

我们可以使用MXML与ActionScript的组合来编写Flex程序，这两种程序语言都给了我们访问Flex类库的能力。Flex是作为ActionScript类库来实现的，这个类库包含组件（容器与控件）、管理类、数据服务类以及其他特性的类。我们也可以使用MXML和ActionScript语言配合类库来开发程序，MXML标签与ActionScript类或者类的属性相对应，Flex分析MXML标签，并且编译包含相应ActionScript对象的SWF文件。

1.2.2 Flex运行机制

Flex应用在Web上的工作原理，与传统的基于HTML的网页应用相比有很大的区别。了解Flex的运行机制，知道什么是Flex应用必需的工作元素，知道如何建立更好的用户友好的页面，对Flex应用具有很大的帮助。

一个Flex应用的源程序，至少包括一个MXML文件或ActionScript类文件。由于Flex是一种客户端技术，基于Flash技术体系，其源代码最终被编译成SWF文件并运行于Flash播放器中。SWF文件是一个压缩文件，需要通过Flash播放器呈现出来。因此，SWF文件可以单独在用户终端运行，也可以在安装了Flash播放器插件的任何浏览器中运行。SWF文件非常小，网络下载速度快，在浏览器中运行将非常流畅。

Flex最终编译成SWF文件是通过FlexSDK实现的。FlexSDK是一套开发包工具，其中包括了Flex编译器、文档工具和用户界面（UI）组件库。Flex开发者可以使用FlexSDK把Flex代码编译成SWF文件，然后部署到浏览器中。通常情况下，SWF文件会嵌入到HTML代码中，然后放到Web服务器上，以供终端用户下载。

1.2.3 Flex编程基础

了解Flex的编程模型与运行机制，将有助于Flex编程基础的学习。Flex是一个技术集合，在进行开发实践前需要了解Flex编程的相关基础知识，读者应从整体上进行认识。本节是Flex编程基础的概要，在具体应用开发中，涉及的具体知识点应用，可查阅Flex的帮助手册或其他文档资料。

1.基于MXML的程序设计

1）MXML语法规则

MXML是XML的一种扩展性语言，所以继承了XML的书写规则。首先，标记要成对出现，即所有元素要有开始标记和结束标记。如果一个标记被打开，那么在对应的地方应该被关闭。计算机的逻辑是很严谨的，如果某个标记只有开始没有结束，系统就会发生错误。

与XML一样，要严格区分大小写。<book>和<Book>在XML中是不同的两个元素标记，<mx:Panel>和<mx:panel>当然在MXML中也是不同的，需要分别进行声明。在文档的第一行通常都需要声明版本和编码等信息。

MXML文件名称开头仅可使用字母或下划线，其后仅能够包括字母、数字和下划线字符。MXML命名规范主要有以下几点：

● 文件名不能与ActionScript类名、组件ID、单词Application、mx命名空间中的MXML标签等相同；

● 所有文件名称必须以小写字母.mxml结尾；

因为很多MXML标签对应于ActionScript类，因此命名时应遵循类命名规则，即类名以大写字母开头，同时在类名称中使用每个大写字母分隔单词。

MXML的标签（Tag）和XML中的标签是一样的，只不过在MXML中这些标签有些特殊。一个MXML标签通常所包含的信息可以通过两种方式实现：内容和属性。相对于HTML而言，MXML具有更多的标签，可以定义很多可视化组件，如数据网格、按钮、下拉框、树形、选项卡导航器等，还包括一些非可视化组件。

2）用户界面设计

我们可以使用代表用户界面的组件进行用户界面设计。组件包括两种类型：控件与容器。控件是窗体元素，如按钮、文本框、列表框，即UI；容器是屏幕上包含控件和其他容器的矩形区域。

在Flex应用中，使用容器可以实现UI布局。通常使用HBox、VBox和Grid容器。HBox用于对子组件进行水平布局，VBox用于对子组件进行垂直布局，Grid则使用行和列对子容器进行布局。还有一些其他的导航容器，如ViewStack、TabNavigator和Accordion。

3）组件样式与皮肤设计

组件的样式设置有两种方式：一种是直接在组件的属性表中进行设置，另一种是使用类似HTML Web页面的级联样式表（CSS）为Flex应用程序添加样式。若使用CSS，可以内联在MXML的<mx:Style>标签中，或者通过引用包括样式的外部文件来声明样式。使用内联方式要注意：必须将<mx:Style>标签置于MXML文件的根标签下，同时该标签仅用于MXML应用程序，而不能是MXML组件。

通过修改或替代可视化元素，皮肤可用于修改组件的外观。这些元素可以是图片、SWF文件或者API绘图方法的类文件。开发人员可以通过使用图形或者编程的方式将皮肤添加到Flex组件中。

4）基于组件的数据绑定与数据远程调用

Flex提供数据绑定功能，允许将一个对象中的数据链接到另一个对象中，可以在应用程序的客户端对象之间，以及不同层之间传递数据。通过数据自动绑定功能，在源属性发生变化时会自动更新到目标对象属性中。数据绑定有三种方法：

● 使用大括号{ }；

● 在MXML中使用<mx:Binding>标签；

● 在ActionScript中使用静态方法BindingUtils。

除了数据绑定功能，Flex提供相关组件，被设计用来与远程服务端逻辑的服务进行交互。通过数据远程调用，可以向应用程序提供数据或向服务器发送数据。数据远程调用的组件有以下三种（具体请查看Flex的帮助手册）：

● WebService组件，提供基于SOAP的Web服务的访问；

● HTTPService组件，提供基于自定义数据返回的HTTP URL的访问；

● RemoteObject组件，使用AMF协议实现对Java、PHP和.NET对象的访问。

2.基于ActionScript的程序设计

ActionScript在Flex中扮演着主要角色，是扩展Flex应用程序的利器。ActionScript在Flex中的应用非常灵活，不仅能够引用操作控件，而且能够创建新的组件，实现程序的逻辑控制。

1）使用ActionScript引用控件

在Flex的开发中，您将发现ActionScript的主要用途之一是在应用程序中引用可视化控件和容器，操作控件的属性。引用MXML控件前，需要先为该控件设置ID，在ActionScript代码中通过控件ID调用控件，操作其属性。

2）使用ActionScript创建控件

在程序运行时创建可视化控件，这是一个使用广泛的方法，这种方法与创建ActionScript类实例相同。由于MXML控件对应于ActionScript类，遵循面向对象编程规范，创建一个新的可视化控件，只需创建一个控件对应类的对象，设置属性，并添加到Application的相应节点中。添加到节点的方法有addChild()、addChildAt()等，同时也可通过removeChild()、removeChildAt()等方法在程序运行时移除控件。

3）开发ActionScript组件

使用ActionScript可以开发自定义的可重用组件，扩展Flex Framework现有组件，包括用户界面组件和非可视化组件。可重用的、自定义组件的开发，在项目应用中非常有用。

ActionScript提供了很好的面向对象思想的设计模型，使程序员更容易编写和设计复杂的代码。在Flex程序设计中，ActionScript作为主要的编程语言，是学习Flex技术的基础。

3.事件与事件机制

在Flex中，事件机制是非常重要的，很多时候都是通过处理事件来与Flex控件、自定义控件和组件进行交互的。

事件是在程序运行中触发的一个响应，当用户向系统发出指令，就相应地产生一个事件，通过事件，用户就可以与系统进行对话。例如，当用户单击鼠标的时候，就会产生一个鼠标单击的事件，系统就会根据用户单击的对象，来判断用户发出的指令，如果对象是保存数据的按钮，那么，用户单击鼠标之后，程序就会执行保存数据的事件函数。

Flex用户界面是事件驱动的，在Flex应用中通过ActionScript处理事件，即在ActionScript中定义名为事件监听器的函数来处理事件。在ActionScript 3.0中，事件的处理统一用单一的事件处理模型。Event（flash.events.Event）类是应用程序中所有事件的基类。事件模型允许开发人员监听控件分派的任何事件，当分派Event对象时，则启动事件流，检查已注册的监听器。事件流有三个阶段：捕获、定位、冒泡。注册事件的监听函数是通过addEventListener()方法实现的。通过这个方法，对象可以随时监听事件的发生，然后触发并执行函数。