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 文件夹中。
提示: 确保 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 类。