专家推荐 经典Flex学习入门教程

本文和大家重点讨论一下Flex学习过程中的一些基础知识，通过本文的学习，你可以创建你的第一个Flex应用程序，并将它与你以前所熟悉的Web开发技术进行比较，以领会Flex的内涵和精髓。

Flex是如何工作的

该部分文档的内容是为用户提供关于Adobe?Flex工作机制的一个快速综述。通过本章节的学习，你可以创建你的第一个Flex应用程序，并将它与你以前所熟悉的Web开发技术进行比较，以领会Flex的内涵和精髓。

Flex学习第一节：构建并运行Flex应用程序

Flex是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用Adobe?
Flash?Player9作为前台的“富客户端互联网应用程序/richInternetapplications/RIA”，以满足用户更为直观和极具交互性的在线体验。

◆开发Flex应用程序的典型步骤如下（通常是这样）：

1.选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）
2.布置组件以设计用户界面。
3.使用样式和主题来增强视觉方面的设计。
4.添加动态行为（例如程序部件之间的相互作用）。
5.定义并连接所需的数据库服务。
6.将源代码编译成SWF文件，然后在FlashPlayer中运行。

◆Flex学习手册中一个典型的Flex应用程序包括如下元素：

1.Flexframework

Adobe?Flex2framework包含了创建RIA所需要的所有组件，它们是：用于应用程序布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式。Flexframework被包含在公用组件库（SWC）文件中。

2.MXML

每个Flex应用程序至少包含有一个MXML文件，它被作为该程序的主文件。MXML是一种标记语言，它是基于XML的一种实现，用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。

3.ActionScript3.0

你可以使用ActionScript3.0为应用程序添加动态行为，它是基于ECMAScript的一种实现，类似于JavaScript。你可以将ActionScript作为一个脚本块，在MXML文件中直接进行添加；或者创建一个单独的ActionScript文件，然后将它们导入到MXML文件中。

4.CSS

你可以通过设置组件的属性（properties）来改变组件（按钮、列表框等）的视觉样式。
例如，按钮组件有一个fontFamily属性，你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制：通过主题(theme)；在CSS文件中进行定义；在MXML文件中的样式块中进行定义；在组件的实例中进行设置。

5.图形资源

与很多应用程序一样，Flex包含了各种各样的图形资源，如图标和图象。

6.数据

一些组件被使用来进行数据显示（combobox或者datagrid）的工作。同时，你还可以使用各种方式来将这些组件与数据联系起来，如使用数组、收集对象、数据模型、以及外部XML数据资源，等等。

Flex应用程序是如何编译和发布的：

所有的元素都被编译或连接到你的Flex应用程序中。Flex应用程序被编译成一个SWF文件，然后在FlashPlayer下运行。当一个源代码被编译时，它就被转换成ActionScript类（译者注：这正是Flex精髓的地方之一，即提供从MXML到ActionScript的转换），并与图形和其它资源合并到SWF文件里。在运行时，SWF文件与所需的外部库、服务和数据源进行交互。

一般的Flex应用程序并不需要服务器端所提供的支持。因此，你可以在你的本地计算机上编译它们，然后在Web服务的HTML页面中发布给你的用户。
当然，你还可以将Flex与Adobe?FlexDataServices2、ColdFusionFlashRemotingService、或者其它Java和J2EEService服务器技术结合起来，进行B/S结构的网络应用程
序的开发。

MXML：一切开始的地方

你可以在MXML中使用Flex所提供的组件来定义用户界面。这里有一个主MXML程序文件的例子：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
<mx:Panel> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"/> 
<mx:Buttonlabelmx:Buttonlabel="Close"/> 
</mx:Panel> 
</mx:Application> 

如果你对XML已经很熟悉了，就能一眼识别出这个例子的格式。MXML代码的头两行包含了版本号、编码、以及命名空间的信息，文档的主体包含的是程序的具体内容。
Flex应用程序所有的具体内容都被放在<mx:Application>标签对中。同时，你还可以在父标签对中嵌套其它的子标签对（译者注：反正标签是成对出现的，这点一定要记住）。
该例子创建了一个简单的程序，它在屏幕上显示“SayhellotoFlex！”的文字。在该程序中，声明了TextArea和Button组件，并设置了它们相应的text和label属性。

备注：在MXML文件中的每个标签都有前缀mx，它是Flex的设计命名空间。#p#

Flex学习第二节：连接数据

请记住，在Flex应用程序中对数据的操作最重要的事情是：Flex应用程序并不直接与一个数据库进行连接。因此，Adobe?FlexBuilder2没有提供直接连接数据的工具。你可以通过使用MXML和ActionScript代码来操作和管理数据。

在Flex中，你可以使用几种方法去操纵和管理数据，它们大多数相关的内容已经超出了在这里进行简要介绍的范围（更多的信息，请查看后面的章节）。不管怎样，请想象一种可以连接外部数据的方法，随后的例子将演示与XML结构的数据进行连接。

数据的生成
因为Flex应用程序并不直接与一个数据库进行连接，所以你需要使用某种类型的服务来支持对数据的使用。在随后的例子中，将使用HTTPService组件从PHP所产生的一个XML文件中获取数据。

连接数据库的第一步是生成将在Flex程序中使用到的数据。在与PHP的应用中，你将采用如下的步骤：

1.创建一个数据库（如MySQL）。

2.编写一个PHP脚本连接MySQL数据库并生成XML格式的数据。
这些步骤同样适合于在其它工作平台上生成的数据（如ASP.NET、JSP等）。

◆连接外部数据源

对于PHP所生成的XML格式数据，你可以使用HTTPService组件来请求获取数据，就象这样：

<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
 
<mx:HTTPService 
id="productsRequest" 
url="http://www.somesite.com/products.php"/> 
...  
 

 

HTTPService组件定义了一个请求ID，你将使用这个ID来控制提供数据的URL或者服务器与数据之间的绑定。

◆外部数据与数据驱动控制的绑定

通过数据与数据驱动控制（data-drivencontrol）的绑定，你就可以处理HTTPService的结果（XML数据），就象这样：

 

<mx:DataGridxmx:DataGridx="20"y="80"id="productGrid"width="400"  
dataProvider="{productRequest.lastResult.products.items}"> 
<mx:columns> 
<mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="Name"dataField="name"/> 
<mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="Price"dataField="price"/> 
</mx:columns> 
</mx:DataGrid> 
 

 

数据绑定的语法显示在数据控制的dataProvider属性中（在波浪形的括号里），它包含了HTTPService请求ID、lastResult方法、以及XML文件的数据结构。在这个例子中，XML数据源的数据结构看起来就象这样：

<XML> 
<products> 
<item> 
<name>MobilePhone</name> 
<price>$199</price> 
</item> 
<item> 
<name>CarCharger</name> 
<price>$34</price> 
</item> 
...  
 

 

通过设置dataField属性，项目数据（name和price）作为数据栅格中每一列的数据。

◆在运行时加载数据

你还可以在Flex程序开始运行时加载数据，就象随后所示，在HTTPService中向某个特定的URL发送一个请求：

 

<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
layout="absolute"creationComplete="productsRequest.send()"> 
 

 

当你将creationComplete方法添加到应用程序标签里后，数据会在运行时进行加载并交于数据驱动控制（在这个例子中是数据栅格）。
你还可以将HTTPService请求添加到一个控制事件上而不是程序里的标签中，就象如下所示：

 

<mx:Buttonxmx:Buttonx="50"y="8"label="GetData" 
click="productsRequest.send();"/> 

Flex提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调用、数据服务、或者其它企业级技术来操纵和管理数据。#p#

Flex学习第三节：关于FlashPlayer安全性方面的问题

出于安全方面的考虑，在客户端的FlashPlayer中运行的应用程序，只有在满足如下条件之一的情况时才能访问远程的数据源：

1.应用程序所编译的SWF文件与远程数据源位于同一个域中。

2.使用代理（proxy），并且你的SWF文件位于和代理相同的服务器上。AdobeFlexDataServices为Flex应用程序提供了一个完整的代理管理系统。同时，你还可以通过使用一种web脚本语言，如ColdFusion、JSP、PHP或者ASP来创建一个简单的代理服务。

3.安装crossdomain.xml（跨域策略/cross-domainpolicy）文件在数据源的宿主Web服务器上。crossdomain.xml文件允许位于其它域中的SWF文件对数据源的访问。

第四节为Flex应用程序设计界面布局

让我们来详细分析一下前面那个“SayHellotoFlex“的简单例子，你可以通过设置组件的属性值来控制Flex应用程序的界面布局，就象如下所示：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
layout="absolute"> 
<mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"  
right="30"/> 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> 
</mx:Panel> 
</mx:Application> 
 

许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的x和y的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们，使它们在应用程序的界面放大或缩小时仍然保持其彼此的位置。

在这个例子中，面板/Panel组件的布局属性被设置为绝对值方式，同时所有容器的大小都被设置为应用程序的百分之八十。两个组件（TextArea和Button）被放置到距离面板容器边界的特定象素位置上。

◆使用风格和主题增强视觉方面的设计

如果样式/style的属性值没有被指定，它们将由整个程序中运行的主题/theme来进行控制。在默认情况下，Flex应用程序使用Halo主题（就象上面那个例子那样）。当然，你可以修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主题样式，就象这样：
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
layout="absolute"> 
 
<mx:Style> 
TextArea{  
font-size:36px;  
font-weight:bold;  
}  
</mx:Style> 
 
<mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%" 
x="122"y="24"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"
left="10"right="30"/> 
 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> 
</mx:Panel> 
</mx:Application> 

通过明确地为TextArea组件定义一个样式，应用程序现在看起来就会象这样了：

在这个例子中，一种新样式在MXML文件中的<mx:Style>标签里进行了定义。如同我们前面所提到过的，你还可以通过修改主题或应用新主题、使用一个外部CSS文件、或者设置单独的样式属性来达到设置新样式的目的。
将一个样式单导入到MXML文件中，你需要添加如下的代码：
 

<mx:Stylesourcemx:Stylesource="styles.css"/> 

#p#Flex学习第五节：事件和行为的使用

HTML应用程序的原理是由客户端发出请求，并从服务器端得到反应。与之不相同的是，Flex应用程序是基于事件的/event-based。举个例子，当用户单击一个按钮时，便会触发一个事件。应用程序本身，不是指服务器，包含了识别事件的逻辑并采取相应的行动。

◆当事件被触发时修改组件的属性

对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一个ID值，如下所示：
<mx:Panelid="myPanel"layout="absolute"width="80%"height="80%"x="122"y="24">
随后你就可以将行为/behavior添加到应用程序上，当某个事件被触发时改变组件的属性值，就象这样：
<mx:Buttonlabel="Close"right="30"bottom="40"click="myPanel.visible=false"/>当按钮被单击时，面板的可见属性值被设置为false。

◆使用ActionScript功能函数

你也可以通过编写ActionScript功能函数，并在事件中调用它来达到相同的目的，在这种情况下，按钮组件的单击事件如下所示：
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
layout="absolute"> 
<mx:Stylesourcemx:Stylesource="styles.css"/> 
 
<mx:Script> 
<![CDATA[  
publicfunctionclose():void{  
myPanel.visible=false;  
}  
]]> 
</mx:Script> 
 
<mx:Panelidmx:Panelid="myPanel"layout="absolute"width="80%" 
 
height="80%"x="122"y="24"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70" 
 
left="10"right="30"/> 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"click="close();"/> 
</mx:Panel> 
</mx:Application> 

ActionScript功能函数是在MXML文件里的<mx:Script>块中进行定义的，然后引用到按钮的单击事件上。

◆单独的ActionScript代码

为了从MXML文件中更好地分离出ActionScript代码，你可以将它们放到单独的ActionScript文件中而不是作为函数，然后再将它们导入到MXML文件里，如下所示：

<mx:Scriptsourcemx:Scriptsource="myFunctions.as"/> 

◆运用行为和变换增强丰富的视觉互动性

Flex应用程序是事件驱动的，这就意味着你可以在程序运行时使用事件去添加丰富的视觉互动性。为了实现它，你使用了一个事件触发器，用其来描述一个行为。
在前面的例子中，面板组件的visible属性值被设置为false因而不可见。你还可以通过使用行为来制造出更强的视觉效果。
下面的例子创建了一个行为，该行为首先创建好一种效果，然后把它绑定到组件的hideEffect属性上（触发器）：
 

<mx:Fadeidmx:Fadeid="myFade"/> 
<mx:Panelidmx:Panelid="myPanel"layout="absolute"  
 
width="80%"height="80%"  
hideEffect="{myFade}"> 

当关闭按钮被单击时，面板组件淡出而不是消失。
触发器和效果还可以组合到更为复杂的行为中，其被称之为变换/transitions。#p#

Flex学习第六节：在应用程序中添加多态页面

有几种方法在一个Flex应用程序中创建多态页面。你可以使用ViewStack组件、创建单独的MXML文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状态都是基于一种基础的状态，并进行继承和扩展。
在随后的例子中，当用户在组件上滚动鼠标时，基础状态发生变化。

当一个视图状态被调用时（通过用户的鼠标在组件上滚动时产生的事件），一种效果（或一种变换）改变了用户界面的外观。
使用视图状态方式、ViewStack方式还是MXML文件方式，取决于你想从一个页面到另一个页面进行变化的范围、用户界面的复杂性、以及实现Flex程序的构架。

Flex学习第七节：开始使用Flex

现在，想必你对Flex的概念有了一个基础的认识，让我们开始创建Flex应用程序吧。

◆使用FlexBuilder

通过使用新项目向导/NewFlexProjectWizard创建一个Flex项目（File>New>FlexProject）。设计，编译，以及调试Flex应用程序所需的所有工具，都被包括在FlexBuilder中了。

◆使用FlexSDK

创建一个文件名后缀为MXML的文本文件，在其中添加MXML文件的基本元素（上述例子中的头两行代码），然后使用文档资料（特别是AdobeFlex2LanguageReference）去研究各种组件的用法。编译和调试工具是以命令行的方法提供的。
 

【编辑推荐】

1. Flex学习手册新手必备
2. 从Flex Builder更名看Flash平台战略
3. Flex及FlexBuilder2.0开发环境详解
4. FlexBuilder3.0与Eclipse3.4的完美结合
5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件