flex 4 air app open modules in a new modal window - apache-flex

Question

I am new to flex and I am trying to open modules in a new window modal.
I have managed to load and add a module in a container ( vbox ) but what I really need is to open them in separate windows.
All posts that I could find are samples on how to load modules but nothing on how to show them.
I found a post here
Modules and Panels issue
and it looks by the screenshot exactly what I am looking for.
Thanks for your help.

Answer 1

I found a way of doing this.
Thanks for all the pointers
here is how I did it for all of you to see and maybe use. If you have suggestions to make it better, do not hesitate to comment.
I am using a component : collapsabletitlewindow
mainapp.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="de.aggro.components.*">
<fx:Script>
<![CDATA[
import de.aggro.components.*;
private function createWindow():void{
var w:window = new window;
w.title = "Window " + container.numChildren;
container.addChild(w);
}
]]>
</fx:Script>
<components:CollapsableTitleWindowContainer id="container" width="100%" height="100%" >
</components:CollapsableTitleWindowContainer>
<s:Button buttonDown="createWindow()" label="Create Window" />
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
window.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:CollapsableTitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="de.aggro.components.*" layout="absolute" width="400" height="300"
creationComplete="initApp()" >
<fx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import mx.modules.ModuleManager;
import mx.modules.IModuleInfo;
import mx.core.IVisualElement;
public var info:IModuleInfo;
private function initApp():void {
info = ModuleManager.getModule("mod.swf");
info.addEventListener(ModuleEvent.READY, modEventHandler);
/* Load the module into memory. Calling load() makes the
IFlexModuleFactory available. You can then get an
instance of the class using the factory's create()
method. */
info.load(null, null, null, moduleFactory);
}
/* Add an instance of the module's class to the display list. */
private function modEventHandler(e:ModuleEvent):void {
this.addElement(info.factory.create() as IVisualElement);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</components:CollapsableTitleWindow>
mod.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:LinkButton x="131" y="124" label="Module link"/>
</s:Module>