środa, 28 października 2009

Add flex content in AIR to NativeWindow without using mx:Window

The core to do that is WindowedSystemManager class and it's implementation in our TestWindow.as class.
Have a look how the class is initialized in createChildren() method. The main container here is Canvas but can be anything I think even single button or label I think (didn't tested out but feel free to check).

package
{
import flash.display.NativeWindow;
import flash.display.NativeWindowInitOptions;
import flash.events.Event;

import mx.containers.Canvas;
import mx.events.FlexEvent;
import mx.managers.WindowedSystemManager;

[Event(name="creationComplete", type="mx.events.FlexEvent")]

public class TestWindow extends NativeWindow
{
private var systemManager:WindowedSystemManager;

private var windowFlexContainer:Canvas;

private var childrenCreated:Boolean = false;

public function TestWindow(initOptions:NativeWindowInitOptions = null)
{
var options:NativeWindowInitOptions;
initOptions == null ? options = new NativeWindowInitOptions() : options = initOptions;

super(options);

addEventListener(Event.ACTIVATE, windowActivateHandler);
}

private function windowActivateHandler(event:Event):void {
event.preventDefault();
event.stopImmediatePropagation();
removeEventListener(Event.ACTIVATE, windowActivateHandler);
if(stage) {
createChildren();
stage.addEventListener(Event.RESIZE, windowResizeHandler);
}
}

private function createChildren():void {
if(!windowFlexContainer) {
windowFlexContainer = new Canvas();
}

if(!systemManager) {
systemManager = new WindowedSystemManager(windowFlexContainer);
}

stage.addChild(systemManager);

windowFlexContainer.width = stage.stageWidth;
windowFlexContainer.height = stage.stageHeight;

stage.addChild(windowFlexContainer);

childrenCreated = true;

dispatchEvent(new FlexEvent(FlexEvent.CREATION_COMPLETE));
}

private function windowResizeHandler(event:Event):void {
windowFlexContainer.width = stage.stageWidth;
windowFlexContainer.height = stage.stageHeight;
}

public function get container():Canvas {
return windowFlexContainer;
}

public function destroy():void {
removeEventListener(Event.RESIZE, windowResizeHandler);
windowFlexContainer.removeAllChildren();
stage.removeChild(windowFlexContainer);
stage.removeChild(systemManager);
windowFlexContainer = null;
systemManager = null;
}
}
}

This is fast typed so there is no way now to fully support flex-mxml work flow and to have children automatically added in code. Maybe I will extend it later to fully support adding mxml content. So now we simply create our TestWindow in mxml and add children manually when component is created.


creationComplete="testwindow2_creationCompleteHandler(event)">

import mx.events.FlexEvent;

protected function testwindow2_creationCompleteHandler(event:FlexEvent):void
{
container.addChild(label);
}

]]>




Well this is basic. And unlike mx:Window our component is not extending UIComponent but it's extending NativeWindow.
To run this component we create simple application with button great job doing button:




import flash.events.MouseEvent;

protected function button1_clickHandler(event:MouseEvent):void
{
var w:Test = new Test();
w.activate()
}

]]>




As you can see when you compile those three classes It's working :)
Peace.

1 komentarz: