事件跟行为的用法——How Flex Works（五）

事件和行为的用法——How Flex Works（五）

与HTML应用不同（其使用了客户端端发出请求、服务器发出响应的模式），Flex应用程序是基于事件的。举例说，用户点击按钮，事件就被触发。应用本身——而不是服务器——包含了恰当的识别事件和行为的逻辑。

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

为了实现与组件程序意义上的交互、为了响应事件，您首先必须有引用组件的方式，因此，需要给其ID，如下所示：

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

然后您可以通过在运行时触发事件改变组件的属性来为其添加行为，如下所示：

<mx:Button label="Close" right="30" bottom="40" click="myPanel.visible=false"
/>

当按钮被点击，控制板的可视属性被设置为false。

使用ActionScript函数

您可以通过编写ActionScript函数、然后使其被事件调用做同样的事——本例中，是被按钮组件的点击事件调用：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Style source="styles.css" />

    <mx:Script> 

        <![CDATA[ 

            public function close() : void { 

            myPanel.visible = false; 

            } 

        ]]> 

    </mx:Script> 


    <mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24">
        <mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30" /> 
        <mx:Button label="Close" right="30" bottom="40" click="close();"
 /> 
    </mx:Panel> 
</mx:Application>

ActionScript函数定义在MXML文件的<mx:Script>块当中，被按钮的点击事件引用。

分离ActionScript 代码和MXML文件

为了更好的分离ActionScript 代码和MXML文件，您可以将函数放置到独立的AS文件中，然后将AS文件导入MXML文件，如例子所示：

<mx:Script source="myFunctions.as" />

更多的信息请参考：

Use an Event Listener in Getting Started with Flex 2
Using Events in Flex 2 Developer’s Guide
Using ActionScript in Flex 2 Developer’s Guide

Adding rich visual interactivity with behaviors and transitions

Flex应用是引擎驱动的，这意味着您可以使用事件添加丰富的视觉交互效果到运行时的应用。使用事件触发器来引起效果。效果的组合就是行为（behaviors）。

前面的那个例子，控制板组件因其可视属性被设置为false而关闭。可以通过使用行为（behaviors）使“关闭”更加引人注目。

这个例子中，您创建一个效果然后将其绑定到组件的消失效果（hideEffect）属性（触发器），就构成一个行为（behavior）：

<mx:Fade id="myFade"/>
 
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" hideEffect="{myFade}"
 >

当按钮被点击，控制板就渐渐的关闭，而不是简单消失。

触发器和效果还能组合为更复杂的行为（behaviors）——过渡（transitions）。