深入剖析Flex应用程序中事件和行为的使用-flex order的使用场景

你对Flex应用程序中事件和行为的使用是否了解，这里和大家分享一下，Flex应用程序是基于事件的/event-based，比如当用户单击一个按钮时，便会触发一个事件，下面请看本文详细介绍。

Flex应用程序中事件和行为的使用

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

◆Flex应用程序中当事件被触发时修改组件的属性

对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一个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。

◆Flex应用程序中使用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。

【编辑推荐】