Air Window control

In this post I will try to describe the window types that we can create on Adobe Air by using Flex Builder and the Flex framework. This is a reference for me so if you think I miss some points please feel free to comment above. Air 1.5 Cookbook by O’reilly will be next to me as I go through this post. *

The First Window is automatically created by AIR.
The properties of this window can be set on the application descriptor file under the initialWindow node(The app descriptor file is named after the project name -”project name”.xml and is located on the src folder of the project).
Those properties are title, systemChrome, transparent, visible, minimizable, maximizable, resizable, width, height, x, y, minSize, maxSize and some others. Many of these properties have a default value which is the most useful for most of the cases so you don’t have to bother. The only required attribute for the initialWindow node is the content (the path to the swf/html file) but if you are using Flex Builder, Flash IDE or DreamWeaver they manage to do the job for you!

Other Windows:

NativeWindow: creates a native operating system window.
We instantiate the NativeWindow class and pass the constructor a NativeWindowInitOptions object.
That object contains the properties of the look and feel of the window.
These properties are: maximizable, minimizable, resizable, systemChrome, transparent, type(normal, utility, lightweight).

Here is a simple example:

xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”createAnotherWindow()” title=”Core Window“>


private function createAnotherWindow():void
{
//properties fot the new window
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.maximizable = true;
options.minimizable = true;
options.resizable = true;
options.systemChrome = NativeWindowSystemChrome.STANDARD;
options.transparent = false;
options.type = NativeWindowType.NORMAL;
//the new window
var window:NativeWindow = new NativeWindow(options);
window.title = "Second Window";
window.width = 200;
window.height = this.nativeWindow.height;
window.x = this.nativeWindow.x + this.nativeWindow.width;
window.y = this.nativeWindow.y;
//show it
window.activate();
}
]]>

There are 3 types of windows in AIR and they are defined on theNativeWindowInitOptions type property.

Normal: Appears on the Windows taskbar or the Mac window menu. Chrome from the operating system is used and it looks like that:

Utility: Does not appear on the Windows taskbar or the Mac window menu. Chrome from the operating system is used but in a lighter version (there are no minimize/maximize btns etc).

Lightweight**: Does not appear on the Windows taskbar nor on the Mac window menu, it doesn’t use the system chrome and it “looks” like that:

**Remember that in order to have a Lightweight window we have to set the systemChrome to false.

Notice that the core window doesn’t have focus and that is because I clicked on the Lightweight window which is completely transparent but it exists and it stands on the right side of the core window!

All examples above have being created with the exact same code as the example provided, the only difference between the 3 of them is the type property and in the case of the Lightweight window I also had to change the NativeWindowSystemChrome from STANDARD to NONE.

From now on we can add whatever we like on each stage of each window just by referring to it like that:

window.stage.addChild(”something to add”);

The Flex Framework offers 2 classes for windows, the WindowedApplication and the Window.

As in our example the WindowedApplication acts as the application container for our Flex-based Air app. So the content of that container is actually the content of our initial window. We can use the Window component as a container for additional windows that we might need and we should keep in mind that this component CANNOT be nested inside anyting else because it is a top-level layout container!

Both of these classes have an underline NativeWindow object that they use for creating and controlling the native OS windows. We gain access on that NativeWindow object by using the stage.nativeWindow property of any display object.

As a best practice as I can think and as the Air CookBook suggests is that we should create the extra windows as a separate components based on the tag and activate them when we need them via MXML or AS.

At first I create an mxml component in a folder called components under the src folder which looks like that:

 xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” width=”800” height=”600” title=”BrowserWindow“>


private var url:String;
public function set theUrl(url:String):void
{
this.url = url;
browser.location = url;
}
public function get theUrl():String
{
return(this.url);
}
]]>

 text=”MY BROWSERWINDOW” fontWeight=”bold” fontSize=”17” textAlign=”center” width=”100%” height=”50“/>
 id=”browser” width=”100%” height=”100%“/>

Then I use that component via Actionscript:

 xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init()”>


import components.BrowserWindow;
private function init():void
{
var browser:BrowserWindow = new BrowserWindow();
browser.open(true);
browser.theUrl = "http://www.macromedia.com";
}
]]>

..or via MXML like that:

private function init():void
{
browserWindow.open(true);
browserWindow.theUrl = "http://www.macromedia.com";
}
]]>

* This post was meant to be a lot bigger but since its in my drafts for over 2 weeks I thought I should release it and when I’ll find some time to extend it more I’ll do it. From the start of writing this post I upgrade WordPress to 2.7 (awesome guys), moved to (mt) (love them so far), traveled 400 kms away from my base in Athens and it took me only 45 minutes since I used a plane for the 1st time for this trip and I spend MANY hours to find a decent WordPress plugin that can format nicely MXML + AS3 in order for you to be able to just copy and paste the code but I finally decided to not use any of them simply because they dont do the job I want.

Thanks for reading, cheers to a happy, flashy, flexy and sexy 2009 full of love, piece and Flash baby Player goodness. 

Be proud and thankful for the best piece of software out there.. the one and only 

Macromedia – Adobe Flash Player!

original post from  http://blog.savvasmalamas.com/2009/01/01/air-windows/