Air Windows..

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:

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”createAnotherWindow()” title=”Core Window>
<mx:Script>
<![CDATA[
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();
}
]]>
</mx:Script>
</mx:WindowedApplication>


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 <mx:Window> 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:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Window xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” width=”800” height=”600” title=”BrowserWindow>
<mx:Script>
<![CDATA[
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);
}
]]>
</mx:Script>
<mx:Label text=”MY BROWSERWINDOW” fontWeight=”bold” fontSize=”17” textAlign=”center” width=”100%” height=”50/>
<mx:HTML id=”browser” width=”100%” height=”100%/>
</mx:Window>

Then I use that component via Actionscript:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init()”>
<mx:Script>
<![CDATA[
import components.BrowserWindow;
private function init():void
{
var browser:BrowserWindow = new BrowserWindow();
browser.open(true);
browser.theUrl = “http://www.macromedia.com”;
}
]]>
</mx:Script>
</mx:WindowedApplication>

..or via MXML like that:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:browser=”components.*”>
<mx:Script>
<![CDATA[
private function init():void
{
browserWindow.open(true);
browserWindow.theUrl = “http://www.macromedia.com”;
}
]]>
</mx:Script>
<browser:BrowserWindow id=”browserWindow” creationComplete=”init();”/>
</mx:WindowedApplication>

* 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!

Savvas

4 thoughts on “Air Windows..”

  1. Hi,

    I like your separation and exemplifying different type of windows. Thanks for the post. I would like know what you would suggest if I need make an initial splash screen.

  2. Hello Newton and thanks for the comment!
    BTW what a nice name 🙂

    For the initial screen you could use just a sprite-movieclip to present something to the users. I guess a custom chrome app with an “initial” window could do the job and then after some time or if the user clicks on this you could kill that screen and present the normal init window of your app right? Let me know if you do it some other way. Its always nice to share stuff. Thats how and why I understand, respect and love the Flash community! 🙂
    Take care

  3. It’s worth noting, that in order to have a lightweight or utility window you need to pass this information through before the window is created. Doing this in MXML you can’t use a constant, and have to use plain text:

    This will work:
    type=”utility”

    This won’t work
    type=”{NativeWindowType.UTILITY}”

    It caught me for ages as I was getting the window appear in the task bar on Windows XP, even when I though I was using utility and lightweight.

    Hopefully this will help someone else!

  4. I am working on an application where components have to added/ removed from the main application window and added to new windows.

    The issue I am facing is with Comboboxes, DataGridEvent.COLUMN_STRETCH, tooltips all show up in the main application window rather than the popped up window.
    I am using mx:Windows and mx:WindowedApplication.

    Please let me know If you have any thought about it.

    For more detail view below link:-

    http://stackoverflow.com/questions/2507435/air-desktop-application-related-to-window-component-need-some-work-around

    Any suggestion.

Leave a Reply

Your email address will not be published. Required fields are marked *