Enterprise Flex: How to bludgeon a Flex Application into a Flex Module
Look at the top and very bottom of the main mxml file of your flex application. You should see opening and closing application statements very similar to this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
</mx:Application>
Now change the two instances of “mx:Application” to “mx:Module” like so:
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" >
</mx:Module>
Recompile your project. You are done! You now have a module SWF file. Much simpler than the title implied right? Well stopping here wouldn’t be much of a post, but don’t worry I have something more interesting to add.
A large part of the enterprise project I’ve been working on for the past two years has been dealing with modules. In this post I’ll show how to load and unload your newly compiled module dynamically into another Flex application with a progress bar.
You cannot tell the difference between an application SWF and a module SWF just by looking at the file. If you try to run a module SWF as you would a application SWF you will just get a blank screen with the default flex background. Compiled Flex modules can only be used by loading them into a Flex application.
Borrowing from a previous post, I’ve recompiled my FirstTry application into a module and will use it in an application to demonstrate loading and unloading modules.
There are two ways to load modules, using mx:ModuleLoader and using mx:ModuleManager. ModuleLoader is easier and quicker, but ModuleManager provides greater control over your module loading.
Loading a module with ModuleLoader can be as simple as adding this mxml line to your application:
<mx:ModuleLoader id="myModule" url="MyModule.swf" />
This loads, instantiates, and adds the module to your UI all in one step. It is used in your mxml just like any other component tag (such as mx:VBox, mx:Canvas, etc.).
My sample project will concentrate on using the more flexible mx:ModuleManager. With ModuleManager you can download the module without immediately adding it to the UI. You can also instantiate multiple instances of a module if you have the need. There is only one method of interest for us on ModuleManager called “getModule” that returns an mx.modules.IModuleInfo object.
var info:IModuleInfo = ModuleManager.getModule(moduleURL);
This call does not actually load the module yet. The IModuleInfo object is what we will use to load and instantiate the module and track the loading progress.
You can very easily show loading progress using a mx.controls.ProgressBar. All you need to do is set the source of the progressbar to be the IModuleInfo object like this:
var pb:ProgressBar = new ProgressBar();
pb.source = info;
Now the progressbar control will dynamically update with the loading progress of the module.
To actually start the loading of the module we need to call “load” on the IModuleInfo object. We need to add a couple of event listeners for listen for complete and possible error events.
info.addEventListener(ModuleEvent.READY, modEventHandler);
info.addEventListener(ModuleEvent.ERROR, modErrorHandler);
info.load();
Once we get our READY event we still need to create an instance of the module and add it to our UI. We create an instance by using the factory in the IModuleInfo object. After that we merely need to add it to the UI.
var module:UIComponent = info.factory.create() as UIComponent;
moduleContainer.addChild(module);
We create it as a UIComponent so that our application does not need to know exactly what the module is to use it. In future post I will show how you can create and implement Interfaces that allow two way interaction between the module and the container application.
If your application ever decides it is finished with a module it can unload it. Using the same IModuleInfo object you can call “unload” and listen for the UNLOAD complete event for any cleanup.
info.addEventListener(ModuleEvent.UNLOAD, unloadEventHandler);
info.unload();
In future posts I will also go into how you can reduce the compiled size of your module SWF files when you know they will always be loaded by a specific application.
Below I have included a sample application that loads and unloads my FirstTryModule. The application itself only has two buttons: a load button and an unload button. Clicking the load button will load the module while displaying a progressbar and then add it to the UI. Source is enabled on this project so take look to see how all the code snippets above fit together.
The unload process does not appear to be removing the module from memory. When tracking your app’s memory usage it keeps going up every time one presses the “load module” button (i.e. total memory usage just keeps increasing over time) and never goes down when you press the “unload module” button. I’m having a similar issue using ModuleManager and trying to unload modules I have called and then closed/unloaded.
Hi Michael,
I looked at your blog & the module load/unload application in IE 6.0.
The starting size of the browser was 96 MB, repeatedly loading & unloading
the module many took the browser size to upto 120MB. Are you also seeing
the same behavior ? Is there some memory leak happening inside Flex ?
Thanks.
Sorry it has taken a bit to respond. I have been out of the country.
Yes I have noticed this memory issue as well. I have found the same behavior is some Adobe sample code. I found a reference this in a bug files against adobe here http://bugs.adobe.com/jira/browse/SDK-15537. This links to the original defect which is marked closed and deferred. Perhaps this is something fixed in Flash Player 10.
My sample is compiled for Flash Player 9, which means that even if you have Flash Player 10, this application will run using Flash Player 9 code base and any bugs that existed in Flash Player 9 will still be evident. At Adobe Max last year I learned in one of the sessions that each release of Flash Player contains the code base for each previous version of Flash Player. This is how they keep if backwards compatible.
Unfortunately it’s another broken adobe feature with closed ticket without explanation. I’ve had many problems with Flex so far for which I found nothing but closed jira tickets. It all ended up with workaround, hacks etc. - messy code in general. Looks like adobe either can’t finish up everything as they should or … don’t want to.
Anyway - great post Michael!
[...] last post involved turning an existing sample application into a module. Let’s build a little bit upon [...]
Hi,
I’m quite new when it comes to flex development, but i would like to switch from html/jquery/php back-end to flex/php. And of course, using modules seems the right thing to do.
I understood how to load/unload one module into an application using moduleManager. But i have the following issue.
I’m using tabNavigator to provide access to different sections of the back-end of the project, each tab loading a different module (for example: content.swf, news.swf, users.swf). Each module from each tab will provide access to other modules and so on. Your example (and all provided by adobe) shows how to load/unload ONE module when you click A button.
What i cannot figure out is how to load multiple modules into the tabNavigator (HBox, VBox, whatever) using moduleManager. Note that the tabs will only provide an overview (dashboard) of the module accessed and some links to other modules (sub sections, add/edit/delete operations etc).
Can you please provide some useful tips on how to do this?
Hope i made myself clear about the issue i have, and thanks in advance
Hi again,
I managed to fix it, by assigning variables to the function(s). Should anyone needs help i’ be glad to help.
Thanks anyway.
Have a nice day
Andrei,
From what I understand you want to dynamically load each of your modules into a tab of a tab navigator. Each module won’t actually get loaded until the user selects the tab for that particular module. If this is not correct and you want all your modules loaded as soon as the webpage loads, I’d say you won’t want to use modules. Instead you would just want to have everything in the same Flex application.
I’ll assume you want to do my first assumption and load the modules dynamically. What I would do is create a new action script class that extends canvas. Basically add all the module loading code from the example into this new class. Create a public bindable string var for the path of the module to load. On creationComplete for the canvas invoke the module loading code using the string var as the module to load.
In your main app where you will have you tab navigator you have a couple of options.
If you have a static layout for your tabs you can just add all the tabs you want right in mxml for the tab navigator. Each tab entry will be an instance of your new actionscript class and you can specify the name of the module to load in mxml using the public string property on the class. The tab navigator by default will not create the tab content until the user clicks on each tab. This will cause the creationComplete event to fire on your actionscript class which will in turn load the appropriate module.
If you want the tab content to be more dynamic, you use action script to dynamically create an instance of your actionscript class, set the module to load, and add it to the tab navigator. Adding the class to the stage will also cause the creeationComplete event to fire and in turn cause the module load.
Hope that helps.
Mike
Hi Michael Karn,
I have done almost similar to what you have said.
I have SuperTabNavigator from FlexLib. and a custom canvas, which has Moduleloader as a child
The application has menu, when user clicks the menu I add a custom canvas as a child to supertabnavigator and from the menu data i get the module url and set it to the Module loader in the canvas, so the module get loaded.
All this works perfectly. So in similar fashion I can load modules as tabs in the tabnavigator on menu click.
On close tab event I unload the module. but it still does not get unloaded. if there is a change in i need to close the application reload it and open the module for changes to reflect.
I would like the module to be reloaded from server.
All modules are loaded in current domain of the application
please help on how to unload it completely.
If required, i can provide you the codes
Hi Kannan,
It can be tricky to build a module in a way that allows it to be unloaded completely.
This post on Adobe blogs by Alex Harui has the best explanation I’ve seen about how to get your modules to unload.
http://blogs.adobe.com/aharui/2009/08/what_we_know_about_unloading_m.html
Hope it helps.
Mike