深入探究Flex应用程序使用-flex的使用

本文和大家重点讨论一下Flex应用程序的概念，主要包括时间和行为的使用，在Flex应用程序中如何添加多个页面，以及如何使用Flex等内容，希望本文的介绍能让你有所收获。

一、事件和行为的使用

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

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

对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一个ID值，如下所示：

<mx:Panelidmx:Panelid="myPanel"layout="absolute"width="80%" 
height="80%"x="122"y="24">

随后你就可以将行为/behavior添加到应用程序上，当某个事件被触发时改变组件的属性值，就象这样：

<mx:Buttonlabelmx: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> 
 
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文件里的块中进行定义的，然后引用到按钮的单击事件上。

单独的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。

二、在应用程序中添加多态页面

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

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

三、开始使用Flex

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

◆使用FlexBuilder

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

◆使用FlexSDK

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

【编辑推荐】