flex 4 air app open modules in a new modal window

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.

When you say "Modules" are you referring to actual Modules ( http://livedocs.adobe.com/flex/3/html/help.html?content=modular_5.html ) which are really like separate applications; or are you using the term generically to refer to a different view? When you say new Window do you mean a new browser Window? Or a new instance of your application? Or just a window that is still contained in the same application, but resides above it? — JeffryHouser, May 27 '12 at 01:31
A window that is still contained in the same application and that resides above it, yes — gfbaggio, May 27 '12 at 02:56
Use the PopUpManager: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html — JeffryHouser, May 27 '12 at 14:19
I did try that but it never seams to work, I would ready appreciate some sample code. Thanks. — gfbaggio, May 27 '12 at 15:38
How about you share what you've done and we can, perhaps, point out why it didn't work? Here are some PopUpManager samples: http://blog.flexexamples.com/category/popupmanager/ — JeffryHouser, May 27 '12 at 17:09

score 0 · Answer 1 · answered Jun 02 '12 at 01:08

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>

flex 4 air app open modules in a new modal window

1 Answers1