如何将MXML组件添加到ActionScript应用程序？

Question

我正在构建一个ActionScript 3项目，并且发现在MXML中编写一些组件可以简化操作。

好像我需要扩展Flex Application类才能做到这一点。 如果这是对的，我该怎么做？

目前我的Main对象扩展了Sprite。 然后使用addChild()将其他Sprite添加到其中，我想在其中一个中使用Flex组件。 当然有一种方法可以完全用MXML重写我的应用程序吗？

Answer 1

编辑在评论中发表我的解释主要是关于过渡到Spark应用程序，同样的想法适用于MX应用程序，除了MX你可以坚持使用addChild，一般来说你需要实现IUIComponent来使用容器看到文档：

注意：虽然方法的子参数指定为DisplayObject类型，但参数必须实现IUIComponent接口才能添加为容器的子级。 所有Flex组件都实现此接口。

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/Container.html#addChild （） 结束编辑

您可以将基类切换到Application而不是Sprite，但是当向Flex 4应用程序添加元素时，它希望它们实现IVisualElement。 一般来说，您可以将addChild调用切换为addElement，并且您必须更改当前扩展Sprite / MovieClip / DisplayObject的其他类以扩展类似于Group的内容，以便它们实现Flex Application与其一起使用的必要接口（通常它期望更多的东西比较低级别的Flash对象提供的东西，因为它具有LayoutManager，PopUpManager，组件生命周期等）。 这里的问题是你会给你的组件增加一些重量，如果这是针对网络或桌面我不会太在意，但这会影响移动设备的性能，显而易见。

不幸的是，它不是一个交钥匙类型的解决方案，它需要对代码进行一些手动修改，因为你必须根据它的功能调整每个对象的更改，有时候Group是正确的方式去你可能得到的其他时间从其他容器或控件中获得更多好处。 在某些情况下，您可能希望坚持使用当前的较低级别扩展（例如扩展Sprite）并自己实现IVisualElement。

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/Container.html#addElement （）

如果您想批量切换到为您的应用程序使用MXML文件，您还可以创建一个基本的MXML应用程序文件，并让它包含一个带有您现有代码的脚本块（修改后的构造函数代码将转移到创建完成中）。 或者你可以有一个扩展应用程序的基础.as文件，然后使用它作为MXML的基类，我将把一些例子放在一起。

示例1一个非常基本的MXML应用程序文件

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>
</s:Application>

示例2 AS3类扩展应用程序和扩展它的MXML类

[Main.mxml]

<?xml version="1.0" encoding="utf-8"?>
<MyBaseApp
           xmlns="*"
           xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:Button id="btnControl"/>
</MyBaseApp>

[MyBaseApp.as]

package
{
    import mx.events.FlexEvent;

    import spark.components.Application;
    import spark.components.Button;

    public class MyBaseApp extends Application
    {
        public var btnControl:Button;
        public function MyBaseApp()
        {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
        }
        private function creationCompleteHandler(event:FlexEvent):void
        {
            btnControl.label = "something I set in AS3";
        }
    }
}