Flex application optimization

Here are some good basic steps!

Event Bubbling!

Excerpts from the LiveDocs!


When events are triggered, there are three phases in which Flex checks whether there are event listeners. These phases occur in the following order:

* Capturing Phase - Check for listeners "starting from the root until the immediate parent container" in the displayList[by default a) this phase is disabled unless you pass useCapture = true while adding the event listener b) Only a DisplayObject can participate in this phase]

* Targeting - trigger the event listeners of the "target object" - the event originating object.

* Bubbling - Check for listeners "starting from the immediate parent to the root"

During each of these phases, the nodes have a chance to react to the event. For example, assume the user clicks a Button control that is inside a VBox container.



During the capturing phase, Flex checks the Application object and the VBox for listeners to handle the event. Flex then triggers the Button's listeners in the target phase, no other nodes on the display list are examined for event listeners. [The values of the currentTarget and the target properties on the Event object during the targeting phase are the same.]. In the bubbling phase, the VBox and then the Application are again given a chance to handle the event but now in the reverse order from the order in which they were checked in the capturing phase.

- Event object moves from node to node in the display list,

- Only DisplayObject objects (visual objects such as containers and controls) can have a capturing phase and a bubbling phase in addition to the targeting phase.

- Any event can be captured, but no DisplayObject objects listen during the capturing phase unless you explicitly instruct them to do so.In other words, capturing is disabled by default.

- When a faceless event dispatcher, such as a Validator, dispatches an event, there is only a targeting phase, because there is no visual display list for the Event object to capture or bubble through.

Associative Array, Dictionary and Object!

Sourced from Adobe Livedocs:

An associative array, sometimes called a hash or map, uses keys instead of a numeric index to organize stored values. Each key in an associative array is a unique string that is used to access a stored value.

Unlike other classes, the Object class is dynamic - meaning arbitrary properties can be added to serve as keys.


The following example creates an associative array named monitorInfo, using an object literal to initialize the array with two key and value pairs:

var monitorInfo:Object = {type:"Flat Panel", resolution:"1600 x 1200"};
trace(monitorInfo["type"], monitorInfo["resolution"]);
// output: Flat Panel 1600 x 1200

If you do not need to initialize the array at declaration time, you can use the Object constructor to create the array, as follows:

var monitorInfo:Object = new Object();

monitorInfo["aspect ratio"] = "16:10"; // bad form, do not use spaces
monitorInfo.colors = "16.7 million";
trace(monitorInfo["aspect ratio"], monitorInfo.colors);
// output: 16:10 16.7 million

The Dictionary class lets you create a dynamic collection of properties, which uses strict equality (===) for key comparison.

var dict:Dictionary = new Dictionary();
dict[key] == "Letters";

Iterating with object keys

You can iterate through the contents of a Dictionary object with either a for..in loop or a for each..in loop. A for..in loop allows you to iterate based on the keys, whereas a for each..in loop allows you to iterate based on the values associated with each key.

for (var key:Object in groupMap)
{
trace(key, groupMap[key]);
}
/* output:
[object Sprite] [object Object]
[object Sprite] [object Object]
[object Sprite] [object Object]
*/

for each (var item:Object in groupMap)
{
trace(item);
}
/* output:
[object Object]
[object Object]
[object Object]
*/