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 version="1.0" encoding="utf-8"?>
-
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="absolute">
-
<mx:Script>
-
<![CDATA[
-
// see below...
-
]]>
-
</mx:Script>
-
<mx:Button label="createNewWindow"
-
enabled="{!newWindow}"
-
click="createNewWindow()" />
-
<!-- This canvas is not visible. We are just using it to
-
initialize the instance of our new component. Once it
-
is created, we remove it from this canvas and add it
-
to the window. -->
-
<mx:Canvas id="hiddenCanvas"
-
visible="false" />
-
</mx:ApolloApplication>
-
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;
-
}
Also when resizing the ScrollBars do weird things.
Renaun Erickson
30 Mar 07 at 8:18 am
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.
Daniel Dura
30 Mar 07 at 8:24 pm
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…
todd anderson
5 Apr 07 at 5:05 pm
[...] Update: I was thankfully wrong about cross window applications, even in the alpha. Adding Flex components requires a pretty straightforward workaround. Daniel Dura’s approach. Todd Anderson’s approach. Ask (a stupid question) and ye shall receive (an answer from the internets)! [...]
dispatchEvent » Can’t-Wait Apollo Features
6 Apr 07 at 7:45 am
Thanks for this :) I wondered what the heck was going on when I tried to do some NativeWindow stuff after ApolloCamp.
Sean Voisen
10 Apr 07 at 3:10 pm
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.
Walt Schlender
4 May 07 at 1:33 pm
Danny,
Any idea why PieCharts don’t display when opened in this manner?
Caleb
15 May 07 at 1:18 pm
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.
greg
20 May 07 at 7:02 am
Getting back to scrollers, do you know why an htmlControl as my ‘testcomponent’ doesn’t show scrollbars in a nativeWindow?
greg
20 May 07 at 7:04 am
Walt: even easier is newWindow.alwaysInFront
greg
20 May 07 at 7:25 am
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
skg_rocks
30 Nov 07 at 10:49 am