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 编译器处于您的路径中, 使您不管当前处于哪个文件夹中, 都可以从命令行调用它。

说明

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 中打开它。

<!-- Getting Started MXML SWF -->

若要查看全部源代码, 请右键单击 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 文件:

<script type="text/javascript"> // &lt;![CDATA[ var props = new Object(); props.swf = &quot;http://www.adobe.com/FLEX_Directory/quickstart/coding_with_mxml_and_actionscript/swfs/GettingStartedActionScript.swf&quot;; props.id = &quot;GettingStarted&quot;; props.w = &quot;300&quot;; props.h = &quot;80&quot;; props.ver = &quot;9&quot;; props.wmode= &quot;window&quot;; props.menu=&quot;true&quot;; var swfo = new SWFObject( props ); registerSWFObject( swfo, &quot;GettingStarted&quot; ); // ]]&gt; </script>

<!-- <script type="text/javascript"> // <![CDATA[ embedSample("GettingStartedActionScript", "300", "80" , "9.0.0"); // ]]> </script> -->

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