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

Question

我正在构建一个ActionScript 3项目，发现用MXML编写一些组件可以简化事情。

为了做到这一点，我似乎需要扩展Flex应用程序类。如果是这样的话，我该怎么做？

目前，我的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应用程序与它们一起工作所需的接口（通常，它期望比较低级别的Flash对象提供更多的东西，因为它具有LayoutManager、PopUpManager、组件生命周期等）如果这是针对网络或桌面的，我不会太担心，但这会显著影响移动设备的性能。

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

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

如果你想为你的应用程序大规模切换到使用MXML文件，你也可以创建一个基本的MXML应用程序文件，并让它包含一个包含现有代码的脚本块（修改后，构造函数代码就可以完成创建了）。或者，您可以有一个扩展应用程序的base.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>

示例2AS3类扩展应用程序和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";
        }
    }
}