Flex：如何使代码远离MXML [英] Flex: How to keep code away from MXML

问题描述

您可以在设计Flex应用程序时推荐文章，书籍和最佳做法吗？ （AIR和Web）。

我已阅读使用Flex创建组件和强制分离关注点和使用代码构建组件后面。

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

如何在第一个MXML中添加一个处理程序并给它流控制？

我试图在我的MXML文件上写入零代码，以使视图与代码脱钩。这是可能在Flex中吗？

解决方案

我曾经使用过几个使用代码隐藏模式的项目，很多你的要求。简而言之，通过创建一个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）; 
} 
 
私有函数onCreationComplete（e：FlexEvent）：void {
 this.removeEventListener（FlexEvent.CREATION_COMPLETE，onCreationComplete）; 
 myButton.addEventListener（MouseEvent.CLICK，onClick）; 
} 
 
私有功能onClick（e：MouseEvent）：void {
 //做某事
} 
} 
} 
  

MyClass.mxml：

 <？xml version =1.0encoding =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 /

Can you recommend articles,books and best practices on designing Flex applications? (both AIR and web).

I've read Creating components and enforcing separation of concerns with Flex and Building components by using code behind.

Does the application always have to start on the Main MXML? Can't I instantiate the first view from an ActionScript class?

How would you add a handler to the first MXML and give the flow control to it?

I'm trying to write zero code on my MXML files to keep the view decoupled from code. Is this possible in Flex?

解决方案

I've worked on a few projects that have used the code-behind pattern, which meets many of your requirements. In a nutshell you isolate the code from the MXML by creating an ActionScript base class (MyClassCode.as) and then creating an MXML file that inherits from your code-behind class (MyClass.mxml). One drawback is that any UI elements in the MXML file need to be declared a second time in your code-behind class, otherwise I've found this to be a very effective method of separating code from UI. Here's an example and some links for more info:

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>

Some links:

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/

这篇关于Flex：如何使代码远离MXML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！