Monday, April 4, 2011

Working with windows in AIR: Part 9

We know how to make our window moveable, now we need to make it resizeable.

To do that, we'll need to have some visible object on the screen that the user can click on and drag around to resize the window. I'll draw a square for that:

var myResizer:Sprite = new Sprite();
myResizer.graphics.beginFill(0x993333, 1);
myResizer.graphics.drawRect(0,0,20,20);
myResizer.x = myResizer.y = 180;
myResizer.graphics.endFill();

I add it to the window the same way I add the background and text.

myWindow.stage.addChild(myResizer);
myWindow.stage.addChild(myShape);
myWindow.stage.addChild(myText);

Add a mouse listener for this resizer:

myResizer.addEventListener(MouseEvent.MOUSE_DOWN, resizing);

To resize the window, there's a similar to startMove() method called startResize(), however, this one has one parameter - the direction we want to resize the window to. In this example, the resizer is located in the bottom right corner of the window, so I'll put NativeWindowResize.BOTTOM_RIGHT as the parameter.

function resizing(MouseEvent):void
{
myWindow.startResize(NativeWindowResize.BOTTOM_RIGHT);
}

Now, if we leave the code like that, the resizing will work, but the position of the resizer and the size of the background sprites will not change, and resizing the window will be similar to resizing a mask rectangle that is covering the window contents.

To fix this, we'll need to resize and relocate the background and the resizer when we are resizing our window. We can do that by listening to the Event.RESIZE event:

myWindow.addEventListener(Event.RESIZE, whenResizing);

function whenResizing(Event):void
{
myShape.graphics.clear();
myShape.graphics.beginFill(0x00CCCC, 1);
myShape.graphics.drawRoundRect(0,0,myWindow.width,myWindow.height,50,50);
myShape.graphics.endFill();
myResizer.x = myWindow.width - 20;
myResizer.y = myWindow.height - 20;
}

Here is 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.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();

var myResizer:Sprite = new Sprite();
myResizer.graphics.beginFill(0x993333, 1);
myResizer.graphics.drawRect(0,0,20,20);
myResizer.x = myResizer.y = 180;
myResizer.graphics.endFill();

myWindow.stage.addChild(myResizer);
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();
}

myResizer.addEventListener(MouseEvent.MOUSE_DOWN, resizing);

function resizing(MouseEvent):void
{
myWindow.startResize(NativeWindowResize.BOTTOM_RIGHT);
}

myWindow.addEventListener(Event.RESIZE, whenResizing);

function whenResizing(Event):void
{
myShape.graphics.clear();
myShape.graphics.beginFill(0x00CCCC, 1);
myShape.graphics.drawRoundRect(0,0,myWindow.width,myWindow.height,50,50);
myShape.graphics.endFill();
myResizer.x = myWindow.width - 20;
myResizer.y = myWindow.height - 20;
}

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