Flex/Air/AS3 Selecting and Populating a unFocused tab.

Question

I'm having a problem displaying data from a function to text box within a tab. If you run the code and click "Select Tab 2 and Fill..." I get an error; "TypeError: Error #1009: Cannot access a property or method of a null object reference." I'm guessing this is because "Tab 2" is/was not rendered yet. Now if I run the code, select "Tab 2" then select "Tab 1" and click "Select Tab 2 and Fill..." it works the way I would like. Dose any one know a way around this problem.

----Full Flex 4/Flash Builder Code just copy paste----

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/halo"
                       creationComplete=" ">    
    <fx:Script>
        <![CDATA[           
            public function showtab2():void
            {
                mytextbox.text="I made it!";
                tn.selectedIndex=1;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Panel title="TabNavigator Container Example" height="90%" width="90%" 
              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue"
                  text="Select the tabs to change the panel."/>

        <mx:TabNavigator id="tn"  width="100%" height="100%">
            <!-- Define each panel using a VBox container. -->

            <mx:VBox label="Panel 1">
                <mx:Label text="TabNavigator container panel 1"/>
                <mx:Button label="Select Tab 2 and Fill with Text" click="showtab2()"/>
            </mx:VBox>

            <mx:VBox label="Panel 2">
                <mx:Label text="TabNavigator container panel 2"/>
                <s:TextInput id="mytextbox" />
            </mx:VBox>

        </mx:TabNavigator>

        <mx:HBox>
        </mx:HBox>

    </mx:Panel>

</s:WindowedApplication>

Answer 1

You can change the render-behavior of a tabnavigator (or any other multiple-views-container) with the creationPolicy-property.

Default value of this property is 'auto' (only create when needed), but you can set it to 'all' to create every child inside the tabnavigator at the start.

Beware that this may result in a performance problem. More on this can be found at: http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html