Christopher Huyler’s Flex Blog

The downside to the ModuleLoader component is that you do not have control over when your module is loaded unless you start messing with creationPolicy=”all” but we won’t go there. Instead, you can use the ModuleManager to load your modules when your application is initialized.

The first step is to check out Adobe’s example for using the ModuleManager. It is a good start but we can do better. For one thing, you may want to debug your modules and changing the URL to the SWF can be tedious. Darron Schall came up with a great way to dynamically determine whether you are running the debug version of your app and we will incorporate it in this example.

Step 1: Load the module from application creationComplete

Darron checked his Application url for “-debug” but I reduced the number of lines by simply taking the Application url and replacing the name of the SWF. This only works if all of your SWF files are located in the same folder. If they are in different folders you will have to make some minor changes.

/* Application SWF is main.swf or main-debug.swf so module SWF
 * will be empmodule.swf or empmodule-debug.swf */
private function onCreationComplete():void
{
    empRef = ModuleManager.getModule(
        this.url.replace(/main/,'empmodule'));
    empRef.addEventListener(ModuleEvent.READY, empRefReady);
    empRef.load();
}

Step 2: Implement ModuleEvent.READY callback

In Adobe’s example, they load the module as a BarChartModule. This brings a reference to the BarChartModule into the main application. Instead, I just load it as a DisplayObject which reduces the size of the main application.

private function empRefReady(e:ModuleEvent):void
{
    empCanvas.addChild(empRef.factory.create() as DisplayObject);
}

Step 3: Add a ProgressBar indicator

For users that have slow internet connections you may want to add a progress indicator during the time it takes to download the module. You can place one directly on the canvas that will display the module. Use Data Binding against the IModuleInfo object to update the ProgressBar and hide it when the download is complete.

Create the progress component:

<mx:Canvas id="empCanvas" label="Employees">
    <mx:VBox visible="{!empRef.ready}"
        width="100%" height="100%"
        verticalAlign="middle"  horizontalAlign="center">
        <mx:ProgressBar source="{empRef}"/>
    </mx:VBox>
</mx:Canvas>

Here is the result:

Download the Source

Christopher Flex