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

问题描述

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

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

我已阅读使用 Flex 创建组件并强制分离关注点 和 使用隐藏代码构建组件.

应用程序是否总是必须在主 MXML 上启动?我不能从 ActionScript 类实例化第一个视图吗?

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

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

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

我正在尝试在我的 MXML 文件上编写零代码以保持视图与代码分离.这在 Flex 中可行吗?

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

推荐答案

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

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:

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:

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/代码+隐藏

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屋！