Sunday, April 3, 2011

Working with windows in AIR: Part 8

Today we will learn how to move windows.

As you may already know, there are x and y properties for a nativeWindow object. This lets us manipulate the position any way we want - we can even make the window move around in circles on the user's screen if we want to. Usually, windows of any application are moveable by the user. If your window is using the default system chrome - the user will be able to move the window around by clicking and holding his mouse down on the head bar of the window.

However, if you have a lightweight type of window with no system chrome, you'll need to add the moving feature yourself. You could use the x and y properties, however, it is much easier and better to use a built-in method called startMove(). It doesn't need any parameters, and is applied to the window object that we need to drag.

Here's the code for creating our transparent lightweight window with no system chrome:

var myOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myOptions.type = NativeWindowType.LIGHTWEIGHT;
myOptions.systemChrome = NativeWindowSystemChrome.NONE;
myOptions.transparent = true;

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! This is a rounded window!"
myText.width = 160;
myText.height = 50;
myText.x = 20;
myText.y = 20;
myText.wordWrap = true;

var myShape:Sprite = new Sprite();
myShape.graphics.beginFill(0x00CCCC, 1);
myShape.graphics.drawRoundRect(0,0,200,200,50,50);
myShape.graphics.endFill();

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

myWindow.activate();

We need to add a listener for the mouse - when the user holds down his mouse, call the startMove() function.

myShape.addEventListener(MouseEvent.MOUSE_DOWN, dragging);

function dragging(MouseEvent):void{
myWindow.startMove();
}

There's no such thing as stopMove(), because the moving stops once the user releases his mouse.

Here's the full code for a moveable transparent lightweight window:

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.display.Sprite;
import flash.events.MouseEvent;

var myOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myOptions.type = NativeWindowType.LIGHTWEIGHT;
myOptions.systemChrome = NativeWindowSystemChrome.NONE;
myOptions.transparent = true;

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! This is a rounded window!"
myText.width = 160;
myText.height = 50;
myText.x = 20;
myText.y = 20;
myText.wordWrap = true;

var myShape:Sprite = new Sprite();
myShape.graphics.beginFill(0x00CCCC, 1);
myShape.graphics.drawRoundRect(0,0,200,200,50,50);
myShape.graphics.endFill();

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

myWindow.activate();

myShape.addEventListener(MouseEvent.MOUSE_DOWN, dragging);

function dragging(MouseEvent):void{
myWindow.startMove();
}

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