Apollo Multi-Window Support using Flex

One of the most exciting features of Apollo is support for applications which have multiple native windows. Currently when using Flex in the browser, you are limited to using PopUpManager or rolling your own MDI architecture. With Apollo, your application can look more like, well… a native application. Each window will appear in the task bar on Windows, have a tab and z-order, etc.

An existing issue in the Apollo alpha that you may struggle with if you are doing Flex development, is that the Flex Framework does not currently support Apollo’s NativeWindow implementation. The issue stems from the fact that now your Apollo application can have multiple stages and the Flex framework which was originally developed for the browser player doesn’t take this into consideration. Right now if you try to add Flex content, such as a custom Flex component, to a new windows stage you will get unexpected and broken behavior.

Now, I wouldn’t bring this up unless I had a solution. But before I show you that, a few caveats: a future release of the Flex Framework will formally support multiple windows. If you are looking at this article and there is currently a post-alpha Apollo release, please check the docs first to see if Flex officially supports multiple native windows. Another caveat: You will still run into a few issues and bugs when using this technique. For example, PopUpManager may not work properly in new NativeWindow instances.

On to the code (the comments should explain what is going on):

[xml]

[/xml]

[as]
import mx.managers.FocusManager;

[Bindable] private var newWindow:NativeWindow;
private var component:TestComponent;
private var componentFocusManager:FocusManager;

// This function gets called when the button in the first
// window is clicked.
public function createNewWindow():void
{
// To make things easy for this demo, I am just checking
// to see if the window is already open. If it is, I
// don’t do anything.
if( !newWindow )
{
newWindow = new NativeWindow( true,
new NativeWindowInitOptions() );

// Make sure and set the stage alignment and scale
// mode so that the Flex component we add to the
// window appears correctly.
newWindow.stage.align = StageAlign.TOP_LEFT;
newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

// Here is the secret sauce. Create a new instance
// of a component which in this example is TestComponent,
// an MXML component in the TestComponent.mxml file (not
// shown.) Add it to our hidden canvas and then remove
// it. This makes sure the component initializes based
// on the current stage that the base Application refrences.
component = new TestComponent();
hiddenCanvas.addChild( component );
hiddenCanvas.removeChild( component );

// Now we add that component to the new NativeWindow’s
// stage and register to know when the NativeWindow resizes.
newWindow.stage.addChild( component );
newWindow.addEventListener( NativeWindowBoundsEvent.RESIZE,
handle_windowResize );

// We want to make focus management work inside the
// new window. So we create a new FocusManager for the
// component. This doesn’t 100% work, but it atleast
// allows you to tab through most components.
component.focusManager = new FocusManager( component, true );
component.focusManager.activate();
component.focusManager.showFocus();
}
}

public function handle_windowResize(
event:NativeWindowBoundsEvent ):void
{
// The window resized, so lets make sure and resize
// the Flex component.
component.width = newWindow.stage.stageWidth;
component.height = newWindow.stage.stageHeight;
}
[/as]