`
balan
  • 浏览: 68077 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

事件和行为的用法——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)。

更多的信息请参考:

  • Use Behaviors in Getting Started with Flex 2
  • Using Behaviors in Flex 2 Developer’s Guide
2
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics