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

这取决于您的应用程序的需求,但我通常将我的设计分解为可视化块并使用自定义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是一种布局语言,根据我的经验,它最终会在有意义的地方使用它并在需要更重的提升时放入动作脚本.