第三章 Flex的基础 （1-2小节）

第三章 Flex 基 础

Flex 是基于组件来进行开发的，为了更有效率地设计和开发应用程序，你应该熟悉这些开发模式以及操作步骤。

第一节创建一 个 Flex 应用程序

应用程序模 型

Flex 创建一个应用程序时，你使用组件（容 器 /containers 和控 件 /controls ）来描述用户的操作界面。例如，容器可以是一个用来进行数据输入的表格容器，如一个盒 框 /Box 或一个栅格 /Grid ；而控件就是该表格中的元素，如一个按 钮 /Button 或文本输入 栏 /Text Input field 。

举个例子，在随后的图例中显示了两种不同的盒子容器，它们分别包含了三个按钮控件和一 个 ComboBox 控件 ：

Flex 的 MVC 模型

为了增强系统的复用性和可维护性，应该采用具有良好体系架构的模型， 即 Model-View-Controller （ MVC ） 。

1. 1. 模型 /Model 组件封装了数据和与数据相关的行为 。
2. 2. 视图 /View 组件定义了应用程序的用户界面 。
3. 3. 控制 器 /Controller 组件则负责处理程序中的数据连接 。

web 服务器的运用

通常地，会涉及到 的 web 服务器类型有 ：

1. 1. 纯 web 服务器，它们仅将用户的请求回复一个简单的静 态 HTML 页面。在这种情况下，你需要 将 Flex 应用程序 的 SWF 文件嵌入到一 个 HTML 页面中 。
2. 2. web 应用服务器， 如 JRun 、 ColdFusion 或 者 PHP ，它们可以动态地生成页面。在这种情况下，你将使用到与服务器技术相关的库，并动态地处理它们的内容 。
   1. 3. J2EE 应用服务器 或 servlet 容器。向一 个 J2EE 应用服务器 或 servlet 容器发出请求， 如 JRun 、 Tomcat 或 WebSphere ，通常你需要使 用 Flex Data Services 。
   2. 程序开发的通常步 骤 开 发 Flex 应用程序，通常会采用如下的步骤进行 ：
   1. 1. 在一个文本编辑器或集成开发环境（ IDE ）中， 如 Adobe Flex Builder 、 Eclipse 或 IntelliJ 中插 入 MXML 根标签。
      1. 2. 添加一个或更多容器 。
      2. 3. 在容器中添加控件，如输入栏、按钮和输出栏 。
      3. 4. 定义一种数据模型 。
      4. 5. 添加一 个 web 服务器 ， HTTP 服务器，或向远 程 Java 对象发送请求 。
      5. 6. 为数据输入添加验证 。
      6. 7. 为组件添加脚本 。
      7. 8. 将应用程序编译 成 SWF 文件。

发布应用程 序 你可以将应用程序发布成一个编译好 的 SWF 文件，或者如果 有 Flex Data Services 的话 ，

则可以将应用程序发布为一 组 MXML 和 ActionScript 文件。客户端进行访问的格式分别是 ： http://hostname/path/filename.swf http://hostname/path/filename.mxml

第二节 Flex 编程模 型

Flex 包含 了 Flex 类库、 MXML 和 ActionScript 编程语言，如下图所示：

当然， Flex 还包 括 Flex 编译器和调试器，它们并没有在图中示出。

你可以混 合 MXML 和 ActionScript 来 发 Flex 应用程序。事实上， MXML 和 ActionScript 编程语言都提供了访 问 Flex 类库的能力。通常的做法是：使 用 MXML 去定义用户界面的元素，使 用 ActionScript 去定义客户端的逻辑并进行控制 。

Flex 类库包括 了 Flex 组件、管理器和行为。在基于组件的开发模型下，开发人员可以

运用预先做好的组件。

将 ActionScript 添加 到 Flex 应用程序 中

ActionScript 可以出色地完成如下任务 ：

1. 1. 处理事 件
2. 2. 处理错 误
3. 3. 在 MXML 语句中将数据对象绑定 到 Flex 控件 上
4. 4. 定制组件

在随后的例子中，为按钮控件的点击事件添加了事件监听 器 /event listener 。当用户点击按钮时， 将 TextInput 控件中的文本拷贝 到 TextArea 控件中。

<?xml version="1.0"? > <!-- ?xml 标签必须位于第一 行 -- >

<!--MXML 根元素标 签 -- > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<!-- 定义一个面板容器来放置控 件 -->

<mx:Panel title="My Application">

<!--TextInput 控件用来进行用户输 入 -- > <mx:TextInput id="myInput" width="150" text=""/ >

<!--TextArea 控件用来进行输 出 -- > <mx:TextArea id="myText" text="" width="150"/ >

<!-- 按钮控件来触发拷 贝 -- > <mx:Button id="myButton" label="Copy Text " click="myText.text=myInput.text;"/ >

</mx:Panel> </mx:Application>

前面的例子是 在 MXML 中直接插 入 ActionScript 代码。尽管这种技术只需要一两 行

ActionScript 代码，但是对于更为复杂的逻辑实现，你就需要 在 <mx:Script> 块中定 义

ActionScript ，就象如下所示那样 ：

<?xml version="1.0"? > <!-- ?xml 标签必须位于第一 行 -- >

<!--MXML 根元素标 签 -- > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script > <![CDATA [

// 定义一 个 ActionScript 功能函 数 private function duplicate():void { myText.text=myInput.text ; }

]] > </mx:Script >

<!-- 定义一个面板容器来放置控 件 -- > <mx:Panel title="My Application" >

<!--TextInput 控件用来进行用户输 入 -- > <mx:TextInput id="myInput" width="150" text=""/ >

<!--TextArea 控件用来进行输 出 -- > <mx:TextArea id="myText" text="" width="150"/ >

<!-- 按钮控件来触发拷 贝 -- > <mx:Button id="myButton" label="Copy Text " click="duplicate();"/ >

</mx:Panel> </mx:Application>

在本例中，你使 用 ActionScript 功能函数来实现了一个事件监听器。这样做的好处是 使 MXML 代码 与 ActionScript 代码分离，以提供更好的健壮性和灵活性。

使用数据绑 定

Flex 提供简洁的语法来实现组件间的、或与数据模型的绑定。随后的例子中，在波浪括号 /{ } 里的数值 将 TextArea 控件 与 TextInput 控件的文本属性联系起来。当用户 在 TextInput 控件中输入文本时，它会自动地拷贝 到 TextArea 控件中去 。

<?xml version="1.0"? > <!--?xml tag must start in line 1 column 1 -- >

<!-- MXML root element tag. -- > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<!--Flex controls exist in a container. Define a Panel container. -- > <mx:Panel title="My Application" >

<!--TextInput control for user input. -- > <mx:TextInput id="myInput" width="150" text=""/ >

<!--Output TextArea control. -- > <mx:TextArea id="myText" text="{myInput.text}" width="150"/ >

</mx:Panel> </mx:Application>

使用事件去处理错误正如你可以使用事件去实现程序的功能，你也可以使用它们对错误进行处理。下面的例子显示了如何设计一个针 对 web 服务器操作的错误事件的监听器 ：

<mx:Script> <![CDATA[

public function showErrorDialog(error:String):void { // 具体功能实 现 .. . }

]]> </mx:Script> ... <mx:WebService id="WeatherService" ...">

<mx:operation name="getFoo" fault=" showErrorDialog(event.fault.faultString); "/> </mx:WebService>

控制应用程序的外 观 控制应用程序的外观，常涉及到如下内容 ：

1. 大小 /Sizes ，即组件或应用程序的高度和宽度 。

1.  
   1. 2. 样式 /Styles ，即一组特性，如字体、排列方式、颜色等。它们都是通过层叠样式 （ CSS ）来进行设置的 。
      1. 3. 皮肤 /Skins ，即可以进行改变的组件视觉元素 。
      2. 4. 行为 /Behaviors ， 即 Flex 组件在视觉或听觉效果方面的变化 。
2. 6. 视图状 态 /View state 可以让你通过修改它的基础内容，来改变组件或程序的内容和外观 。

7. 变换 /Transitions 可以让你定义屏幕上发生改变的视图状态。

使用数据服务 器

Flex 被设计为可以与许多类型的服务器打交道，从而提供对本地和远端逻辑的访问。提供数据访问 的 MXML 组件被称之为数据服务器组 件 /data service components 。 MXML 包含了如下几种类型的数据服务器组件 ：

1. 1. WebService 提供对使 用 SOAP 的 web 服务器的访问 。
2. 2. HTTPService 提供对返回数据 的 HTTP URLs 的访问 。

3. RemoteObject 通过使 用 AML 协议提供 对 Java 对象（ Java Beans 、 EJBs 、 POJOs ）的访问。该选项目前仅适用 于 Flex Data Services 或 Macromedia ColdFusion MX 7.0.2.

从 Flash 到 Flex

开发一 个 Flex 应用程序与开发一 个 font-size: 10.5pt; font-family: 'serif&ap