Flex3快速入门（2）：使用 MXML 和 ActionScript 进行编码

使用 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 文件夹中。

提示: 确保 Flex 2 installation folder\Flex SDK 2.0\bin 文件夹处于您的系统的路径中。让 Flex 编译器处于您的路径中, 使您不管当前处于哪个文件夹中, 都可以从命令行调用它。

说明

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

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

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

提示: 您还可以使用 Adobe Flex Builder 2 创建和编译 Flex 应用程序, Adobe Flex Builder 2 是包含可视设计视图的用于 Flex 开发的集成开发环境 (IDE)。有关 Flex Builder 2 的详细信息, 请参阅使用 Flex Builder 2 。

ActionScript

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

提示: 若要查看 Flex 生成的中间 ActionScript 文件, 请将 --keep-generated-actionscript 选项添加到 mxmlc 命令中。

继续上面的例子, 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 类。

Flex3快速入门（2）： 使用 MXML 和 ActionScript 进行编码

使用 MXML 和 ActionScript 进行编码

MXML

说明

ActionScript

你可能感兴趣的:(JavaScript,应用服务器,Flex,Adobe,actionscript)

Flex3快速入门（2）：使用 MXML 和 ActionScript 进行编码