Saturday, April 2, 2011

Working with windows in AIR: Part 7

In this tutorial we will learn how to sort the created windows with our AIR application.

Usually, the focused window is always shown on top of the other windows, and the user prefers to be able to sort the windows how he likes.

However, there are situations when it is better to sort the windows with code. For example, when a new window pops up, we want to put it on top of the rest windows; or you have an important window that has data, which the user needs to always be able to see, and you need to always keep this window on top of the others, even if it is not focused.

There are multiple methods (and a property) that can be used for sorting the windows:

  • orderToFront() - put this window on top of the other windows of this AIR application
  • orderToBack() - put this window behiond the other windows of this AIR application
  • orderInFrontOf(window:IWindow) - put this window on top of the other specified window
  • orderInBackOf(window:IWindow) - put this window behind the other specified window
  • alwaysInFront - have this window on top of all the other windows on the desktop at all times

When you have a lot of windows opened at the same time along with an AIR application that spawns its own windows, and if you keep changing focuses of the windows - your AIR pop-ups can get lost in the crowd. It would be a lot easier for the user if all the sub-windows of your application came up with the main application window. So, to put all the sub-windows of your AIR application on top, the user only has to focus on the main window.

We can do that by listening to the ACTIVATE event that the nativeWindow throws out once it is focused.

Here's the code we use for creating the window:

var myOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myOptions.type = NativeWindowType.UTILITY;
myOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
myOptions.transparent = false;

var myWindow:NativeWindow = new NativeWindow(myOptions);
myWindow.width = 200;
myWindow.height = 200;
myWindow.x = (stage.fullScreenWidth - myWindow.width)/2;
myWindow.y = (stage.fullScreenHeight - myWindow.height)/2;

var myText:TextField = new TextField();
myText.text = "Hello world!";

myWindow.stage.addChild(myText);
myWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
myWindow.stage.align = StageAlign.TOP_LEFT;

myWindow.activate();

And now, the part where we put all the windows to the front:

this.stage.nativeWindow.addEventListener(Event.ACTIVATE, frontAll);

function frontAll(evt:Event):void
{
var allWindows:Array = NativeApplication.nativeApplication.openedWindows;
for (var i:int = 0; i<allWindows.length; i++)
{
allWindows[i].orderToFront();
}
}

And here's the full code:

import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.display.NativeWindow;
import flash.display.NativeWindowSystemChrome;
import flash.text.TextField;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.desktop.NativeApplication;

var myOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myOptions.type = NativeWindowType.UTILITY;
myOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
myOptions.transparent = false;

var myWindow:NativeWindow = new NativeWindow(myOptions);
myWindow.width = 200;
myWindow.height = 200;
myWindow.x = (stage.fullScreenWidth - myWindow.width)/2;
myWindow.y = (stage.fullScreenHeight - myWindow.height)/2;

var myText:TextField = new TextField();
myText.text = "Hello world!";

myWindow.stage.addChild(myText);
myWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
myWindow.stage.align = StageAlign.TOP_LEFT;

myWindow.activate();

this.stage.nativeWindow.addEventListener(Event.ACTIVATE, frontAll);

function frontAll(evt:Event):void
{
var allWindows:Array = NativeApplication.nativeApplication.openedWindows;
for (var i:int = 0; i<allWindows.length; i++)
{
allWindows[i].orderToFront();
}
}

And that's how you do it.

Thanks for reading!

Related:

Working with windows in AIR: Part 1
Working with windows in AIR: Part 2
Working with windows in AIR: Part 3
Working with windows in AIR: Part 4
Working with windows in AIR: Part 5
Working with windows in AIR: Part 6
Working with windows in AIR: Part 8
Working with windows in AIR: Part 9
Working with windows in AIR: Part 10
Working with windows in AIR: Part 11
Working with windows in AIR: Part 12

No comments:

Post a Comment