1. 主页
2. 开发人员中心
3. Flex 开发人员中心
4. Flex 快速入门

Flex 快速入门: 入门

目录

• 使用 MXML 和 ActionScript 进行编码
• 创建您的第一个应用程序
• 处理事件
• Flex 组件的定位和布局
• 嵌入应用程序资源

---

处理事件

Adobe® Flex™ 应用程序是事件驱动的。事件让程序员知道用户何时与界面组件交互, 以及在组件的外观或生命周期中何时发生重要的变化, 如组件的创建或破坏或调整其大小。

当组件的实例发出某个事件时, 会通知您注册为该事件的监听器的对象。您在 ActionScript 中定义事件监听器 (也称为事件处理程序) 来处理事件。您在组件的 MXML 声明中或者在 ActionScript 中注册事件的事件监听器。

接收事件通知有三种方式:

• 在 MXML 中注册事件处理程序
• 在 MXML 定义中创建线上事件处理程序
• 通过 ActionScript 注册事件监听器

在 MXML 中注册事件处理程序

获得事件通知的第一个和使用最广泛的方法是在 MXML 中定义事件发生时会调用的事件处理程序。

在此示例中, 您为 Button 控件的 click 事件定义一个事件处理程序。用户单击 Button 控件时, 事件处理程序会将 Label 控件的 text 属性设置为“Hello, World!”。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="300" height="200"
    horizontalAlign="center" verticalAlign="middle" 
    viewSourceURL="src/HandlingEventsEventHandler/index.html"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
        
            private function clickHandler ( event:MouseEvent ):void
            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

    
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" 
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="clickHandler(event);" />

    </mx:Panel>
</mx:Application>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

返回顶部

在 MXML 定义中创建线上事件处理程序

有时, 对事件作出响应最容易的方法是在组件的 MXML 定义中完全地定义事件处理程序。 这也称为使用线上事件处理程序。

在下面的示例中, 您设置 <mx:Button> 标签的 click 属性, 这样它会直接设置 Label 控件的 text 属性, 而不会调用事件处理程序方法。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HandlingEventsInlineMethod/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"

>
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" />

    </mx:Panel>
</mx:Application>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

返回顶部

通过 ActionScript 注册事件监听器

您还可以通过使用 ActionScript, 通过注册事件处理程序来对事件作出响应。

在此示例中, 您通过使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。 您将 addEventHandler() 方法置于 Application 容器的 creationComplete 事件的事件处理程序中。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/HandlingEventsActionScript/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"
    creationComplete="creationCompleteHandler(event);"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.events.FlexEvent;

            private function creationCompleteHandler(event:FlexEvent):void

            {
                // Listen for the click event on the Button control
                myButton.addEventListener (MouseEvent.CLICK, clickHandler);
            }
        
            private function clickHandler ( event:Event ):void

            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

    
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" />

    </mx:Panel>
</mx:Application>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

返回顶部

---

更多信息

有关处理事件的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用事件”。

关于作者