Posted on by admin

SystemManager: Every Flex application’s best friend

When I first joined the Flex framework team, the Flex SystemManager seemed like a black magic, voodoo-y class that no one in their sane mind wanted to touch. In fact, the one time I did make a change to SystemManager (early in my development career), I inadvertently ended up pulling in all of UIComponent and bloating Flex development SWFs that week by a good 10k. Oops – good thing we have tests to check for mistakes like that.

Some time later, I started researching SystemManager in order to speak about it in one of my talks. I had an epiphany: SystemManager is not so scary. In fact, I’d go so far as to say that it is the most important class in the entire Flex framework.

So, let me try to make SystemManager less mysterious and explain how it enables the creation of Flex applications.

What does the Flex SystemManager do?

SystemManager is really the engine behind getting your Flex application up and running. Its most important job is creating the Application instance and adding it to the Flash Player display list. It also acts as the parent to all top-level items like popups, tooltips, and cursors in a Flex application. In addition to parenting them, SystemManager handles focus between these top-level items.

SystemManager creates my application? Tell me more….

This is what is so cool about SystemManager. There is a definite order to what happens the moment a Flex SWF is hit and it starts streaming down to a Flash Player client. Lets talk about that sequence of events.

First, it is imperative to understand that a Flex SWF is a 2-frame movie. The first frame of a Flex SWF contains the SystemManager, the Preloader, the DownloadProgressBar and some “glue” helper classes. Remember, the Preloader is what creates the DownloadProgressBar control which displays the progress of a Flex application downloading and being initialized. The second frame of a Flex SWF contains the rest of the Flex framework code, your application code and all of your application assets like embedded fonts, images, etc. By creating a 2-frame movie, Flex applications can take advantage of the streaming support built into the Flash Player and a preloader can appear before all of the Flex framework code and your application code are downloaded.

So, here’s the order of things once an mxml file or Flex SWF is hit. First, enough bytes for frame 1 are streamed down to the Flash Player. The Flash Player executes those bytes by creating a SystemManager instance. The first thing the SystemManager does is instruct the Flash Player to stop at the end of frame 1. The SystemManager then goes on to create the Preloader which creates the DownloadProgressBar control and pops that up on the client screen. The Preloader then starts tracking the rest of the bytes streaming in from the Flex SWF. Once all the bytes for the Flex framework and application code are in, the System Manager goes on to frame 2 and instantiates the Application instance.

Once the Application instance has been created, the SystemManager does a very important thing. It sets Application.systemManager to itself. This is how you, the application developer, can access the SystemManager at a later time. After the systemManager property has been set on the Application instance, the Application goes on to create its children. Eventually, once all the Application child controls and containers have been created, sized and positioned, the Application dispatches the creationComplete event. Once the creationComplete event has been dispatched, the Preloader removes the DownloadProgressBar control and the SystemManager adds the Application instance to the Flash Player display list. (Aside – the Flash Player display list is basically the tree of visible or potentially visible objects that make up your application. When you add and remove child components to your application, your basically just adding and removing them from the display list).

Once the Application is added to the Flash Player display list, the Application dispatches its applicationComplete event and voila! The Application has been created and is up on the screen ready to be interacted with.

Phew – that was a mouthful, but hopefully it made sense. If you read over it a couple of times, you’ll see the execution of tasks once a Flex application is hit is very methodical.

40 Replies to “SystemManager: Every Flex application’s best friend”

  1. I found this article extremely useful. Till now I never really understood the process which you have explained in your article. Now everything I did while creating a Flex application is falling in place and is making perfect sense to me. Thanks for sharing this Deepa

  4. Hi Deepa,

    I have an application that relies on runtime styles but unfortunately, I see the default styles for a second before the loaded styles are applied. Is there an easy way around this? I’ve been trying fancy things with a custom preloader but haven’t had any luck. Any help would be greatly appreciated!

    Thanks,

    Tom
    http://www.searchcoders.com

  5. Hi

    i m new to flex. i want know it is passible Dynamic SWF Generate in flex.
    i have two more components(canvas or panel or textarea ) in my single flex application.can i create each canvas a separate swf? . that i can use it separately for my web aplication project.

    it possible means how pls give me your guide.

    thanks

    kuttikumar

  6. @Tom:

    Sorry for such a late response, I’ve been on vacation for almost the past month.

    So this has to do with runtime styles being loaded in. There are a variety of different ways to address this. I’ve seen people hide the Application object until the CSS is loaded and applied. But, one of our engineers baked in a pretty neat solution into the Flexstore sample application.

    Go here: http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html and right click to do View Source.

    Notice how there is a preinitialize event handler on the Application object. This calls the loadStyle() method which loads in the style declarations and adds an event handler for when the loading has completed. This event handler, completeHandler(), is what then sets the initialized property. Notice a few lines down that the initialized setter is overridden to do nothing.

    Utilizing this solution will prevent the default styles flashing before your custom styles are loaded in.

    Best,
    deepa

  7. @kuttikumar: Check out Flex Modules in the livedocs or blogosphere. Modules gives you the ability to create separate files, that are compiled into independent SWFs and pulled into your main application SWF on demand.

  8. Hi Deepa,

    Nice to know about the work of systemManager. I am new to Flex, but old to Flash. I am trying to create a Custom Preloader in Flex 3 beta 2, preloader closes before all the content loads. Even I tried ted on flex article and example, eventhough its not working. can you please tell me how can i create cusom preloader using swf.

    Regards,
    Dhanamurugan.

  9. Dhanamurugan, its hard to diagnose what could be wrong without knowing more specifics. Ted’s tutorial on his blog is pretty straightforward, so if that is not working for you we need to dive further. Can you email me a description of the problem and any sample code? dsubrama at adobe dot com

  12. Thanks for this info, Deepa. I’m trying to find the best way to reliably read screen width and height and this article was very helpful. Initially I was using the way I saw Alex Uhlmann do it but I got RTEs (cannot access a property of null object) in some circumstances:

    var s:Rectangle = ISystemManager(root).screen;

    I get an error if I use Application.systemManager (the way you mention above) but I’m doing this and it seems to work in all cases so far:

    var s:Rectangle = Application.application.systemManager.screen;

    Is this the best way?

  13. IN regard to your Tom Bray response, I used the method you described, but I want to trap errors if for some reason I cannot access it due to security sandbox restrictions, the file does not exist, etc.
    I can listen for StyleEvent.ERROR and can successfully trap the non-existent file. But for security sandbox problems, I get the following error and don’t know of a way to trap it.

    VerifyError: Error #1014: Class IFlexDisplayObject could not be found.

    at flash.display::MovieClip/nextFrame()
    at mx.core::FlexModuleFactory/deferredNextFrame()
    at mx.core::FlexModuleFactory/update()
    at mx.core::FlexModuleFactory/timerHandler()
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

    Any way to trap this VerifyError? Or anyway to avoid getting the error altogether?
    Any help would be greatly appreciated.

  14. @Darren – yes, that will give you back the size and position of the app window and should be what you want. A Rectangle is returned which can be queried for the x, y, width and height of the app window.

  15. We recently added anchor points to our site, and started running into an exception in the system manager:

    // Add safeguard in case bug 129782 shows up again.
    if (topLevel && currentFrame != 1)
    {
    throw new Error(“The SystemManager constructor was called when the currentFrame was at ” + currentFrame +
    ” Please add this SWF to bug 129782.”);
    }

    Do you know of any work around for this?

  17. Hello, I am trying to port a *loader* application that was flex .mxml
    to plain .as actionscript. The purpose of this application is to load
    other flex swfs. I am getting the error,

    VerifyError: Error #1014: Class IMXMLObject could not be found

    I have a feeling that this has to do with SystemManager,
    because my previously working code was:

    app.content.addEventListener(FlexEvent.APPLICATION_COMPLETE, appInitComplete);

    and later,

    var app_content:SystemManager = SystemManager(e.target);
    app_content.removeEventListener(FlexEvent.APPLICATION_COMPLETE, appLoadingComplete)

    I have a feeling that SystemManager is trying to kick-in in the wrong frame, and it is not finding the class. Since the the code compiled, it must have resolved all classes, no ?
    I have added an explicit import line for IMXMLObject but that didn’t help.

  18. I’m having a problem with the SystemManager and maybe you can help me out. I have an Air application that dynamically loads a couple of external SWFs (that I made) using Flex. I’m using the SWFLoader to load them. Inside the SWFLoader is does this

    flexContent = Loader(contentHolder).content is IFlexDisplayObject;

    Loader(contentHolder).content is the SystemManager for my child SWF. I checked in the debugger and verified that it descends from SystemManger which implements IFlexDisplayObject. However, it returns false. I even tried copying the source locally and rearranging the code a big using local variables to see what’s going on. I’m not sure why it doesn’t hink it’s an IFlexDisplayObject. Do you have any ideas?

  19. Hi Deepa,

    I’m not sure this is the right post.. I’m sorry .. I’m aa newbie in flex ..

    the question..
    I would to make a desktop application (with AIR) like “AOL Video Top 100”.. like functionality and like style ..
    my first problem is to manage different Window..
    My idea was..
    1-start my app (ex: main.mxml)
    2-don’t draw anything – application.visible=false ?? but this simple “CLOSE” application . .
    3- open some pop-up to show my data or search form .. and other.. the main.mxml manage this..

    can SystemManager help in this ??

    simple i would an application like .. WinAmp.. some DIFFERENT Window/Module .. separatly..

    tnx tnx tnx

  20. hi deeps how can i start learing flex can u pls guide me to learn flex and i am having an good idea onflex pls guide me i am a newbie to flex

  21. Hello Deepa,

    Have a question. My project has runtime localization. So I want to ensure that my resource bundles are initialized before my application is shown. I tried to call it via preinitialize but it did not call my loadBundles function.

    So how do I ensure that all the data that I want are downloaded to the client, before I show something to the user?

  22. nice post
    thanks a lot
    a quick question
    Is there any way to restore the focus on the input element of the flex application whenever i minimize and maximize it?
    Is it something to do with systemmanager?

  23. Thats fine. I got it. Since my ResourceBundle stuff was in another module, it worked differently. Thanks for the link you pointed out.

  25. Pingback: Solution Hacker - Flex Startup Sequence

  27. Hi all,

    I have a doubt reg. SWF Loader.

    I have created two mxml files A & B.

    A. local.mxml

    B. SwfSample.mxml

    i have two labels and a button in A file and i have set values to those labels and have a method to handle the click event of the button. In B file i have loaded this A file and accessed the labels and methods using SystemManager Component and changed the values of the A file’s label and accessed data from A file to B file.

    Here comes the problem,

    I have two buttons named LoadAgain and Unload

    When i click the Unload button, the SWF Loader unloads its content by the method i handled for the Unload button, after that i have clicked on the LoadAgain button to load the same content of A’s mxml to the SWF Loader, it loads succesfully,but i was not able to access its Label or Method from the B mxml. Please help me to solve the issue.

    local.mxml

    ——————————————————————————– ———————————————————————-

    SwfSample.mxml

    Thanks & regards,

    Sathish.K

  28. Hi,

    I have some questions for you.

    So, the SysyemManger has two frames: the first contains the Preloader; the second one contains the Application; isn’t true?

    Once Frame 2 of SystemManager has loaded, the play-head advances to this frame, where it remains for the duration of the application.

    So, when the application is running, does the Frame 2 cycle over the app’s life cycle?

    If you are in Frame 2 and the user fires a general event that renders (for example) a circle in the screen, the Flash Player executes ActionScript code and then renders the circle on screen. What happens then? Is
    Frame 2 reloaded?

    If is possible, could you give me a little example about logical flow?Is there any tutorial which documents the flex life cycle?

    Thanks a lot

  29. hi deepa
    I am having doubt in swfloader in flex 3….i am using two swf files i.e adobe presenter file..i want to run it in my application.but my problem is only one file is playing other one is not playing….could you know how to unload the previous content in that swfloader

  30. Pingback: Flash Bootstrapping « Price Talk
  31. Pingback: uberVU - social comments

  32. Hi Deepa ,

    Its really good article. Can I use System Manager as parent for my popup while creating or adding a popup. I have an application with height 100 and i want a popup to be created in the center of the browser window i.e. outside the application window.Plz tell me the way to find out a feasible way to do it.

    Thanks
    Prashant

  33. Hi Deepa,
    Can you tell me how to get an instance of the Application within a spark container?

    I am trying to listen to state events on the main app, and used to be able to access it with:
    Application.application.

    But that doesnt work anymore. Any help would be great. Trying to listen to STATE_CHANGE_EVENT.

  36. hi deepa i want to learn flex but iam unable to find correct institutes in hyderabad can u help me

  38. Hi,

    nice article 🙂

    I’d like to know if there’s a way to extend the SystemManager and define it as the default one..
    The aim is to achieve similar functionnalities as Gravity i.e : define RSL path at runtime, not compilation.

    The only hook i have for now is in the Application component, which is part of frame-2 as you explained it : too late.

    Here’s my email : wildduckpower@yahoo.fr

    Thx a lot !

    Regards,

    Thomas

  39. Hi Deepa,

    I would like to thank for the clear explanation about the Flex start up and inner world of Flash Player (2 Frame).

    Great Post for every programmer. Deepa Rocks 🙂

  40. Pingback: //the blog of Paul Taylor/ site: Understanding the Flex SystemManager

Leave a Reply

Your email address will not be published. Required fields are marked *