All About AIR, Flex, and Flash

Apollo Multi-Window Support using Flex

March 30th, 2007 | Category: AIR, Flex, Tutorial

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):

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
  3. layout="absolute">
  4. <mx:Script>
  5. <![CDATA[
  6. // see below...
  7. ]]>
  8. </mx:Script>
  9. <mx:Button label="createNewWindow"
  10. enabled="{!newWindow}"
  11. click="createNewWindow()" />
  12. <!-- This canvas is not visible. We are just using it to
  13. initialize the instance of our new component. Once it
  14. is created, we remove it from this canvas and add it
  15. to the window. -->
  16. <mx:Canvas id="hiddenCanvas"
  17. visible="false" />
  18. </mx:ApolloApplication>

PLAIN TEXT
Actionscript:
  1. import mx.managers.FocusManager;
  2.  
  3. [Bindable] private var newWindow:NativeWindow;
  4. private var component:TestComponent;
  5. private var componentFocusManager:FocusManager;
  6.  
  7. // This function gets called when the button in the first
  8. // window is clicked.
  9. public function createNewWindow():void
  10. {
  11. // To make things easy for this demo, I am just checking
  12. // to see if the window is already open. If it is, I
  13. // don't do anything.
  14. if( !newWindow )
  15. {
  16. newWindow = new NativeWindow( true,
  17. new NativeWindowInitOptions() );
  18.  
  19. // Make sure and set the stage alignment and scale
  20. // mode so that the Flex component we add to the
  21. // window appears correctly.
  22. newWindow.stage.align = StageAlign.TOP_LEFT;
  23. newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
  24.  
  25. // Here is the secret sauce. Create a new instance
  26. // of a component which in this example is TestComponent,
  27. // an MXML component in the TestComponent.mxml file (not
  28. // shown.) Add it to our hidden canvas and then remove
  29. // it. This makes sure the component initializes based
  30. // on the current stage that the base Application refrences.
  31. component = new TestComponent();
  32. hiddenCanvas.addChild( component );
  33. hiddenCanvas.removeChild( component );
  34.  
  35. // Now we add that component to the new NativeWindow's
  36. // stage and register to know when the NativeWindow resizes.
  37. newWindow.stage.addChild( component );
  38. newWindow.addEventListener( NativeWindowBoundsEvent.RESIZE,
  39. handle_windowResize );
  40.  
  41. // We want to make focus management work inside the
  42. // new window. So we create a new FocusManager for the
  43. // component. This doesn't 100% work, but it atleast
  44. // allows you to tab through most components.
  45. component.focusManager = new FocusManager( component, true );
  46. component.focusManager.activate();
  47. component.focusManager.showFocus();
  48. }
  49. }
  50.  
  51. public function handle_windowResize(
  52. event:NativeWindowBoundsEvent ):void
  53. {
  54. // The window resized, so lets make sure and resize
  55. // the Flex component.
  56. component.width = newWindow.stage.stageWidth;
  57. component.height = newWindow.stage.stageHeight;
  58. }

11 Comments so far

  1. Renaun Erickson March 30th, 2007 8:18 am

    Also when resizing the ScrollBars do weird things.

  2. Daniel Dura March 30th, 2007 8:24 pm

    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.

  3. todd anderson April 5th, 2007 5:05 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…

  4. dispatchEvent » Can’t-Wait Apollo Features April 6th, 2007 7:45 am

    […] 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)! […]

  5. Sean Voisen April 10th, 2007 3:10 pm

    Thanks for this :) I wondered what the heck was going on when I tried to do some NativeWindow stuff after ApolloCamp.

  6. Walt Schlender May 4th, 2007 1:33 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.

  7. Caleb May 15th, 2007 1:18 pm

    Danny,

    Any idea why PieCharts don’t display when opened in this manner?

  8. greg May 20th, 2007 7:02 am

    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.

  9. greg May 20th, 2007 7:04 am

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

  10. greg May 20th, 2007 7:25 am

    Walt: even easier is newWindow.alwaysInFront

  11. skg_rocks November 30th, 2007 10:49 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

Leave a reply