Flex Instantiation Life Cycle and Event Flow
DIGG IT!
6
Comments
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.
Let the capture and bubbling phases begin!
Cheers,
Ted :)
Morning Ted.
Yep. You're definitely right. Understanding what events are firing when is one of the keys to taming Flex. Great explanation.
I posted about the event sequence during a state change a while back. Thought it might be relevant to this discussion.
Keep up the great posts.
Have a great one.
Ted -
What's the best way to start learning Flex? book? web site? resource?
I'm looking through this and I'm confused as to why initialize is called AFTER outTextArea/ Hello/ GoodBye and Clear buttons are initialized...
The events fire within children and then in the parent. In this case initilize happens in the child components and them moves to the application tag as the parent. This is typical of the event lifecycle as it moves from the root application to children and back to the application. It is as though the application event is the summary event of all child initialize events.
ted :)
I can't get this to compile... the line in report that assigns to outTextData errors: 1050: Cannot assign to a non-reference value.
Oops haha... never mind. I just had an = instead of a + on the second line of that statement.