Example Of Using Modules In Flex 2.01

Flex 2.01 includes support for modules. Modules can be used to organize your Flex code into separate files. These files are compiled into SWFs and then can be loaded into your main application SWF at runtime. This is my first attempt are using modules and I've posted an example application (right click on the example to view the source files).

My references are:

1. Flex 2.01 Developer's Guide, Creating Modular Applications, http://livedocs.macromedia.com/flex/201/html/modular_083_1.html
2. Flex 2.01 Language Reference, Class Module, http://livedocs.macromedia.com/flex/201/langref/mx/modules/Module.html
3. Flex 2.01 Language Reference, Class ModuleLoader, http://livedocs.macromedia.com/flex/201/langref/mx/modules/ModuleLoader.html
4. FlexCoders Yahoo Group, Compiling Flex Modules, http://tech.groups.yahoo.com/group/flexcoders/message/60494

My module demonstration application is based on the example in chapter 31 of the Flex 2.01 Developer's Guide (see reference 1). I am using a tab navigator to display various charts. Each chart's MXML code is stored in a separate module (right click on the example application, view source, and select LineChartModule.mxml or PieChartModule.mxml or ColumnChartModule.mxml).

Modules can be used to separate out of the main application, code that doesn't need to be loaded when the Flex application first loads in the user's browser. In my example, the charts that are on the non-visible tabs don't need to be loaded initially. When the user clicks on a tab, the SWF file containing that tab's chart is loaded.

Since not all the code is wrapped into one large SWF, using modules can reduce the initial load time. Also using modules can make your code easier to maintain and reuse. Since the code in a module is a self-contained entity, I could use the same chart module in another application. Additionally, if I change just the base application, I don't need to recompile all the other modules. If I change one of the modules, I only need to recompile that module. Using modules also supports team creation of a Flex application. According to reference 1, it is also possible to link to modules that are on different servers.

To create a module, I used File - New MXML Component and in the list of "Based On" components, I selected module. Between the opening and closing module tag, you place your code. In my example application, the modules are loaded automatically when a tab is selected. However, you can load and unload your modules manually. There is an example of how to do that in reference 1 above. Additionally, the loading and unloading of modules can generate events.

To load a module you use the ModuleLoader tag. You provide the URL attribute the path to and the name of the SWF that contains the code for the module. I did notice a slight delay the first time a tab was selected until the SWF for that module was loaded. It appears that the browser must go back to the server to download the SWF (I thought perhaps all the module SWFs would be downloaded in the background after the application loads).

Compiling a module in Flex Builder 2.01 is not self-evident. There is no "compile module" command button or menu choice. Consult reference 4 above for some ways to compile a module. What I did in my example, was to right-click on the module name in the navigator panel, select Run As Flex Application. This command will create the .swf and .html files for the module and try to load it in the browser (where nothing will display). When you upload your application, you just need to upload the SWF files for each module, in addition to the other main application files.

As I mentioned at the beginning, this is my first attempt using the new module feature. Please post any comments to other module examples and let me know if I have misunderstood something about modules.