You could increase the startup time and decrease performance of your applications if you create too many objects or put too many objects into a single view. To improve startup time, minimize the number of objects that are created when the application is first loaded. If a user-interface component is not initially visible at startup, avoid creating that component until you need it. This is called deferred creation. Containers that have multiple views, such as an Accordion container, provide built-in support for this behavior. You can use ActionScript to customize the creation order of multiple-view containers or defer the creation of other containers and controls.

After you improve the actual startup time of your application as much as possible, you can improve perceived startup time by ordering the creation of containers in the initial view. The default behavior of Flex is to create all containers and their children in the initial view, and then display everything at one time. The user will not be able to interact with the application or see meaningful data until all the containers and their children are created. In some cases, you can improve the user's initial experience by displaying the components in one container before creating the components in the next container. This process is called ordered creation.

The remaining sections of this topic describe how to use deferred creation to reduce overall application startup time and ordered creation to make the initial startup time appear as short as possible to the user. But before you can fully understand ordered creation and deferred creation, you must also understand the differences between single-view and multiple-view containers, the order of events in a component's startup life cycle, and how to manually instantiate controls from their child descriptors.

All Flex components trigger a number of events during their startup procedure. These events indicate when the component is first created, plotted internally, and drawn on the screen. The events also indicate when the component is finished being created and, in the case of containers, when its children are created.

Components are instantiated, added or linked to a parent, and then sized and laid out inside their container. The component creation order is as follows:

The following example shows the major events that are dispatched during a component's creation life cycle:

The creation order is different for containers and components because containers can be the parent of other components or containers. Components within the containers must also go through the creation order. If a container is the parent of another container, the inner container's children must also go through the creation order.

The following example shows the major events that are dispatched during a container's creation life cycle:

After all components are created and drawn, the Application object dispatches an applicationComplete event. This is the last event dispatched during an application startup.

The creation order of multiview containers (navigators) is different from standard containers. By default, all top-level views of the navigator are instantiated. However, Flex creates only the children of the initially visible view. When the user navigates to the other views of the navigator, Flex creates those views' children. For more information on the deferred creation of children of multiview containers, see Using deferred creation.

For a detailed description of the component creation life cycle, see Using container events.

By default, containers create only the controls that initially appear to the user. Flex creates the container's other descendants if the user navigates to them. Containers with a single view, such as Group, Box, Form, and Grid containers, create all of their descendants during the container's instantiation because these containers display all of their descendants immediately.

Containers with multiple views, called navigator containers, only create and display the descendants that are visible at any given time. These containers are the MX ViewStack, Accordion, and TabNavigator containers.

When navigator containers are created, they do not immediately create all of their descendants, but only those descendants that are initially visible. Flex defers the creation of descendants that are not initially visible until the user navigates to a view that contains them.

The result of this deferred creation is that an MXML application with navigator containers loads more quickly, but the user experiences brief pauses when he or she moves from one view to another when interacting with the application.

You can instruct each container to create their children or defer the creation of their children at application startup by using the container's creationPolicy property. This can improve the user experience after the application loads. For more information, see About the creationPolicy property.

You can also create individual components whose instantiation is deferred by using the createDeferredContent() method (for Spark containers) or the createComponentsFromDescriptors() method (for MX containers). For more information, see Creating deferred components.

When you set a container's creationPolicy property to none, components declared as MXML tags inside that container are not created.

For Spark containers, you use the createDeferredContent() method to manually instantiate deferred components. This method is defined on the spark.components.SkinnableContainer class.

For MX containers, you use the createComponentsFromDescriptors() method to manually instantiate deferred components. This method is defined on the MX Container base class.

The callLater() method queues an operation to be performed for the next screen refresh, rather than in the current update. Without the callLater() method, you might try to access a property of a component that is not yet available. The callLater() method is most commonly used with the creationComplete event to ensure that a component has finished being created before Flex proceeds with a specified method call on that component.

All objects that inherit from the UIComponent class can open the callLater() method. It has the following signature:

 callLater(method:Function, args:Array):void

The method argument is the function to call on the object. The args argument is an optional Array of arguments that you can pass to that function.

The following example defers the invocation of the doSomething() method, but when it is opened, Flex passes the Event object and the "Product Description" String in an Array to that function:

 callLater(doSomething, [event, "Product Description"]); 
 ... 
 private function doSomething(event:Event, title:String):void { 
 	... 
 }

The following example uses a call to the callLater() method to ensure that new data is added to a DataGrid before Flex tries to put focus on the new row. Without the callLater() method, Flex might try to focus on a cell that does not exist and throw an error:

<?xml version="1.0"?> 
<!-- layoutperformance/CallLaterAddItem.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark" 
    initialize="initData()"> 
 
    <fx:Script><![CDATA[ 
        import mx.collections.*; 
        private var DGArray:Array = [ 
            {Artist:'Pavement', Album:'Charred Walls', Price:11.99}, 
            {Artist:'Pavement', Album:'Good For You', Price:11.99}]; 
            
        [Bindable] 
        public var initDG:ArrayCollection; 
        //Initialize initDG ArrayCollection variable from the Array. 
        
        public function initData():void { 
            initDG=new ArrayCollection(DGArray); 
        } 
        
        public function addNewItem():void { 
            var o:Object; 
            o = {Artist:'Pavement', Album:'Tradio', Price:11.99}; 
            initDG.addItem(o); 
            callLater(focusNewRow); 
        } 
 
        public function focusNewRow():void { 
            myGrid.editedItemPosition = { 
                columnIndex:0,rowIndex:myGrid.dataProvider.length-1 
            }; 
        } 
        
    ]]></fx:Script> 
 
    <s:VGroup> 
        <mx:DataGrid id="myGrid" width="350" height="200" dataProvider="{initDG}"  editable="true"> 
            <mx:columns> 
                <fx:Array> 
                    <mx:DataGridColumn dataField="Album" /> 
                    <mx:DataGridColumn dataField="Price" /> 
                </fx:Array> 
            </mx:columns> 
        </mx:DataGrid> 
 
        <s:Button id="b1" label="Add New Item" click="addNewItem()"/> 
    </s:VGroup> 
    
</s:Application>

Another use of the callLater() method is to create a recursive method. Because the function is called only after the next screen refresh (or frame), the callLater() method can be used to create animations or scroll text with methods that reference themselves.

The following example scrolls ticker symbols across the screen and lets users adjust the speed with an HSlider control:

<?xml version="1.0"?> 
<!-- layoutperformance/CallLaterTicker.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script><![CDATA[ 
    
        [Bindable] 
        public var text:String = "SLAR:95.5....TIBA:42....RTF:34.15....AST:23.42"; 
        [Bindable] 
        public var speed:Number = 5; 
 
        public function initTicker():void { 
            theText.move( this.width+10, 0 ); // Start the text on the right side. 
            callLater(moveText); 
        } 
 
        public function moveText():void { 
            var xpos:Number = theText.x; 
            if( xpos-speed+theText.width < 0 ) { 
                xpos = this.width+10; // Start the text on the right side. 
            } 
            xpos -= speed; 
            theText.move(xpos,0); 
            callLater(moveText); 
        } 
 
        public function changeSpeed():void { 
            speed = speedSelector.value; 
        } 
        
    ]]></fx:Script> 
 
    <s:Panel title="Ticker Sample" width="400" height="200"> 
        <s:VGroup> 
                <mx:Canvas creationComplete="initTicker()" 
                    horizontalScrollPolicy="off" backgroundColor="red" color="white" 
                    width="400"> 
                <mx:Label id="theText" text="{text}" y="0"/> 
            </mx:Canvas> 
            <mx:HBox> 
                <mx:Label text="Speed:"/> 
                <mx:HSlider minimum="1" maximum="10" value="{speed}" 
                    id="speedSelector" snapInterval="1" tickInterval="1" 
                    change="changeSpeed()"/> 
            </mx:HBox> 
        </s:VGroup> 
    </s:Panel> 
</s:Application>

Navigation

Using Flex » Testing and automation