Christopher Huyler’s Flex Blog

As your application grows, you may find the initial download time becomes unbearable. The solution is to break your application up into separate SWF modules.

Step 1: Create a Module

Creating a module is as simple as implementing the mx:Module component. You create and compile the module as if it were an mx:Application except the module cannot be displayed by itself. Here is a quick example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
    percentWidth="100" percentHeight="100"
    layout="vertical">

    <mx:Model id="employeeModel" source="/employees.xml"/>

    <mx:DataGrid id="dg"
        width="100%" height="100%"
        dataProvider="{employeeModel.employee}">
        <mx:columns>
            <mx:Array>
                <mx:DataGridColumn dataField="name"
                    headerText="Name"/>
                <mx:DataGridColumn dataField="phone"
                    headerText="Phone"/>
                <mx:DataGridColumn dataField="email"
                    headerText="Email"/>
            </mx:Array>
        </mx:columns>
    </mx:DataGrid>

</mx:Module>

Step 2: Reference the Module

In this example, we can use the mx:ModuleLoader component to place the module inside our parent application. Pretty easy huh?

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    pageTitle="Flex Module Example"
    backgroundGradientColors="[0x4F5644, 0x4F5644]"
    layout="vertical">

    <mx:Style source="style/darkroom.css"/>
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.managers.DragManager;
            /* Make sure Managers are defined in main App */
            private var dragManager:DragManager;
            private var popUpManager:PopUpManager;
        ]]>
    </mx:Script>

    <mx:Panel
        title="User Configuration"
        width="100%" height="100%">
        <mx:TabNavigator width="100%" height="100%">
            <mx:ModuleLoader
                id="empModule" label="Employees"
                url="{this.url.replace(/main/,'empmodule')}"/>
            <mx:ModuleLoader
                id="grpModule" label="Groups"
                url="{this.url.replace(/main/,'grpmodule')}"/>
        </mx:TabNavigator>
    </mx:Panel>

</mx:Application>

Step 3: Compile Application and Modules

In order to reduce module size and download time it is important that you optimize the module using the link-report and load-externs compiler options. Link-report will export all the object types to an xml file that are included in a SWF. Use this on the main application. Load-externs will cause the compiler to omit object types listed in an xml document. Use this on each of your modules.

mxmlc -link-report report.xml Main.mxml
mxmlc -load-externs report.xml EmpModule.mxml
mxmlc -load-externs report.xml GrpModule.mxml

Here is the result:

Download the Source