Flex:如何使代码远离MXML

Question

您能否推荐有关设计Flex应用程序的文章,书籍和最佳实践？(AIR和Web).

我已经阅读了创建组件并使用后面的代码强制分离Flex和构建组件的问题.

应用程序是否始终必须从主MXML开始？我不能从ActionScript类中实例化第一个视图吗？

如何为第一个MXML添加处理程序并为其提供流控制？

我正在尝试在我的MXML文件上编写零代码,以使视图与代码分离.这在Flex中是否可行？

Answer 1

我参与了一些使用代码隐藏模式的项目,这些模式满足了您的许多要求.简而言之,您通过创建ActionScript基类(MyClassCode.as),然后创建一个继承自您的代码隐藏类(MyClass.mxml)的MXML文件,将代码与MXML隔离开来.一个缺点是MXML文件中的任何UI元素都需要在代码隐藏类中第二次声明,否则我发现这是一种将代码与UI分离的非常有效的方法.这是一个示例和一些链接以获取更多信息:

MyClassCode.as:

package mypackage
{
    import flash.events.MouseEvent;

    import mx.events.FlexEvent;

    import spark.components.Button;
    import spark.components.Group;

    public class MyClassCode extends Group
    {
        public var myButton:Button;

        public function MyClassCode()
        {
            super();
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
        }

        private function onCreationComplete(e:FlexEvent):void {
            this.removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
            myButton.addEventListener(MouseEvent.CLICK, onClick);
        }

        private function onClick(e:MouseEvent):void {
            // Do something
        }
    }
}

MyClass.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mypackage:MyClassCode xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       xmlns:mypackage="mypackage.*">
    <s:Button id="myButton"/>
</mypackage:MyClassCode>

一些链接:

http://learn.adobe.com/wiki/display/Flex/Code+Behind

http://ted.onflash.org/2007/02/code-behind-in-flex-2.php

http://blog.vivisectingmedia.com/2008/04/the-flex-code-behind-pattern/