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

Flex 快速入门: 入门

目录

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

---

使用 MXML 和 ActionScript 进行编码

Adobe® 将 Flex 实施为 ActionScript 类库。 该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。 您通过将 MXML 和 ActionScript 语言与该类库一起使用来开发应用程序。

MXML

MXML 是用于为 Adobe® Flex™ 应用程序进行用户界面组件布局的 XML 语言。 您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。

例如, 您通过使用下面的 MXML 语句, 使用 <mx:Button> 标签来创建 Button 控件的实例:

<mx:Button id="myButton" label="I'm a button!"/>

您设置 id 属性以赋予 Button 实例一个唯一的名称, 以后可以使用该名称引用到它。 label 属性设置在 Button 实例上显示的标签的文本。

下面的示例显示创建显示 Button 控件的 Flex 应用程序所需的完整代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    horizontalAlign="center" verticalAlign="center"
>

    <mx:Button id="myButton" label="I'm a button!" />
</mx:Application>

在编写 Flex 应用程序之后, 您必须使用 Flex 编译器来编译它。 Flex 编译器是称为 mxmlc 的一个很小的可执行文件, 处于 Flex 2 安装文件夹下的 Flex SDK 2.0\bin 文件夹中。

说明

1. 在您喜爱的文本编辑器 (如, 记事本) 中创建一个新文件并将它另存为 MyFirst.mxml。
2. 从前面的示例中将代码输入到 MyFirst.mxml 中并保存您的文件。
3. 通过选择“开始”>“所有程序”>“附件”>“命令提示符”, 打开命令窗口。
4. 将您的当前目录更改为包含您在步骤 1 中保存的 Flex 应用程序的文件夹。
5. 键入下面的命令来调用 Flex 编译器:
   mxmlc --strict=true --file-specs MyFirst.mxml
   
   

   以双短划线开头的命令字符串中的项目被称为编译器选项, 它们被用于定义 Flex 编译器的行为。 在前面的示例中, 您将 --strict 选项设置为 true 以强制编译器进入 Strict 模式。 在 Strict 模式下, 编译器对您的代码具有较高的期望。 例如, 它期望您以静态方式键入变量。 您使用 --file-specs 选项来指定被编译的 MXML 文件。

6. 在 Windows 资源管理器中双击 SWF 文件或在命令行中输入其名称, 在独立的 Adobe Flash Player 9 中打开它。

此示例会产生下列 SWF 文件:

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

ActionScript

MXML 标签与 ActionScript 类或类的属性相对应。 当您编译 Flex 应用程序时, Flex 会解析 MXML 标签并生成相应的 ActionScript 类。 接着它将这些 ActionScript 类编译成存储在 SWF 文件中的 SWF 字节码。

继续上面的例子, Flex 提供定义 Flex Button 控件的 ActionScript Button 类。

注意: 在前面的示例中, <mx:Button> 标签中的 mx 前缀是一个名称空间。 它是通过使用 Application 标签中的唯一 URL 声明的。 mx 前缀将 mx 名称空间中的每个组件映射到其完全合格的类名称。 这就是 Flex 编译器可以找到与 mx 名称空间中的 MXML 标签相对应的 ActionScript 类的方式。

下面的示例阐述如何通过使用 ActionScript 创建 Button 控件。 该结果与该 MXML 版本是相同的。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/GettingStartedActionScript/index.html"

    creationComplete="creationCompleteHandler();"
    width="300" height="80"
 >

    <mx:Script>

        <![CDATA[
            import mx.controls.Button;
            import mx.events.FlexEvent;

            private var myButton:Button;

            private function creationCompleteHandler():void

            {
                // Create a Button instance and set its label 
                myButton = new Button();
                myButton.label = "I'm a button!";
                
                // Get notified once button component has been created and processed for layout


                myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
                
                // Add the Button instance to the DisplayList
                addChild (myButton);
            } 
            
            private function buttonCreationCompleteHandler ( evt:FlexEvent ):void

            {
                // Center the button 
                myButton.x = parent.width/2 - myButton.width/2;
                myButton.y = parent.height/2 - myButton.height/2;
            }

        ]]>
    </mx:Script>
</mx:Application>

通过 ActionScript 创建 Flex 组件时, 必须导入组件的类。 您还必须通过使用 addChild() 方法使组件可见, 将组件添加到应用程序的 DisplayList 中。 通过将此示例的长度和复杂性与其等同的 MXML 版本相比较, 您可以看到 MXML 的简单的基于标签的声明性语法是如何使您免于编写许多 ActionScript 代码行来进行组件布局的。

此示例会产生下列 SWF 文件:

注意: 此示例阐述线上 ActionScript 与 Script 标签的使用, 这是在 Flex 应用程序中包含 ActionScript 的一个可能的方法。 其他方法有: 将脚本块分隔到外部 ActionScript 文件中, 或使用外部 ActionScript 类。

返回顶部

---

更多信息

有关 MXML 和 ActionScript 的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用 MXML 开发应用程序”、“MXML 语法”和“使用 ActionScript”这几章。

关于作者