actionscript-3 - 为什么要使用 MXML？

Question

如果在 MXML 中可以完成的所有事情也可以在 ActionScript 中完成，而且很多事情在 ActionScript 中更容易完成(循环、条件等) 为什么要花时间学习 MXML？

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

Answer 1

这取决于您的应用程序的需求，但我通常将我的设计分解为可视 block ，并使用自定义 MXML 组件来布置我的应用程序的主要区域和组件(数据面板、对话框等)，使用基于 mxml 的自定义组件。然后，我将使用自定义 actionscript 组件来增强它，在这些组件中，我需要比内置布局组件提供的更多视觉灵 active 。 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>

在 ActionScript 中:

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);
        }       
    }
}

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

然而，我推荐的一件事是尽可能将 actionscript 排除在您的 mxml 文件之外。将 MXML 视为您的 View ，并将任何繁重的功能分离到其他类中。然后，您可以在 MXML 组件中的控件可以绑定(bind)到的那些类中提供公共(public)属性。 MXML 是一种布局语言，根据我的经验，最终在有意义的地方使用它是值得的，并在需要更重的提升时放入 actionscript。