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]

12 thoughts on “Apollo Multi-Window Support using Flex

  1. One way you can avoid that is to turn the verticalScrollPolicy and horizontalScrollPolicy to ‘off.’ If you need scroll bars on your base component, then that won’t help. But I have found that most of the time this is an adequate solution.

  2. Hey Daniel.

    Another work around may be to use an AS component extending UIComponent (or subclass) that listens for an Event.ADDED_TO_STAGE event and calls UIComponent:createChildren

    public function TestComponent()
    {
    super();
    addEventListener( Event.ADDED_TO_STAGE, init );
    }

    private function init( evt:Event ):void
    {
    createChildren();
    }

    protected override function createChildren():void
    {
    super.createChildren();
    // create elements…
    }

    This will lose the inherent layout capability that’s within MXML component, but won’t have to go through the add/remove process. I’m curious if that is considered bad practice, or will fault somewhere i am not aware of…

  3. I think this is somewhat related — I was wondering if it’s possible to set the topmost property on apollo NativeWindows so that you can create a window which is always on top of all other desktop windows.

  4. Walt: while hunting for scroll policies on an htmlControl inside a native window I found newWindow.stage.window.orderToFront(). Don’t know what it does, but may be what you’re looking for.

  5. Getting back to scrollers, do you know why an htmlControl as my ‘testcomponent’ doesn’t show scrollbars in a nativeWindow?

  6. Hello Sir,

    Thank you for the post.

    I tried what you have posted here but it can’t make it work. I’m trying to add a flex custom component as child, but it never appears. My custom component is based on mx:canvas. I’m using latest version of Flex 3 IDE and AIR.

    Could you please post some sample code?

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s