Sunday, September 9, 2012

Creating Advanced Alert Window class: Part 7

In this part we will remake the way the user implements skins for alert windows.

Right now to apply a custom alert window skin the user has to pass a reference to an AdvAlertSkin object to the alert() method each time an alert is called. This is unconvenient, so we are going to add new ways to implement skins.

The first way will be to pass a skin value through the constructor of AdvAlertManager. The parameter is optional, default skin is used if nothing is specified here.

The second way will be to use AdvAlertManager's setSkin() method, which sets the skin of all alert windows created after setSkin() being called.

Let's implement those features now.

Go to AdvAlertManager.as and declare a new variable "skin":

private var skin:AdvAlertSkin;

Go to the constructor and add a new optional parameter, windowSkin, set default value to null.

Then check if the value is null, and if so - create a new AdvAlertSkin() and apply it to skin variable. Otherwise, apply the passed AdvAlertSkin object to our skin variable:

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

public function AdvAlertManager(defaultWindowContainer:DisplayObjectContainer, parentWidth:int, parentHeight:int, windowSkin:AdvAlertSkin = null) 
{
trace(": AdvAlertManager instance created.");
skin = windowSkin;
if (skin == null) skin = new AdvAlertSkin();
defaultContainer = defaultWindowContainer;
pWidth = parentWidth;
pHeight = parentHeight;
windows = [];
}

Now create a new public function called setSkin(), which simply receives a skin object and applies it to "skin":

/**
 * Set skin of all future created alert windows.
 * @paramwindowSkin Reference to a skin object.
 */

public function setSkin(windowSkin:AdvAlertSkin):void {
skin = windowSkin

Remove the skin parameter and code related to it from alert():

/**
 * Create an alert window.
 * @paramtext Text value of the alert window.
 * @paramtitle Title 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, title: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, title, width, height, position, skin);
windows.push(w);
defaultContainer.addChild(w);

trace("Message: " + text);
}

Full AdvAlertManager.as code:

package com.kircode.AdvAlert 
{
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;
private var skin:AdvAlertSkin;

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

public function AdvAlertManager(defaultWindowContainer:DisplayObjectContainer, parentWidth:int, parentHeight:int, windowSkin:AdvAlertSkin = null) 
{
trace(": AdvAlertManager instance created.");
skin = windowSkin;
if (skin == null) skin = new AdvAlertSkin();
defaultContainer = defaultWindowContainer;
pWidth = parentWidth;
pHeight = parentHeight;
windows = [];
}

/**
 * Set skin of all future created alert windows.
 * @paramwindowSkin Reference to a skin object.
 */

public function setSkin(windowSkin:AdvAlertSkin):void {
skin = windowSkin;
}

/**
 * Create an alert window.
 * @paramtext Text value of the alert window.
 * @paramtitle Title 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, title: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, title, width, height, position, skin);
windows.push(w);
defaultContainer.addChild(w);

trace("Message: " + text);
}

}

}

Go to main.as.

Here, there are now 3 ways to set a skin.

The first way is to use the default skin, by simply specifying nothing and alerting a window:

// Default skin:
AlertManager = new AdvAlertManager(this, stage.stageWidth, stage.stageHeight);
AlertManager.alert("Text message.", "Default skin");

The second way is to pass a custom skin through the constructor of AdvAlertManager:

// Create custom skin:
var mySkin:AdvAlertSkin = new AdvAlertSkin();
mySkin.bgRect = new SolidColorRect(0xff8888);

// Apply custom skin (way 1:)
AlertManager = new AdvAlertManager(this, stage.stageWidth, stage.stageHeight, mySkin);
AlertManager.alert("Text message.", "Custom skin - way 1");

The third way is to pass nothing through the constructor, but call setSkin() to apply a custom skin:

// Create custom skin:
var mySkin:AdvAlertSkin = new AdvAlertSkin();
mySkin.bgRect = new SolidColorRect(0xff8888);

// Apply custom skin (way 2:)
AlertManager = new AdvAlertManager(this, stage.stageWidth, stage.stageHeight);
AlertManager.setSkin(mySkin);
AlertManager.alert("Text message.", "Custom skin - way 2");

And that's all for today.

Thanks for reading!

1 comment:

Anonymous said...

Thanks for this! Best AS3 blog ever!

Post a Comment