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

此示例会产生下列 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 文件:

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

转载请注明：夜阑小雨 » 使用 MXML 和 ActionScript 进行编码