Flex Gotchas

1) Construtors cannot be private / protected / internal - They can only be public - use of public keyword is optional.

2) Making synchronous HttpService, RemoteService or WebService calls in Flex:

      a) Create a javascript function which makes use of xmlHTTPRequest object

             xmlHttpRequest.open("GET","http://serverName/URL",true); //true = sync, false = async

      b) Make the javascript function call which will invoke  this javascript function from within Flex using ExternalInterface class

               ExternalInterfac.call(javaScriptFunctionDefinitionStringWhichMakesTheXmlHTTPRequestCall); 

3) When should you use state change[ and transition] vs when should you replace the UI

You use state change when you have to just add or remove a few components in the view and controls pretty much remain the same.

You replace the UI when you have a completely new set of controls 

4) What happens when you removeChild() - parent reference is set to null

5)  When you set a specific height and width of a component, Flex does not call the measure() method, even if you explicitly call the invalidateSize() method. Flex calls the measure() method only if the explicitWidth property or the explicitHeight property of the component is NaN.

 

.

Flex Instantiation Lifecycle & Event Flow

The following steps show what occurs when you execute a sample ActionScript code to create the Button control, and add it to a Box container.:


                    container.addChild(component);

                    To Process the addChild call

1.     set parent reference
2.     compute style
3.     dispatch add from the component to let everyone know that its getting added
4.     dispatch childAdd from the container
5.     dispatch pre-initialize on component - internal children are about to be added through createChildren() call so developer's get a last chance to affect the component - implement the listener and affect the component's internal structure
6.     dispatch initialize on component - children get initialized through createChildren() call but layout n sizing of component is not determined yet - you do not have to override this if you are creating your own custom component
7.     Later render event gets triggered to display the application

   

1.                     determine the sizing n layout
2.                     set visible = true
3.                     creationComplete on component
4.                     updateComplete

When you create the component in MXML as shown above, Flex SDK generates folllowing equivalent code which is similar to following 3 steps in ActionScript:

1) You call the component's constructor, as the following code shows:

// Create a Button control. 
var button1:Button = new Button()

 2) You configure the component by setting its properties, as the following code show:

// Configure the button control.
button1.label = "Submit";

3) You call the addChild() method to add the component to its parent, as the following code shows:

// Add the Button control to the Box container.
box1.addChild(button1);

Flex performs the following actions to process the box1.addChild(button1) call:

4. Flex sets the parent property for the component to reference its parent container.

5. Flex computes the style settings for the component.

6. Flex dispatches the add event from the component, button1 to let the interested folks know that a component button1 got added to parent.

7. Flex dispatches the childAdd event from the parent container box1 to let the interested folks know that a box1 got a child added.

8. Flex dispatches the preinitialize event on the component, button1. 

The component is in a very raw state when this event is dispatched. Many components, such as the Button control, create internal child components to implement th functionality; for example, the Button control creates an internal UITextField component to represent its label text. 

At the time when Flex dispatches the preinitialize event, the children (including the internal children, of a component) have not yet been created. They get created in this call.

9. Flex creates and initializes the component's children, including the component's internal children.

10. Flex dispatches the initialize event on the component. At this time, all of the component's children have been initialized, but the component has not been fully processed. In particular, it has not been sized for layout.

11. Later, to display the application, a render event gets triggered, and Flex does the following:

1. Flex completes all processing required to display the component, including laying out the component.

2. Flex makes the component visible by setting the visible property to true.

3. Flex dispatches the creationComplete event on the component. The component has been sized and processed for layout and all properties are set. This event is dispatched only once when the component is created.

4. Flex dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the position, size, or other visual characteristic of the component changes and the component has been updated for display.

Spark Architecture Overview

Here's a very nice post on Spark Architecture

Here's another great piece on Spark
Flex 4's new MXML subset for skins, FGX, is valid XML code, and can be specified either inside an MXML file defining a component or, more often, in a separate file.

The advantage of using a separate file is that designer tools can read and write that file directly.

Adobe, for instance, enhanced its designer tools to comprehend such FGX files, and even provided a specialized designer tool, Catalyst, for the purpose of working with FGX content.

FGX files can declare any visual aspect of a component. An FGX file, for instance, can define runtime graphics classes that draw shapes, specify containment of sub-components, define component effects, transitions, and even specify layout inside the component. In Flex 4, the runtime graphics primitives directly map to graphics classes in Flash Player 10.

Separating out visual concerns into a separate file allows a Flex component's core class to focus on component logic, such as responding to user gestures and data events.
A new component lifecycle ensures that the component's core behavior is associated with the right skin file at runtime.

Skin Swapping Example

This is a good skin swapping example

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]
*/