Flex Instantiation Life Cycle and Event Flow
DIGG IT! Published Thursday, February 08, 2007 at 8:41 AM . Flex is an event driven programming model, everything (and I mean everything) happens due to an event. When developers first take a look at MXML it is often difficult to see the event flow or instantiation life cycle of an application given the XML markup. This is especially confusing to HTML and Flash developers because the development paradigm of Flex does not match what they are used to. HTML instantiates top to bottom where Flash executes across frames starting at Frame0. Flex is a bit different.When I learned Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn't understand what event would kick start the logic or when events would fire. The key is understanding the event basics and seeing the initialization and event flow for yourself.
So lets look at a simple application in MXML.
Sample Application
Sample Application Source
When this application runs it dumps the instantiation and event flow into the TextArea via a binding. This allows us to see all events within the application occur independent of component instantiation order. As you can see in the application output there is a consistent order of events when this application starts. Here is the basic output up to the applicationComplete event. (The EventFlow0 object is the Application tag of the base app. The times to the left are the from the execution clock of the Flash Player.)
167ms >> EventFlow0.preinitialize
183ms >> EventFlow0.outTextArea.initialize
187ms >> EventFlow0.HelloButton.initialize
188ms >> EventFlow0.GoodByeButton.initialize
189ms >> EventFlow0.ClearButton.initialize
189ms >> EventFlow0.initialize
243ms >> EventFlow0.outTextArea.creationComplete
243ms >> EventFlow0.HelloButton.creationComplete
243ms >> EventFlow0.GoodByeButton.creationComplete
244ms >> EventFlow0.ClearButton.creationComplete
244ms >> EventFlow0.creationComplete
246ms >> EventFlow0.applicationComplete
Once the applicationComplete event it triggered, the components fire events when mouseEvents are dispatched to the components individually.
1807ms >> EventFlow0.HelloButton.rollOver
2596ms >> EventFlow0.HelloButton.rollOut
2954ms >> EventFlow0.HelloButton.rollOver
3170ms >> EventFlow0.HelloButton.rollOut
3543ms >> EventFlow0.HelloButton.rollOver
4052ms >> EventFlow0.HelloButton.click > Hello!
4267ms >> EventFlow0.HelloButton.click > Hello!
4474ms >> EventFlow0.HelloButton.click > Hello!
4569ms >> EventFlow0.HelloButton.rollOut
4907ms >> EventFlow0.GoodByeButton.click > Goodbye!
5130ms >> EventFlow0.GoodByeButton.click > Goodbye!
There is also some great documentation on the instantiation life cycle located here. Understanding this instantiation process is very important for Flex development. The example posted contains view source so feel free to take a peek and play with the events yourself.
So now you know the instantiation life cycle and event flow! I will be covering DOM events and event flow next. Event do not just happen at the component but they flow across the displaylist in phases.