5

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

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

4

4 回答 4

14

It depends on your application's needs, but I generally break my design into visual chunks and use custom MXML components to lay out the main areas and components of my application (data panels, dialog boxes, etc) using mxml based custom components. Then I'll augment that with custom actionscript components where I need more visual flexibilty than the built in layout components provide. MXML is handy because it makes it extremely easy to get components on the stage and set their various properties and style settings.

Take this example of two identical login panels:

In 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>

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

Seven lines of code vs 62. That's a pretty simple example, but hopefully you can see how you might benefit by laying out many portions of your application in MXML, whether you're using the design mode in Flex Builder or not.

One thing I do recommend however is keep actionscript out of your mxml files as much as possible. Treat MXML as your view and separate any heavy functionality into other classes. You can then provide public properties in those classes that the controls in your MXML components can bind to. MXML is a layout language and in my experience it pays in the end to use it where it makes sense and drop into actionscript whenever heavier lifting is required.

于 2009-02-06T22:49:49.657 回答
0

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

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

于 2008-11-04T13:55:14.890 回答
0

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

如果您不使用具有设计视图的工具(例如 FlexBuilder),那么它的用处可能会降低。请记住,尽管 Flex4 将引入新的 Thermo 东西,其中包括使用 MXML 符号创建矢量图形的能力,并将允许使用 MXML 来为 Flex 组件设置皮肤。到时候它很可能会自成一体。如果您已经了解了 MXML,那么您将在这一点上获得优势。

于 2008-11-04T13:58:44.150 回答
0

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

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

于 2008-11-05T02:42:01.317 回答