Flex快速上手：入门指南

 

目录

• 用MXML和ActionScript 编程
• 创建第一个程序
• 处理事件
• 定位和布局Flex组件
• 嵌入程序资源

用MXML和ActionScript编程

Adobe?把Flex作为一个ActionScript类库实现。这个类库包含组件（容器和控件）、管理类、数据服务类、以及所有其他特性的类。你通过带有类库的MXML 和 ActionScript来开发应用程序。

MXML

MXML是一个XML语言，你可以使用它来为Adobe? Flex?应用程序布局用户界面。也可以使用MXML来定义程序的非可视组件，比如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。

比如，你可以使用如下的MXML语言，通过<mx:Button> 标签创建一个按钮控件实例：

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

 

你可以设置id属性给些按钮实例一个唯一的名字，随后你可以通过id属性引用这个实例。label属性设定在按钮实例上显示的文本。

下面的例子展示了创建一个显示按钮控件的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.0bin 之下。

提示: 确保 Flex 2安装文件夹Flex SDK 2.0bin 在你系统路径中。如果Flex编译器存在于你的系统路径，你可以通过命令行调用它，不管你的当前目录在哪。

操作规程

   1. 用常用的文本编辑器新建一个文件 (比如, 记事本)并保存为 MyFirst.mxml。
   2. 把前面的例子输入MyFirst.mxml，保存文件。
   3. 选择 开始>所有程序>附件>命令提示符 打开命令行窗口。
   4. 切换到包含步骤1中创建的Flex 程序的文件夹。
   5. 键入以下命令调用Flex编译器：
      mxmlc --strict=true --file-specs MyFirst.mxml

      命令中以两个短划线开头的两个元素就是编译器选项，用来定义Flex编译器的行为。在前例中，设定 --strict 选项为true 强制编译器为精确模式。在精确模式中，编译器高度期望你的代码。比如，它认为你静态键入变量。使用--file-specs 选项指定编译的MXML文件。
   6. 你可以在IE浏览器中双击打开编译产生的SWF文件，或在命令行键入文件名用独立的Adobe Flash Player 9播放器打开。




提示: 你也可以使用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文件，在mxmlc 命令中加入 --keep-generated-actionscript 选项。

继续上面的例子，Flex提供了定义Flex按钮控件的ActionScript 按钮类。

注意: 前例中，<mx:Button> 标签里的mx前缀是名字空间。它通过使用程序标签中唯一的URL指定。mx前缀把mx名字空间里每一个组件映射到它的全限定类名上。这就是Flex编译器如何在mx名字空间中找到ActionScript类对应的MXML标签的。

下面的例子示范了如何使用ActionScript创建按钮控件。结果和使用MXML的一样。 

<?xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/GettingStartedActionScript/index.html"

    creationComplete="creationCompleteHandler();"
    width="300" height="80"
>
        [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;
            }

        ]]>
   

 
当通过ActionScript创建Flex组件时，必须导入组件的类。也必须使用addChild()程序把组件加入到程序的DisplayList中使其可见。通过比较此例与相同MXML版本的长度与复杂度， 你可以看到简单、基于标签、声明式语法的MXML语言是如何节省你编写多行ActionScript代码来布局组件的时间的。


注意: 此例示范了带Script标签的内嵌ActionScript的用法，它是在你Flex程序中引入ActionScript的一个可能方法。其他方法有把Script模块分离到外部ActionScript文件中或使用ActionScript类。

更多信息...

有关MXML和ActionScript更多信息，请参见Flex 2 开发指南 的"Developing applications in MXML," "MXML Syntax,"和"Using ActionScript" 章节。

关于作者

Aral Balkan喜欢表演和唱歌，他领导开发团队，设计用户体验， 是富互联网应用的体系结构设计师，并且运行OSFlash.org 网站,伦敦Macromedia用户组，还有他的公司 Ariaware。 他喜欢谈论设计模式并在书和报纸上发表。他也是Arp的作者， Flash平台上的开源RIA架构。 Aral十分固执，有活力和充满热情。他喜欢笑，甚至能边嚼口香糖边走路。

 

 

=====俺们就这样分了======

翻译原文：http://www.yeeyan.com/articles/view/888888/4086  

译者: cccccc   01/16/2008  原文