In this tutorial, we will show you the "UNIQUE Multiple Window Support" in AFS， namely Mutiple Native Windows in single AVM.

Prerequisite

Before you go further, ensure you have read Helloworld tutorial, and know how to build a flash projector with AFS.

Introduction

Let's look at the main window of MultiWindow project. It is built from a Flex projects. There is three buttons and some textInput controls. If you click "Create Child Window" button, a new child window will be created. If you move or resize the new child window, the texts in the textInput controls will change. by inputing values into the textInput controls and clicking "Adjust Child Window" button, the position and size of the child window will change as you wish. The last amazing things is, if you click "Swap content" button, The contents in the main window and child window will swap each other.

Main Window



Child Window

Code - MultiWindow.mxml

Following is the actionscript code for the multiwindow project. In order to build it successfully, you should add AFS framework library to build library path. The AFS framework library is located at sdk/framework/framework.swc in the installed Directory of AFS, typically "C:\Program Files\aSyncRIA\Async Flash Studio". You should also call com.asyncria.AFS.init before using AFS API.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()">
	<mx:Script>
		<![CDATA[
			import com.asyncria.AFS;
			import com.asyncria.windowsystem.Window;
			import com.asyncria.windowsystem.WindowInitOptions;
			
			import mx.core.UITextField;
			
			[Bindable]
			private var _childWindow:Window;
			
			private function onInit():void
			{
				AFS.init(this.parent.stage);
			}
			
			private function onAdjustChild(e:Event):void
			{
				if (!_childWindow)
					return;
					
				_childWindow.x = Number(textLeft.text);
				_childWindow.y = Number(textTop.text);
				_childWindow.width = Number(textWidth.text);
				_childWindow.height = Number(textHeight.text);
			}
			
			private function onCreateChild(e:Event):void
			{
				var windowInitOptions:WindowInitOptions = new WindowInitOptions;
				windowInitOptions.title = "Child Window";
				windowInitOptions.sameAVM = true;
				_childWindow = new Window(windowInitOptions);
			
				var text:UITextField = new UITextField;
				text.text = "Move and Resize me!!";
				
				_childWindow.stage.addEventListener(Event.RESIZE, onResize);
				_childWindow.stage.addChild(text);
			}
			
			private function onResize(e:Event):void
			{
				var windowStage:Sprite = e.target as Sprite;
				var content:DisplayObject = windowStage.getChildAt(0);
				content.width = windowStage.width;
				content.height = windowStage.height;
			}

			
			private function onSwap(e:Event):void
			{
				if (_childWindow)
				{
					var window:Window = Window.getWindow(this);
					
					var content1:DisplayObject = window.stage.removeChildAt(0);
					var content2:DisplayObject = _childWindow.stage.removeChildAt(0);
					
					window.stage.addChild(content2);
					_childWindow.stage.addChild(content1);	
				}
			}
		]]>
	</mx:Script>
	<mx:Label x="22" y="64" text="Left" width="45"/>
	<mx:Label x="22" y="90" text="Top" width="45"/>
	<mx:TextInput x="75" y="62" id="textLeft" text="{_childWindow.x}" />
	<mx:TextInput x="75" y="88" id="textTop" text="{_childWindow.y}" />
	<mx:Label x="22" y="118" text="Width" width="45"/>
	<mx:Label x="22" y="144" text="Height" width="45"/>
	<mx:TextInput x="75" y="116" id="textWidth" text="{_childWindow.width}" />
	<mx:TextInput x="75" y="142" id="textHeight" text="{_childWindow.height}" />
	<mx:Button x="60" y="187" label="Adjust Child Window" click="onAdjustChild(event)"/>
	<mx:Button x="22" y="20" label="Create Child Window" click="onCreateChild(event)"/>
	<mx:Button x="172" y="20" label="Swap Content" click="onSwap(event)"/>
	
</mx:Application>