Loading one Flex application into another Flex application is actually remarkably simple. All you need to do is create an SWFLoader instance and set the source property, as shown here:

<mx:SWFLoader source="application.swf" />

However, it gets slightly more challenging when you want to interact with the content you are loading. For example, if you want to call a public method defined in the loaded application, you must know two important things:

The answers to these questions are as follows. When an SWFLoader loads a Flex application, the SWFLoader object’s content property provides a reference to the root of the loaded Flex application. As we’ve already discussed, that root is a SystemManager object. The SystemManager class defines an application property that references the Application object. However, it’s important to understand that the application property of a SystemManager object for a Flex application that has just loaded will be null because the loaded content will still be on its first frame, and the Application instance isn’t constructed until the second frame. This might seem to pose a problem, but there is a relatively elegant solution.

When an SWFLoader loads and initializes the content, it dispatches an init event. You should first handle the init event. This tells you when you can reference the SystemManager for the loaded content. You must then add an event listener for the applicationComplete event for the SystemManager. When the applicationComplete event occurs, you can reference the Application object for the loaded content.

Let’s look at an example that illustrates the proper way to load one Flex application into another and use events to wait until the application has actually initialized before trying to communicate with the loaded content. In this example, we’ll first look at the code for the Flex application that will load into another application. This is the code for a runnable MXML application file called B.mxml. This application creates a canvas with a background color of white. It also adds a public method that allows loading applications to set the background color.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[

            public function setBackground(color:Number):void {
                canvas.setStyle("backgroundColor", color);
            }

        ]]>
    </mx:Script>
    <mx:Canvas id="canvas" backgroundColor="#FFFFFF" width="100" height="100" />
</mx:Application>

Here’s the runnable MXML application file for the Flex application that loads B.swf. Note that we first listen for the init event. Once the init event occurs, we add a listener to the SystemManager object for applicationComplete. Then, once applicationComplete occurs, we can call the public method of the loaded content.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.managers.SystemManager;
            import mx.events.FlexEvent;

            private function initHandler(event:Event):void {
                event.target.content.addEventListener(FlexEvent.APPLICATION_COMPLETE,
applicationCompleteHandler);
            }

            private function applicationCompleteHandler(event:Event):void {
                event.target.application.setBackground(0xFFFF00);
            }

        ]]>
    </mx:Script>
    <mx:SWFLoader source="B.swf" init="initHandler(event)" />
</mx:Application>

With this simple example, you can see how to load one application into another application.