Splitting Flex application into modules

There are many scenarios in which you might want a part of the code in Adobe Flex application to be loaded only when required, that is you might not want a piece of code to be compiled into main application SWF, instead load it when required. Scenarios can include screens which user accesses very rarely or a set of libraries which you want to load when required. This can achieved using Modules in Flex.

There might be many screens in Adobe Flex application, which user access very rarely. Examples can include screens where users give suggestions, complaints etc. if all such screens are included in your application, your application size might be huge, affecting the initial loading experience.

Similarly you might have a library code which might be used rarely. Examples can include library for creating reports, which is required only when the user wants the reports to be generated.

All such code which you think will be used very rarely can be included in modules and load them dynamically when required.

About modules

Modules are SWF files which can be loaded dynamically by an application. They cannot run independently, they have to be invoked by application. Any number of applications can share the same module.

Modules allow you to interact with the parent application and also interact with other modules. Modules can be loaded either using ModuleLoader or ModuleManager.

Click here for more details on Modules

Sample application

This application shows how to load a module dynamically. The module loaded dynamically will display a window in which we can capture user’s suggestions. The module accepts input from the parent application and also invokes properties of the parent application.

Application includes three files.

Modules.mxml – this will invoke the module

SuggestionModule.mxml – this is the module

IUserInput.as – this interface is implemented by the module. This is for module-application communication. (Optional)

Screen shot

Modules.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.managers.PopUpManager;

import mx.events.ModuleEvent;

import mx.modules.ModuleManager;

import mx.modules.IModuleInfo;

private var moduleInfo:IModuleInfo;

private var suggestion:SuggestionModule;

private function loadSuggestionModule():void

{

moduleInfo = ModuleManager.getModule("SuggestionModule.swf");

moduleInfo.addEventListener(ModuleEvent.READY, renderSuggestionModule);

moduleInfo.addEventListener(ModuleEvent.ERROR, handleError);

moduleInfo.addEventListener(ModuleEvent.PROGRESS, showProgress);

moduleInfo.load();

suggestionProgress.visible = true;

}

private function renderSuggestionModule(event:ModuleEvent):void

{

suggestion = moduleInfo.factory.create() as SuggestionModule;

suggestion.setHeaderMessage("Suggestion - Home Page");

PopUpManager.addPopUp(suggestion, this, true);

PopUpManager.centerPopUp(suggestion);

suggestionProgress.visible = false;

}

public function closeSuggestion():void

{

PopUpManager.removePopUp(suggestion);

moduleInfo.unload();

}

private function showProgress(event:ModuleEvent):void

{

suggestionProgress.text = "Loaded " + Math.round((event.bytesLoaded / event.bytesTotal)* 100) + "%";

}

private function handleError(event:ModuleEvent):void

{

Alert.show(event.errorText,"Error");

suggestionProgress.visible = false;

}

]]>

</mx:Script>

<mx:Button id=”chartModuleBtn” label=”Suggest” click=”loadSuggestionModule();”/>

<mx:Label id=”suggestionProgress” text=”Loaded 0%” visible=”false”/>

</mx:Application>

SuggestionModule.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Module xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;

layout=”vertical” width=”366″

height=”200″ borderStyle=”solid” cornerRadius=”11″

borderColor=”#000305″ borderThickness=”2″

implements=”com.adobe.IUserInput”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

[Bindable]

private var heading:String = “Your suggestion please”;

private function submitSuggestion():void

{

parentApplication.suggestionProgress.text = “We will consider your suggestion”;

parentApplication.suggestionProgress.visible = true;

parentApplication.closeSuggestion();

}

public function setHeaderMessage(message:String):void

{

this.heading = message;

}

]]>

</mx:Script>

<mx:Form width=”100%” height=”100%”>

<mx:FormHeading label=”{heading}”/>

<mx:FormItem label=”Your Name”>

<mx:TextInput id=”userName” width=”233″/>

</mx:FormItem>

<mx:FormItem label=”Suggestion”>

<mx:TextArea id=”description” width=”234″/>

</mx:FormItem>

<mx:ControlBar width=”100%” horizontalAlign=”center”>

<mx:Button label=”Submit” click=”submitSuggestion();”/>

<mx:Button label=”Cancel” click=”parentApplication.closeSuggestion();”/>

</mx:ControlBar>

</mx:Form>

</mx:Module>

IUserInput.as

package com.adobe

{

public interface IUserInput

{

function setHeaderMessage(message:String):void;

}

}