Factum Vicesimus Quartus

Exploring web x.0, innovation and RIA techniques

Add to Netvibes    Add to Google

Last week I tried to add 2 eventlisteners to the stage to listen for key up and key down events. These eventhandlers should be initiated immediately when the application is loaded. I added these eventlisteners to a function and called the function with the creationComplete() method in the application declaration. This setup gave me an error because the stage was not yet available and returned as a null object. I started digging into the event startup order of Flex and found that the stage was only available when called with the updateComplete() and applicationComplete() methods.

The creation order is different for containers and components because a container can be the parent of other components or containers. The following scheme shows the mayor events that are dispatched during the creation of a container:

Startup Event Order in Flex

So the order in which the events are dispatched by the application are preinitialize(), initialize(), creationComplete(), updateComplete() and applicationComplete().

The events in more detail:
preinitialize() is dispatched when the component has been attached to its parent container, but before the component has been initialized, or any of its children have been created. In most cases, this event is dispatched too early for an application to use to configure a component.

initialize() is dispatched when a component has finished its construction and its initialization properties have been set. At this point, all of the component’s immediate children have been created (they have at least dispatched their preinitialize() event), but they have not been laid out. Exactly when initialize events are dispatched depends on the container’s creation policy, as described later in this section.

creationComplete() is dispatched when the component, and all of its child components, and all of their children, and so on have been created, laid out, and are visible.

updateComplete() is dispatched every time the container or component characteristics are changed.

applicationComplete() dispatches events after the Application has been initialized, processed by the LayoutManager and added to the display list. This is the last event dispatched during an application startup. It is later than the application’s creationComplete() event, which gets dispatched before the preloader has been removed and the application has been attached to the display list.

So you are trying to add eventListeners to the stage right from the start of your application execution, this will only work with updateComplete() and applicationComplete(). More information about the startup order of a Flex application can be found here.

Another solution for this is using the callLater() function.The callLater() function (or doLater() in previous versions of Flex and ActionScript), allows you to delay code execution until the user interface is updated.

14 Responses to "Understanding the Flex Application startup event order"
  1. # 1   Ruben
    February 12th, 2007 at 13:25

    Good on you man! I’m pretty sure this’ll be a lifesaver for me sooner or later. Cheers..

  2. # 2   All in a post (3) | Web X.Y
    March 2nd, 2007 at 09:43

    […] Wietse writes startup event order in Flex L(link) […]

  3. # 3   Error on adding FullScreenListener in creationComplete handler « FLEXing my Muscle
    March 16th, 2007 at 10:58

    […] Addendum again (the next day) – Thanks Joan for the info. Thanks to her, i found the solution for the above problem… It seems that the stage is available only after the updateComplete or applicationComplete Events. Read the post that demystified things for me… […]

  4. # 4   Are you still jumping out of windows in expensive clothes? » Blog Archive » Initialiseringsordningen i Flex
    April 29th, 2007 at 21:19
  5. # 5   Rudi
    June 6th, 2007 at 21:37

    Hi, Thanks!!!!! very very much from Italy

  6. # 6   Anoop P K
    March 6th, 2008 at 11:00

    Hats on you dude… thanks… i was struggling with some problem.. it helped me to solve that… Thanks very much. from hindustan

  7. # 7   Chetan Sachdev
    March 26th, 2008 at 11:43

    I am trying to use this while I am loading a module in my Application. My module is in actionscript 3. can you tell me how I can add listener for creationcomplete or initialize events while I am loading module using ModuleLoader class.

  8. # 8   Mind wandering.. » Blog Archive » Flex: understanding the component instantiation life cycle
    July 8th, 2008 at 23:34
  9. # 9   Solution Hacker - Flex Startup Sequence
    March 16th, 2009 at 08:57

    […] of how and when application dispatches different events during the startup time, I found this article very useful. Below is the diagram I stole from this […]

  10. # 10   mko
    January 15th, 2010 at 14:17

    Thanks! I was wondering why I never got into the creationComplete-Handler of the Application…applicationComplete works!

  11. # 11   Michael Fitchett
    March 26th, 2010 at 18:07

    Awesome thank you!

  12. # 12   loogie
    September 13th, 2010 at 14:49

    Finally! someone who explains it in a simple illustration! THANKS!

  13. # 13   Chords
    July 13th, 2011 at 12:35

    Thanks that makes things much clearer. Could you indicate where Application’s addedToStage fits into the rhythm of things?

  14. # 14   vkwave
    December 6th, 2011 at 13:05

    Brilliant… Thanks for sharing your experience. It helps me a lot to understand really what happen when flex application load.

Leave a Reply