Tuesday, March 29, 2011

Working with windows in AIR: Part 3

Last time we've learned how to open a new window. Now, we will learn how to add content to it.

The NativeWindow object has a property called stage, which you can use to refer to the object, that is the container of the content of the window.

Let's add a text field object to our window:

import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.display.NativeWindow;
import flash.display.NativeWindowSystemChrome;
import flash.text.TextField;

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;

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

myWindow.stage.addChild(myText);

myWindow.activate();

You will see that the new window that pops up now has the text displayed in it.

However, the text has been scaled and is now much bigger than we've expected.



This is because the contents of the new window are scaled by default. This happens when we manually set the width and height of the window - the contents are scaled relatively to the initial window size.

To fix that, we can use the scaleMode property of the stage object. So, if we don't want the content to be scaled, we can set it to StageScaleMode.NO_SCALE. Additionally, we will need to set the alignment of the content to TOP_LEFT.

myWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
myWindow.stage.align = StageAlign.TOP_LEFT;

The results:



And the full code is:

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;

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;

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();

Thanks for reading!

Related:

Working with windows in AIR: Part 1
Working with windows in AIR: Part 2
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 7
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