Andy Hulstkamp

about creating online experiences

29. March 2012

Flex Component Lifecycle

Here’s a useful little interactive cheatsheet I made to better remember all the functions inside the Flex lifecycle. I’ve never found the time to validate all the descriptive stuff so please use with care. Most of the information provided should be pretty accurate and should still be applicable to Flex 4.6. But again, be sure to double check.

This little tool visualizes the lifecycle of the Flex 4 Spark component model and hopefully helps to understand what happens behind the scenes.

Basically it is an expanded stack trace with comments showing the most important method calls during the lifecycle’s birth, life and death phase including invalidation and validation.

See Component Lifecycle live

Flex Component Lifecylce
Flex Component Lifecylce 2

It shows the method calls of the 3 relevant objects regarding the Spark component model, namely SkinnableComponent (in this case a Button), its SparkSkin and the associated BasicLayout.

The traced component (Button) is shown at the top. To the left you can invoke method calls like you would from client code to see what methods get called when and where. Right underneath you’ll find the current values of some important properties of the traced component.

Disclaimer: The information provided here is based on my own experiments, tracing the source code of the Flex SDK (4) and the docs. Information hopefully is, but may not be accurate. So, in any case, please double check when relying on it.

further reading

Using Google App Engine

About using Spring MVC on Google App Engine and the challenges with the datastore.

Getting Vector Graphics into Spark Skins

How to get vector graphics into flex Skins