Flex中文帮助 第三章

转载自AIRIA.cn

第三章 Flex基础

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

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

本讲涉及相关资源下载:

FLEX API大全：http://www.airia.cn/FLEX_Directory/Flex_API_Flex_Framework_Diagram_Flex_API_down/

应用程序模型

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

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



Flex的 MVC模型

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

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

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

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

则可以将应用程序发布为一组 MXML和 ActionScript文件。客户端进行访问的格式分别是：

[url] http://hostname/path/filename.swf[/url]
[url] http://hostname/path/filename.mxml[/url]

第二节 Flex编程模型

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



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

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

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

将 ActionScript添加到 Flex应用程序中

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

1. 处理事件
2. 处理错误
3. 在 MXML语句中将数据对象绑定到 Flex控件上
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，即组件或应用程序的高度和宽度。2. 样式/Styles，即一组特性，如字体、排列方式、颜色等。它们都是通过层叠样式（ CSS）来进行设置的。
3. 皮肤/Skins，即可以进行改变的组件视觉元素。
4. 行为/Behaviors，即 Flex组件在视觉或听觉效果方面的变化。
6. 视图状态 /View state可以让你通过修改它的基础内容，来改变组件或程序的内容和外观。
7. 变换/Transitions可以让你定义屏幕上发生改变的视图状态。

使用数据服务器

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

1. WebService提供对使用 SOAP的 web服务器的访问。
2. HTTPService提供对返回数据的 HTTP URLs的访问。
3. RemoteObject通过使用 AML协议提供对 Java对象（Java Beans、 EJBs、POJOs）的访问。该选项目前仅适用于 Flex Data Services或 Macromedia ColdFusion MX 7.0.2.

从 Flash到 Flex

开发一个 Flex应用程序与开发一个 Macromedia Flash Professional 8程序有所不同，即使两者都会最终被编译成 SWF文件。Flash Professional使用了一些概念，如时间轴 /Timeline，动画帧/，图层 /layers来组织和控制程序中的内容。而在 Flex中则抛弃了这些内容，转而使用 MXML标签来设计用户界面组件和连接数据源。

尽管 Flash和 Flex的开发模型各不相同，但是 Flash仍然是一个非常强大的工具，用来创建定制的组件和视觉方面的资源，然后以外部 SWC文件的形式导入到 Flex中。

第三节 创建 Flex Data Services应用程序

当你使用 Flex Data Services来开发应用程序时，就能体会该数据服务架构的强大功能。

关于 Flex Data Services

Flex Data Services在 Java应用服务器上或 Java容器中执行，提供如下列所示的强大功能：

1. 增强的数据服务。
2. 与多个客户端进行数据共享
3. 支持客户端到客户端的通信
4. 自动服务器数据推进
5. 客户端对服务器端资源的可靠访问
6. 数据服务日志
7. 增强的远程过程调用（ RPC）功能


关于 Flex数据管理服务

Flex数据管理服务 /Data Management Service可以让你开发出使用分布式数据的应用程序。该特性可以实现诸如数据同步、数据复制、偶尔连接等功能。 Flex Data Services的数据管理服务、消息服务和 RPC服务都是基于低层的消息构造而建立的，如下图所示：



消息构造 /messaging infrastructure可以使 Flex应用程序连接消息目的地，发送消息，以及接收从其它客户端发来的消息。消息客户端可以是 Flex应用程序或者其它类型的客户端，如 Java Message Service（JMS）客户端。消息构造由服务器端的消息服务，和在 Flex客户端程序相应的消息 API所组成。

第四节 使用 Flex图表组件

在图表或图形中显示数据的能力，可以使用户更加容易地解释数据以及它们之间的内在联系。在 Flex中，不再仅仅是出现一些简单的数据表格，你可以使用各种各样的图表形式去显示你的数据。它们是：

1. 区域形图表 /Area charts

[img]http://www.airia.cn/up_files/image/Article/2008/07/06/37313405.jpg [/img]

2. 气泡形图表 /Bubble charts



3. 烛形图表 /Candlestick charts
4. 柱形图表 /Column charts
5. 高低开合形图表 /HighLowOpenClose charts
6. 线形图表 /Line charts

[img]http://www.airia.cn/up_files/image/Article/2008/07/06/37313407.jpg [/img]





7. 饼形图表 /Pie charts



8. 标绘形图表 /Plot charts



除了上述图形类型，你还可以扩展 CartesianChart控件来创建定制的图表。

定义图表数据

所有的图表控件都使用 dataProvider属性去定义图表的数据。图表组件使用一个简单的、或基于列表的数据提供器 /data provider，类似于一维数组。

数据提供器由两部分组成：数据对象的收集和 API。API是类执行的一套方法和属性，而数据提供器在 Flex组件和数据之间创建了一个抽象的层次。

第五节 使用 MXML

MXML是一种 XML语言，你可以使用它去布置 Adobe Flex应用程序的用户界面。你还可以使用 MXML去定义其它的方面，如存取服务器端的数据，将用户组件与服务器端数据源进行绑定等。

MXML看起来与你所熟悉的 HTML很类似，然而， MXML更为结构化，并提供更为丰富的标签集。 MXML与 HTML之间最大的不同之处在于，以 MXML所定义的应用程序将被编译成 SWF文件并由 Flash Player进行渲染，它提供比 HTML程序更为丰富的和动态的用户界面。

你可以将 MXML应用程序编写成一个文件或多个文件。同时， MXML还支持以 MXML和 ActionScrip所定制的组件。

编写一个简单的应用程序

随后的简单程序显示 “Hello World”，该例子包含了 <mx:Application>标签和两个子标签，即<mx:Panel>标签和<mx:Label>标签。<mx:Application>是所有 Fles应用程序的根标签。 <mx:Panel>标签定义了一个面板容器，它包括了标题栏、状态信息、边界、以及容纳子对象的内容区域。 <mx:Label>标签中使用了一个 Label控件用来显示文本。

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >

<mx:Label text="Hello World!" fontWeight="bold" fontSize="24" />

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

将文件保存为 hello.mxml。请注意， MXML文件的后缀 .mxml必须是小写。然后编译并运行所生成的 SWF文件，结果如下所示：



MXML标签与 ActionScript类的关系

Adobe是通过 ActionScript类库来实现 Flex应用程序的。类库包括了组件（容器和控件），管理类，数据服务类等等。事实上，你是在使用类库所支持的 MXML和 ActionScript来开发 Flex应用程序。

MXML标签与 ActionScript类或类的属性相对应。 Flex剖析 MXML标签并编译成相应的 SWF文件。举个例子， Flex提供 ActionScript按钮类/Button class来定义按钮控件。在 MXML中，你使用如下 MXML语句来创建一个按钮控件：

<mx:Button label="Submit" />

当你使用 MXML标签来声明一个控件时，事实上你就创建了相应那个类的一个实例对象。上述 MXML语句创建了一个按钮对象，并初始化它的 label属性值。

与 MXML相关的技术标准

与 MXM相关的技术标准有：

1. XML标准。 XML文档使用标签去决定结构化信息的内容，以及它们之间的关系。

2. 事件模型标准。 Flex事件模型是文档对象模型 /Document Object Model （DOM）第三级事件的一个子集，该模型是由 World Wide Web Consortium（W3C）起草制定。

3. Web服务标准 Flex提供与服务器交互的 MXML标签，遵循了 Web服务描述语言 /Web Services Description Language（WSDL）的规则。具体包括了简单对象访问协议 /Simple Object Access Protocol（SOAP）和超文本传送协议 /Hypertext Transfer Protocol（HTTP）。

4. Java标准

Flex提供了与服务器端 Java对象交互的 MXML标签，包括 plain old Java objects（POJOs），JavaBeans和企业级 /Enterprise JavaBeans（EJBs）。

5. HTTP标准

Flex提供了相应的 MXML标签去支持标准的 HTTP GET和 POST请求，以及对 HTTP返回数据的处理。

6. 图形标准

Flex还提供了相应的 MXML标签去使用 JPEG，GIF和 PNG图象。Flex还能够将 SWF文件和 Scalable Vector Graphics（SVG）文件导入到应用程序中。

7. 层叠样式表标准 MXML样式的定义和使用遵循了 W3C Cascading Style Sheets （CSS）标准。

第六节 使用 ActionScript

Adobe Flex开发人员还可以使用 ActionScript去扩展应用程序的功能性。ActionScript提供了比 MXML更为低层的、更细致的、更为强大的功能。

关于 ActionScript

ActionScript是一种运用于 Adobe Flash Player的编程语言，它与 core JavaScript非常类似。ActionScript 3.0的特性完全实现了 ECMAScript for XML (E4X)。

MXML程序中的 ActionScript

ActionScript极大地扩展了 Flex开发人员的能力。通过使用 ActionScript，你可以定义事件监听器，获取或设置组件的属性，处理回调功能，创建新的类、包和组件等。

你可以运用如下所示方法在 Flex中使用 ActionScript：

1. 在<mx:Script>标签中插入 ActionScript代码块。
2. 调用存储在 system_classes目录结构中的全局 ActionScript功能函数。
3. 引用 user_classes中的外部类和包来处理更为复杂的任务。
4. 使用标准的 Flex组件。
5. 使用 ActionScript类扩展已有的组件。
6. 使用 ActionScript创建新的组件。
7. 在 Flash创建环境中创建新的组件（ SWC文件）。

ActionScript的编译

Flex应用程序的逻辑实现是由 ActionScript类，MXML文件，SWF文件，外部组件共同组成。最后由 Flash Player下载 SWF文件并在客户端机器上进行运行。

你可以在 MXML文件中使用 ActionScript代码段。 Flex编译器将主 MXML文件和它的子文件变换成一个单独的 ActionScript类。同时，你还可以在 MXML文件中导入 ActionScript类，这些类会被添加到最后的 SWF文件中。

随后的例子显示了源文件是如何生成 SWF文件，并通过 J2EE服务器发送给客户端的：



在 Flex应用程序中使用 ActionScript

当你编写一个 Flex应用程序时，使用 MXML去布置用户的界面，使用 ActionScript去处理与用户的交互。你可以使用不同的方法将 ActionScript和 MXML混合在一起。

在 Flex应用程序中使用 ActionScript，你可以在 <mx:Script>标签中添加脚本块，或者包含外部的 ActionScript文件。另外，你还可以在 MXML程序中导入外部的类文件或整个类的包。

创建 ActionScript组件

通过使用 ActionScript并在 Flex程序中进行引用的方式，你可以创建可复用的组件。使用 ActionScript所创建的组件可以包含图形元素、定制的商业逻辑、或扩展已存在的 Flex组件。

例如，你可以定义一个定制的按钮，它由 Flex的按钮控件派生出来，就象这样：

package myControls 
{ 
    public class MyButton extends Button { 
        public function MyButton() {
        ...
        }
    ...
    } 
}

这个例子中，你在 MyButton.as文件里编写好 MyButton控件，并将文件保存到 Flex应用程序的根目录的 myControls子目录下。然后在 Flex应用程序中引用你定制的按钮控件，如在 MyApp.mxml文件里，就象这样：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cmp="myControls.*" >

<cmp:MyButton label="Jack"/>

</mx:Application>

本例中，你首先定义 cmp命名空间，用它来放置你定制的组件，然后使用该命名空间为前缀的 MXML标签对组件进行引用。

转载自AIRIA.cn