Flex 2: Before your application is loaded

I did a mini research on what “s happening under the hood when Flash Player 9 loads and starts a Flex 2 application. Since Flex 2 is still pretty young, there is not too many resources are available, so I “d appreciate any feedback.

The SystemManager is a main manager that controls the application window, creates and parents the Application instance, popups, cursors, manages the classes in the ApplicationDomain, and more. The SystemManager is the first class that is instantiated by Flash Player for your application. It stores the size and position of the main application window, keeps track of its children, such as floating popups and modal windows. Using the SystemManager you can access embedded fonts, styles and the document object. SystemManager also controls application domains, which are used to partition classes by security domains (see description of the ApplicationDomain class in Flex Language Reference).

If you “ll be developing custom visual components (descendents of the UIComponent class), keep in mind that initially such components are not connected to any display list and the SystemManager=null. Only after the first call of the addChild() a SystemManager will be assigned to them. You should not access SystemManager from the constructor of you component, because it can still be null.

In general, when the Application object is created, it goes through the following steps:

1. Instantiation of the Application object begins.

2. Initializes the Application.systemManager property

3. The Application dispatches the preinitialize eventat the beginning of the initialization process.

4. The method createChildren() is called on the applicatoin. At this point each of the application “s components is being constructed, and each component “s createChildren() will be also called.

5. The Application dispatches the initialize event, which indicates that all application “s components have been initialized.

6. The creationComplete event is being dispatched

7. The Application object is added to the display list.

8. The applicationComplete event is being dispatched. You application instance is ready to use.

In most cases, you should use the mxml tag lt;mx:Application gt; for creation of the application object, but if you need to write it in ActionScript, it is not recommended creating components in constructor – use createChildren() for this (for performance reasons).

As opposed to Flash movies that consist of multiple frames being displayed over a timeline, Flex SWF files have only two frames. The SystemManager, Preloader, DownloadProgressBar and a handful of other helper classes live in the first frame. The rest of the Flex framework, your application code and embedded assets like fonts and images reside in the second frame. When Flash Player initially starts downloading your SWF, as soon as enough bytes come for the first frame, it instantiates a SystemManager. Then SystemManager creates a Preloader, which creates a DownloadProgressBar and these two objects are watching the rest of the byte streaming-in process. What all bytes for the first frame are in, SystemManager sends the enterFrame for the second frame, and then renders other events. Eventually, the Application object dispatches the applicationComplete event.

You may say, why do I need to know what “s happening before my application starts? This knowledge may become quite handy. For example, you can create a fading splash screen with the image of your choice by substituting the standard Flex Preloader and the DownloadProgressBar objects with the custom ones. Ted Patrick from Adobe has provided a nice sample application that does exactly this: displays a splash screen using an image from a from a .gif file. While your splash screen is displayed, you can download some other system resources and/or libraries.

The application tag of this sample looks pretty straightforward:

lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml ” preloader= “preload.CustomPreloader ” gt;

Download the code of this application and you “ll see that the classes CustomPreloader that extends the DownloadProgressBar and a helper WelcomeScreen that loads the image and fades it away are also pretty small.

Here’s another idea. During the application load your ActionScript code may interact with the “outside world ” a.k.a. Web browser. The class flash.external.ExternalInterface has a method addCallback() that allows you to register an ActionScript method as callable from the container. After a successful invocation of addCallBack(), the registered function in Flash Player can be called by JavaScript or ActiveX code in the container.

One more. Your Application may need to load another application(s) from a separate SWF file(s). If you have to do it in ActionScript, you can use the class SWFLoader from the applicationComplete event.

The most important feature of the Flex 2 is that it “s an open and extendable framework. I “m accustomed to being in complete control with Java, and Flex does not tie your hands either. This is somewhat off topic, but since Flex Builder is built on Eclipse platform, it lets you extend its functionality by creating your own plugins. For example, here is a To-Do/FixMe plugin.

That’s all…for now.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s