Building and Deploying Flex 2 Applications > Building and Deploying Overview > Improving Startup Performance > Using ordered creation > Dynamically adding containers to the queue

Dynamically adding containers to the queue

You can dynamically add containers to the instantiation queue by using the Application class's addToCreationQueue() method. The addToCreationQueue() method has the following signature:

function addToCreationQueue(id:Object, preferredIndex:int, callbackFunction:Function, parent:IFlexDisplayObject):void

The following table describes the addToCreationQueue() method's arguments:

Only use the addToCreationQueue() method to add containers to the queue whose creationPolicy property is set to none. Containers whose creationPolicy property is set to auto or all will probably created their children during the application initialization. Containers whose creationPolicy property is set to queued are already in the queue.

After it is added to the queue, the container that is to be created with the addToCreationQueue() method then competes with containers whose creationPolicy is set to queued, depending on their position in the queue. Flex creates containers whose preferredIndex property is lowest.

The following example uses the addToCreationQueue() method to create the children of the HBox containers when the user clicks the Create Later button. The calls to the addToCreationQueue() method specify a preferredIndex for each box, which causes the boxes and their children to be created in a different order from the order in which they are defined in the application's source code (in this example, box1, box3, box2, and then box4).

<?xml version="1.0"?>
<!-- layoutPerformance/AddToCreationQueueExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        public function doCreate():void {
             addToCreationQueue('box1', 0);
             addToCreationQueue('box2', 2);
             addToCreationQueue('box3', 1);
             addToCreationQueue('box4', 3);
        }
    ]]></mx:Script>

    <mx:HBox backgroundColor="#CCCCFF" horizontalAlign="center">
        <mx:Label text="addToCreationQueue()" fontWeight="bold"/>
    </mx:HBox>

    <mx:Form>
        <mx:FormItem label="first:">
            <mx:HBox id="box1" creationPolicy="none" width="200" height="50" 
                    borderStyle="solid" backgroundColor="#CCCCFF">
                <mx:Button label="Button 1"/>
                <mx:Button label="Button 2"/>
            </mx:HBox>
        </mx:FormItem>
        <mx:FormItem label="fourth:">
            <mx:HBox id="box2" creationPolicy="none" width="200" height="50"
                    borderStyle="solid" backgroundColor="#CCCCFF">
                <mx:Button label="Button 3"/>
                <mx:Button label="Button 4"/>
            </mx:HBox>
        </mx:FormItem>
        <mx:FormItem label="second:">
            <mx:HBox id="box3" creationPolicy="none" width="200" height="50"
                    borderStyle="solid" backgroundColor="#CCCCFF">
                <mx:Button label="Button 5"/>
                <mx:Button label="Button 6"/>
            </mx:HBox>
        </mx:FormItem>
        <mx:FormItem label="third:">
            <mx:HBox id="box4" creationPolicy="none" width="200" height="50"
                    borderStyle="solid" backgroundColor="#CCCCFF">
                <mx:Button label="Button 7"/>
                <mx:Button label="Button 8"/>
            </mx:HBox>
        </mx:FormItem>
    </mx:Form>
    <mx:Button label="Create Later" click="doCreate();"/>
</mx:Application>

In some cases, the addToCreationQueue() method does not act as you might expect. The reason is that if the instantiation queue is empty, the first container to be put in that queue triggers the creation process of its children. Other containers might subsequently be added to the queue, but the instantiation of the first container added has already been triggered, regardless of the value of its preferredIndex property. The result is that an item might not have the lowest preferredIndex value, but because no other containers are in the queue, Flex begins creating that container. Flex cannot stop instantiating the first container once it starts.

In the following example, although the redBox container has the highest preferredIndex, Flex creates its children first because the queue was empty when Flex encountered this line in the code. By the time redBox is complete, the other containers will be in the queue, and Flex proceeds with the next lowest item in the queue; in this case, the whiteBox container, followed by blueBox and, finally, greenBox.

function doCreate():void {
     addToCreationQueue('redBox', 4);
     addToCreationQueue('blueBox', 2);
     addToCreationQueue('whiteBox', 1);
     addToCreationQueue('greenBox', 3);
}

Flex 2.01

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/layoutperformance_119_12.html

Add Comment