Actionscript 3 我为什么要使用MXML？

如果可以在中完成的所有事情也可以在ActionScript中完成，并且许多事情在ActionScript中更容易完成（循环、条件等），那么为什么要花时间学习MXML呢

---

在这一点上，我有最好的理由是MXML的结构与UI组件的视觉层次结构很好地匹配，并且初始化UI的代码行减少了。另一方面，现实世界的UI通常是动态的，实现为简单的静态结构，然后根据运行时条件动态填充（在这种情况下，UI更新无论如何都在ActionScript中）。通过创建一些辅助方法，还可以减少对ActionScript的需求。

使用mxml和可视化设计器设计UI元素要比使用代码容易得多，而且我认为不太容易出错

---

即使UI动态变化，通常也意味着交换预定义的UI元素。

如果使用FlexBuilder，MXML对于布局应用程序非常有用，因为FlexBuilder可以在设计视图中读取/写入MXML。而且，通过MXML实现状态要容易得多

---

如果不使用具有设计视图的工具（如FlexBuilder），则该工具可能不太有用。请记住，Flex4将引入新的Thermo stuff，其中包括使用MXML表示法创建矢量图形的能力，并允许使用MXML对Flex组件进行蒙皮。到时候它很可能会自己出现。如果您已经学会了如何使用MXML，那么在这一点上您将具有优势。

您是说您将使用Flex框架，但选择是使用MXML还是在AS中动态工作？如果是这样，那么MXML的主要优势就是与设计接口集成。如果访问WYSIWYG接口对您没有价值，那么您可能会发现MXML和纯AS之间没有什么区别

---

如果你问的是使用MXML还是使用FLA文件，那么这是一个非常不同的问题——它相当于“我为什么要使用Flex框架？”

这取决于你的应用程序的需要，但我通常会将我的设计分成可视的部分，并使用自定义MXML组件来布置我的应用程序的主要区域和组件（数据面板、对话框等）使用基于mxml的自定义组件。然后，我将使用自定义actionscript组件来增强这一点，因为我需要比内置布局组件提供更多的视觉灵活性。mxml非常方便，因为它可以非常容易地在舞台上获取组件并设置其各种属性和样式设置

以两个相同的登录面板为例：

在MXML中：

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="290" height="148" title="Login">
    <mx:Label text="User name:" width="80" textAlign="right" y="8" x="8"/>
    <mx:Label text="Password:" width="80" textAlign="right" y="38" x="8"/>
    <mx:TextInput id="txtUsername" maxChars="20" y="8" x="90"/>
    <mx:TextInput id="txtPassword" displayAsPassword="true" y="38" x="90" maxChars="20"/>
    <mx:Button x="185" y="68" label="Login" id="btnLogin" click="doLogin()"/>
</mx:Panel>

7行代码vs 62。这是一个非常简单的示例，但希望您能看到，无论您是否使用Flex Builder中的设计模式，通过在MXML中布局应用程序的许多部分，您可能会受益匪浅

---

不过，我建议您尽可能不让actionscript出现在mxml文件中。将mxml视为您的视图，并将任何繁重的功能分离到其他类中。然后，您可以在这些类中提供公共属性，mxml组件中的控件可以绑定到这些类。mxml是一种布局语言，根据我的经验，它会为我带来好处最后，在有意义的地方使用它，并在需要更重的提升时使用actionscript。

我本想说的几乎是一样的，但你比我快。MXML的主要优点是1）简洁，2）标记和布局之间的结构等价性。

package
{
    import flash.events.MouseEvent;

    import mx.containers.Panel;
    import mx.controls.Button;
    import mx.controls.Label;
    import mx.controls.TextInput;

    public class MyLoginPanel extends Panel
    {

        private var _unLabel:Label;
        private var _passLabel:Label;
        private var _txtUsername:TextInput;
        private var _txtPassword:TextInput;
        private var _btnLogin:Button;

        public function MyLoginPanel()
        {
        }

        override protected function createChildren():void
        {
            super.createChildren();

            this.width = 290;
            this.height = 148;
            this.title = "Login";
            this.layout = "absolute";

            _unLabel = new Label();
            _unLabel.text = "User Name:";
            _unLabel.width = 80;
            _unLabel.setStyle("textAlign", "right");
            _unLabel.move(8, 8);
            this.addChild(_unLabel);

            _passLabel = new Label();
            _passLabel.text = "Password:";
            _passLabel.width = 80;
            _passLabel.setStyle("textAlign", "right");
            _passLabel.move(8, 38);
            this.addChild(_passLabel);

            _txtUsername = new TextInput();
            _txtUsername.move(90, 8);
            this.addChild(_txtUsername);

            _txtPassword = new TextInput();
            _txtPassword.move(90, 38);
            _txtPassword.displayAsPassword = true;
            this.addChild(_txtPassword);

            _btnLogin = new Button();
            _btnLogin.label = "Login";
            _btnLogin.move(185, 68);
            _btnLogin.addEventListener(MouseEvent.CLICK, doLogin);
            this.addChild(_btnLogin);
        }       
    }
}