如何將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";
        }
    }
}