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元素交换进出。

Answer 3

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

如果您不使用具有设计视图的FlexBuilder等工具，那么它可能不太有用。请记住，Flex4将引入新的Thermo功能，包括使用MXML表示法创建矢量图形的功能，并允许MXML用于为Flex组件设置外观。它可能会成为它自己的。如果你已经学会了解MXML的方法，那么你将获得优势。

Answer 4

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

如果您要求使用MXML而不是使用FLA文件，那么这是一个非常不同的问题 - 它相当于“我为什么要使用Flex Framework？”

我为什么要使用MXML？

4 个答案: