How to tell when an MXML component has totally finished creation?

Question

An MXML component can be quite complex, containing many nested controls, including asynchronously loaded content such as Image/SWFLoader.

Is there one event I can watch for on my component that will only be raised when every control and sub-component has loaded, including SWFs and Images?

Answer 1

The onApplicationComplete event?

Answer 2

The creationComplete event should do the trick - creationComplete is called on the parent component after it is called on the children.

You can get some more info on the component lifecycle in the Adobe docs.

Answer 3

In some complex cases, like when your component is considered "finished" only when some data has been retrieved via HTTP or something like that, custom event is your best bet.

Answer 4

CreationComplete will NOT do the trick if you are talking about loading swf content or anything really external like that. CreationComplete gets fired when the MXML components have been laid out as defined in MXML (IE nested components, buttons, boxes, canvasses, etc.), so content that needs to get loaded externally (an image, a swf) does not count.

What you need to do is keep track of everything that you're waiting for and fire off a custom event once all of those elements have loaded.

One possible hackish way to do it would be to listen for whatever load complete event is relevant for each element, then have them call back to the same function that increments a value equal to the number of components you're waiting for. This means you have to pay more attention if you're modifying it, but it also means you don't have to check a boolean for every element that needs to load (IE "if (image1Loaded && image2Loaded && swfLoaded)" etc.)