Question

我有一个应用程序，我在TabNavigator中动态创建选项卡。正如你可以看到我的代码我基本上有5个具有特定名称的选项卡。现在我还有5个mxml组件，其名称与选项卡相同（即mxml组件的名称与选项卡相同，即Tab1，Tab2等。非动态方式是使用myTab1：Tab1 = new Tab1（）; myTab1：Tab2 = new 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>

在Flex 4中动态加载组件

1 个答案: