Teachers: Creating Advanced Alert Window class Part 2

Tuesday, February 3, 2015

Creating Advanced Alert Window class Part 2

In this tutorial well add basic window drawing code, as well as the ability to set size and position of the window.

Start by opening AdvAlertManager.as class and adding 4 new variables:

private var windows:Array;
private var defaultContainer:DisplayObjectContainer;
private var pWidth:int;
private var pHeight:int;

The windows array will hold references to all the windows. The defaultContainer value will be passed to the object through constructor - this will be the reference to the parent of the windows. The pWidth and pHeight values are also passed through constructor. These represent the width and height of the parent.

Now, receive these values and set them to respective variables in constructor:

public function AdvAlertManager(defaultWindowContainer:DisplayObjectContainer, parentWidth:int, parentHeight:int) 
{
trace(": AdvAlertManager instance created.");

defaultContainer = defaultWindowContainer;
pWidth = parentWidth;
pHeight = parentHeight;
windows = [];
}

Now well add 3 new parameters to the alert() method. All of them are optional. These are: width, height and position. The first two values are integers, and the third one is a Point. Set their defaults to 300, 200 and null. In the function, we check if position is null (was not specified by the user), and calculate position to center the window.

Then create a new instance of AdvAlertWindow class, pass 4 values to the constructor - text, width, height and position.

Push this object to windows array and add it to defaultContainer.

public function alert(text:String, width:int = 300, height:int = 200, position:Point = null):void {
if (position == null) position = new Point((pWidth / 2) - (width / 2), (pHeight / 2) - (height / 2));
var w:AdvAlertWindow = new AdvAlertWindow(text, width, height, position);
windows.push(w);
defaultContainer.addChild(w);

trace("Message: " + text);
}

Full code so far:

package com.kircode 
{
import flash.display.DisplayObjectContainer;
import flash.display.MovieClip;
import flash.geom.Point;
/**
 * Advanced Alert window manager.
 * @author Kirill Poletaev
 */
public class AdvAlertManager 
{
private var windows:Array;
private var defaultContainer:DisplayObjectContainer;
private var pWidth:int;
private var pHeight:int;

/**
 * AdvAlertManager constructor.
 * @paramdefaultWindowContainer Parent container of alert windows.
 * @paramparentWidth Containers width.
 * @paramparentHeight Containers height.
 */


public function AdvAlertManager(defaultWindowContainer:DisplayObjectContainer, parentWidth:int, parentHeight:int) 
{
trace(": AdvAlertManager instance created.");

defaultContainer = defaultWindowContainer;
pWidth = parentWidth;
pHeight = parentHeight;
windows = [];
}

/**
 * Create an alert window.
 * @paramtext Text value of the alert window.
 * @paramwidth (Optional) Width of the alert window. 300 by default.
 * @paramheight (Optional) Height of the alert window. 200 by default.
 * @paramposition (Optional) Coordinates of top-left corner of the alert window. If not specified - the window is centered.
 */

public function alert(text:String, width:int = 300, height:int = 200, position:Point = null):void {
if (position == null) position = new Point((pWidth / 2) - (width / 2), (pHeight / 2) - (height / 2));
var w:AdvAlertWindow = new AdvAlertWindow(text, width, height, position);
windows.push(w);
defaultContainer.addChild(w);

trace("Message: " + text);
}

}

}

Now create a new file in the same directory as AdvAlertManager.as - AdvAlertWindow.as.

Make this class extend MovieClip. Declare 4 private variables, which will hold text, width, height and position values:

private var t:String;
private var w:int;
private var h:int;
private var pos:Point;

Set values to these variables in the constructor. In the end of the constructor code, call updateDraw():

public function AdvAlertWindow(pt:String, pw:int, ph:int, ppos:Point) 
{
t = pt;
w = pw;
h = ph;
pos = ppos;
updateDraw();
}

The updateDraw() function currently draws a gray rectangle based on the data:

public function updateDraw():void {
this.graphics.clear();
this.graphics.beginFill(0xcccccc, 1);
this.graphics.drawRect(pos.x, pos.y, w, h);
this.graphics.endFill();
}

Full AdvAlertWindow:

package com.kircode 
{
import flash.display.MovieClip;
import flash.geom.Point;
/**
 * Advanced Alert window object.
 * @author Kirill Poletaev
 */
public class AdvAlertWindow extends MovieClip
{
private var t:String;
private var w:int;
private var h:int;
private var pos:Point;

public function AdvAlertWindow(pt:String, pw:int, ph:int, ppos:Point) 
{
t = pt;
w = pw;
h = ph;
pos = ppos;
updateDraw();
}

public function updateDraw():void {
this.graphics.clear();
this.graphics.beginFill(0xcccccc, 1);
this.graphics.drawRect(pos.x, pos.y, w, h);
this.graphics.endFill();
}

}

}

Now return to main.as.

Here I set up a simple example of using the features we added today. Take a look at the code:

package  
{
import com.kircode.AdvAlertManager;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Point;
/**
 * ...
 * @author Kirill Poletaev
 */
public class main extends MovieClip
{
private var AlertManager:AdvAlertManager;

public function main() 
{
addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(evt:Event):void {
AlertManager = new AdvAlertManager(this, stage.stageWidth, stage.stageHeight);
AlertManager.alert("This is a test message!");
// Same results as:
// AlertManager.alert("This is a test message!", 300, 200, new Point(125,100));
}

}

}

Thats all for today!

Thanks for reading!

Teachers

Tuesday, February 3, 2015

Creating Advanced Alert Window class Part 2

No comments:

Post a Comment