在 Flex 4 中动态加载组件

Question

我有一个应用程序，我在 TabNavigator 中动态创建选项卡。正如您所看到的，根据我的代码，我基本上有 5 个具有特定名称的选项卡。现在我还有 5 个与选项卡同名的 mxml 组件（即 mxml 组件的名称与选项卡相同，即 Tab1、Tab2 等。非动态方式是使用 myTab1:Tab1 = new Tab1();myTab1:Tab2 = 新 Tab2);等等。因此，我将不得不为每个我不想要的选项卡执行此操作。 我想要做的是在循环遍历数组时在每个选项卡中加载 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[
                import mx.containers.VBox;
                import mx.controls.Label;
                import mx.events.FlexEvent;
                import spark.components.NavigatorContent;


                protected function tabNavigator_creationCompleteHandler(event:FlexEvent):void
                {

                    var superModules:Array =["Tab1","Tab2","Tab3","Tab4","Tab5"];
                    for each (var superModule in superModules)
                    {
                        var myNavigatorContent:NavigatorContent = new NavigatorContent();
                        myNavigatorContent.percentHeight = 100;
                        myNavigatorContent.percentWidth = 100;
                        myNavigatorContent.label = superModule;
                        myNavigatorContent.addChild(superModule as DisplayObject);
                                        tabNavigator.addChild(myNavigatorContent);

                    }   


                }

            ]]>
        </fx:Script>
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <mx:TabNavigator id="tabNavigator" width="100%" height="100%" creationComplete="tabNavigator_creationCompleteHandler(event)">
        </mx:TabNavigator>
    </s:Application>

  Can somebody help on achieving this. 
    Many thanks.

Answer 1

是的，你可以做到。请在下面找到我的解决方案。

<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[
        import mx.containers.VBox;
        import mx.controls.Label;
        import mx.core.IVisualElement;
        import mx.core.UIComponent;
        import mx.events.FlexEvent;

        import spark.components.NavigatorContent;

        /*The class "Tab1","Tab2" not compiled with the application 
        because the linker and the compiler do not add classes 
        that are not referenced in the code.

        Even though you’ll never use the _dummyVarToAddTabToAppCompilation1 
        variable it is necessary to use that line to instruct the compiler 
        to include Tab1,Tab2 in the compilation.*/

        private var _dummyVarToAddTabToAppCompilation1:Tab1;
        private var _dummyVarToAddTabToAppCompilation2:Tab2;

        protected function tabNavigator_creationCompleteHandler(event:FlexEvent):void
        {

            var superModules:Array =["Tab1","Tab2"];
            for each (var superModule in superModules)
            {
                var myNavigatorContent:NavigatorContent = new NavigatorContent();
                myNavigatorContent.percentHeight = 100;
                myNavigatorContent.percentWidth = 100;
                myNavigatorContent.label = superModule;
                // Convert class name to Class object.
                var cls:Class = getDefinitionByName(superModule) as Class;
                // Create a new instance of the class.
                var instance:UIComponent = new cls();
                myNavigatorContent.addElement(instance);
                tabNavigator.addChild(myNavigatorContent);
            }   
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:TabNavigator id="tabNavigator" width="100%" height="100%" creationComplete="tabNavigator_creationCompleteHandler(event)">
</mx:TabNavigator>