我为什么要使用MXML？

Question

如果一切都可以在MXML中完成可以也可以在ActionScript中完成,并且在ActionScript(循环,条件等)中更容易实现许多事情,为什么要花时间学习MXML？

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

Answer 1

这取决于您的应用程序的需求,但我通常将我的设计分解为可视化块并使用自定义MXML组件来使用基于mxml的自定义组件来布局应用程序的主要区域和组件(数据面板,对话框等).然后我将使用自定义动作脚本组件来增强它,我需要比内置布局组件提供更多的视觉灵活性.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>

在动作中:

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

七行代码与62.这是一个非常简单的示例,但希望您可以通过在MXML中布置应用程序的许多部分来了解如何获益,无论您是否在Flex Builder中使用设计模式.

但我建议的一件事就是尽可能地将动作脚本从mxml文件中保留下来.将MXML视为您的视图,并将任何繁重的功能分离到其他类中.然后,您可以在MXML组件中的控件可以绑定到的类中提供公共属性.MXML是一种布局语言,根据我的经验,它最终会在有意义的地方使用它并在需要更重的提升时放入动作脚本.

Answer 2

在我看来，使用 mxml 和可视化设计器设计 UI 元素比使用代码容易得多，而且更不容易出错。

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