Loading Components Dynamically in Flex 4

Question

I have an application whereby I am creating tabs in a TabNavigator dynamically. As you can see as per my codes I am basically having 5 tabs with specific names. Now I also have 5 mxml components with the same names as the tabs (that is the names of the mxml components are same as the tabs, that is Tab1,Tab2 etc. The non-dynamic way would be to use myTab1:Tab1 = new Tab1();myTab1:Tab2 = new Tab2); etc. Thus I will have to do this for each tab which I don't want. What I want to do is to load the mxml components in each tab while I am looping through the Array. Hope I am clear enough.

    <?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

Yes you can do it.Please find my solution below.

<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>