jump to navigation

Optimize a Flex application using deferred instantiations June 19, 2010

Posted by Tournas Dimitrios in Flex.

Deferred instantiation is a common technique used to improve Flex application start-up time and to control when and how to instantiate child components within a container when the creationPolicy is set to none.Container class and its sub-classes Accordion, Box, Canvas, Form, FormItem, LayoutContainer, Panel, Tile, ViewStack allows users to defer creation of its child components and programmatically  (manualy) instantiate components to improve start-up time and performance. It provides two public methods — createComponentFromDescriptor and createComponentFromDescriptors, to control the creation process. This Note describes how to use the methods and the differences between them.

The two key methods of the mx.core.Container class that are used are createComponentFromDescriptor and createComponentFromDescriptors. As their names suggest, createComponentFromDescriptor takes a single ComponentDescriptor object and creates the object while createComponentsFromDescriptors takes an array of ComponentDescriptor objects and creates all children of the container. They both also take an additional boolean argument that allows recursively creating child(ren) of a child.

There are some key differences between how to use the two methods. The createComponentsFromDescriptors method is rather straightforward. It creates all childen of a container object and displays them. It has the same effect as setting creationPolicy to “all” other than a user controls when to create all the children.

However, createComponentFromDescriptor works differently. Besides the fact it only creates one child at a time, it also doesn’t add the newly created child object to the display list. Thus, the child object doesn’t show on the screen. You must explicitly call the container.validateNow method to display it.

The following links are a must read for this subject:

Below is an example:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:button label="create tab1" click="myaccordion.createComponentFromDescriptor(myaccordion.childDescriptors[0],true);myaccordion.validateNow()"></mx:button>
 <mx:button label="create tab2" click="myaccordion.createComponentFromDescriptor(myaccordion.childDescriptors[1],true);myaccordion.validateNow()"></mx:button>
 <mx:button label="create tab3" click="myaccordion.createComponentFromDescriptor(myaccordion.childDescriptors[2],true);myaccordion.validateNow()"></mx:button>
 <mx:button label="create all" click="myaccordion.createComponentsFromDescriptors(true)"></mx:button>
 <mx:accordion id="myaccordion" creationpolicy="none" creationcomplete="mx.controls.Alert.show('creationComplete')" height="300" width="300">
 <mx:vbox label="VBox 1">
 <mx:button label="click me1" id="b1" click="mx.controls.Alert.show('b1 clicked')"></mx:button>
 <mx:vbox label="VBox 2">
 <mx:button label="click me2" id="b2" click="mx.controls.Alert.show('b2 clicked')"></mx:button>
 <mx:vbox label="VBox 3">
 <mx:button label="click me3" click="mx.controls.Alert.show('b3 clicked')"></mx:button>


1. Adobe Flex 3 UI Components Lifecycle « Tournas Dimitrios - July 5, 2010

[…] Read this article : Optimize a Flex application using deferred instantiations […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s