MXML和ActionScript关联

一个Flex应用程序有ActionScript和MXML两种语言代码组成。

MXML

MXML是一个XML语言，你可以使用它来为Adobe Flex 应用程序布局用户界面。也可以使用MXML来定义程序的非可视组件，比如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。
比如，你可以使用如下的MXML语言，通过<mx:Button>标签创建一个按钮控件实例：

 

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

 

 

ActionScript

MXML标签对应ActionScript类或类道具。当你编译Flex程序，Flex分析MXML标签并生成对应的ActionScript类。然后编译器把这些ActionScript类编译成存储在SWF文件中的SWF字节码。上面的例子，Flex提供了定义Flex按钮控件的ActionScript 按钮类。

下面的例子示范了如何使用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代码来布局组件的时间的。