Loading Flex Modules into MDIWindows
Phil Chertok on June 11, 2009
3 Comments
Here at A51 we are currently working on a Flex project that requires many external modules to be loaded into our application. Once a module has been loaded it needs to be displayed in a MDIWindow. The MDIWindow class is part of the FlexLib project. Because we are loading so many different modules we handle the loading of the modules through Actionscript rather than using the <mx:ModuleLoader /> tag. This is what that code looks like:
//We need to store a reference to the module loader otherwise garbage collection destroys the module loader and ModuleEvent.READY does not fire private var _assetModule:IModuleInfo; //Loads a module based on the provided string private function loadModule($module:String):void { _assetModule = ModuleManager.getModule($module); //Event for when the module has loaded _assetModule.addEventListener(ModuleEvent.READY, moduleReady); //Listen for any type of error from our module _assetModule.addEventListener(ModuleEvent.ERROR, moduleError, false, 0, true); //Display our busy cursor cursorManager.setBusyCursor(); //Load the module _assetModule.load(); }
Once that is done we need to create a window, add our loaded module to the window and then add the window the the WindowManager. This is how we do it:
//Fired when our module has completed loading private function moduleReady(event:ModuleEvent):void { //Cast the module as a DisplayObject so we don't need to import the actual class information of our Modules var loadedModule:DisplayObject = IModuleInfo(event.currentTarget).factory.create() as DisplayObject; //Create an MDI window var win:MDIWindow = new MDIWindow(); //Give our window a nice initial width/height win.width = 640; win.height = 480; //Add the component to the window win.addChild(loadedModule); //Add the window to our window manager windowCanvas.windowManager.add( win as MDIWindow ); //Rest the mouse cursor cursorManager.removeBusyCursor(); }
Now we have external modules in our windows. Just make sure to set the width/height of your module to 100% in order to ensure the module fits nicely into the MDIWindow.
You can view an example of this in action here. Remember to right click to view source.

April 30th, 2010 @ 8:05 PM
FYI — View source doesn’t have the code in it
May 15th, 2010 @ 9:32 AM
Fixed and thx for the heads up!
June 24th, 2010 @ 6:01 PM
hey man, just came across this. Thanks so much for posting! This was exactly what I was trying to do. Worked extremely well.