FiftyOneReasons

Interactive Media Development + Exploration

Loading Flex Modules into MDIWindows

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.

Comments

James

FYI — View source doesn’t have the code in it

Wayne Helman

Fixed and thx for the heads up!

Josh

hey man, just came across this. Thanks so much for posting! This was exactly what I was trying to do. Worked extremely well.


Leave Your Mark




Feel free to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">