Friday, September 7, 2012

Creating Advanced Alert Window class: Part 5

In this tutorial we'll add a AdvAlertSkin class for easier skin management.

Firstly, go to AdvAlertWindow.as and introduce 2 more variables - headerColor and bgColor:

private var headerColor:uint;
private var bgColor:uint;

Go to updateDraw() and apply these values in beginFill() functions for the background and header shapes:

public function updateDraw():void {
// bg
this.graphics.clear();
this.graphics.beginFill(bgColor, 1);
this.graphics.drawRect(pos.x, pos.y, w, h);
this.graphics.endFill();
// header
this.graphics.beginFill(headerColor, 1);
this.graphics.drawRect(pos.x + headerPadding.left, pos.y + headerPadding.top, w - (headerPadding.left + headerPadding.right), headerHeight);
this.graphics.endFill();
// title
titleField.width = w - (headerPadding.left + headerPadding.right);
titleField.text = tt;
titleField.height = headerHeight;
titleField.x = pos.x + headerPadding.left + titlePadding.left;
titleField.y = pos.y + headerPadding.top + titlePadding.top;
// text
textField.width = w - (textPadding.right + textPadding.left);
textField.height = h - (textPadding.top + textPadding.bottom + headerPadding.top + headerPadding.bottom + headerHeight);
textField.text = t;
textField.x = pos.x + textPadding.right;
textField.y = pos.y + textPadding.top + headerHeight + headerPadding.bottom + headerPadding.top;
// formats
textField.setTextFormat(textFormat);
titleField.setTextFormat(titleFormat);
textField.selectable = selectable;
titleField.selectable = selectable;
}

In the constructor, instead of applying values to all the skin-related variables, let's call a function setSkin() instead, and pass an instance of AdvAlertSkin class that we receive using the last parameter in the constructor:

public function AdvAlertWindow(pt:String, ptt:String, pw:int, ph:int, ppos:Point, sk:AdvAlertSkin) 
{
t = pt;
tt = ptt;
w = pw;
h = ph;
pos = ppos;

setSkin(sk);

textField = new TextField();
addChild(textField);

titleField = new TextField();
addChild(titleField);

updateDraw();
}

In setSkin() we apply values to our local variables from the variables of the same names of the skin object:

public function setSkin(skin:AdvAlertSkin):void {
textPadding = skin.textPadding;
headerPadding = skin.headerPadding;
titlePadding = skin.titlePadding;
headerHeight = skin.headerHeight;
titleFormat = skin.titleFormat;
textFormat = skin.textFormat;
selectable = skin.selectable;
bgColor = skin.bgColor;
headerColor = skin.headerColor;
}

Full AdvAlertWindow.as code:

package com.kircode 
{
import flash.display.MovieClip;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.display.GradientType;

/**
 * Advanced Alert window object.
 * @author Kirill Poletaev
 */
public class AdvAlertWindow extends MovieClip
{
private var t:String;
private var tt:String;
private var w:int;
private var h:int;
private var pos:Point;

private var textField:TextField;
private var titleField:TextField;

private var textPadding:TextPadding;
private var headerPadding:TextPadding;
private var titlePadding:TextPadding;
private var headerHeight:int;
private var titleFormat:TextFormat;
private var textFormat:TextFormat;
private var selectable:Boolean;
private var headerColor:uint;
private var bgColor:uint;

public function AdvAlertWindow(pt:String, ptt:String, pw:int, ph:int, ppos:Point, sk:AdvAlertSkin) 
{
t = pt;
tt = ptt;
w = pw;
h = ph;
pos = ppos;

setSkin(sk);

textField = new TextField();
addChild(textField);

titleField = new TextField();
addChild(titleField);

updateDraw();
}

public function setSkin(skin:AdvAlertSkin):void {
textPadding = skin.textPadding;
headerPadding = skin.headerPadding;
titlePadding = skin.titlePadding;
headerHeight = skin.headerHeight;
titleFormat = skin.titleFormat;
textFormat = skin.textFormat;
selectable = skin.selectable;
bgColor = skin.bgColor;
headerColor = skin.headerColor;
}

public function updateDraw():void {
// bg
this.graphics.clear();
this.graphics.beginFill(bgColor, 1);
this.graphics.drawRect(pos.x, pos.y, w, h);
this.graphics.endFill();
// header
this.graphics.beginFill(headerColor, 1);
this.graphics.drawRect(pos.x + headerPadding.left, pos.y + headerPadding.top, w - (headerPadding.left + headerPadding.right), headerHeight);
this.graphics.endFill();
// title
titleField.width = w - (headerPadding.left + headerPadding.right);
titleField.text = tt;
titleField.height = headerHeight;
titleField.x = pos.x + headerPadding.left + titlePadding.left;
titleField.y = pos.y + headerPadding.top + titlePadding.top;
// text
textField.width = w - (textPadding.right + textPadding.left);
textField.height = h - (textPadding.top + textPadding.bottom + headerPadding.top + headerPadding.bottom + headerHeight);
textField.text = t;
textField.x = pos.x + textPadding.right;
textField.y = pos.y + textPadding.top + headerHeight + headerPadding.bottom + headerPadding.top;
// formats
textField.setTextFormat(textFormat);
titleField.setTextFormat(titleFormat);
textField.selectable = selectable;
titleField.selectable = selectable;
}

}

}

Create the AdvAlertSkin.as class. Add all the skin variables we had, make them public. Set defautl values in the constructor.

package com.kircode 
{
import flash.text.TextFormat;
/**
 * Object containing skinning data for AdvAlertWindow.
 * @author Kirill Poletaev
 */
public class AdvAlertSkin 
{

public var textPadding:TextPadding;
public var headerPadding:TextPadding;
public var titlePadding:TextPadding;
public var headerHeight:int;
public var titleFormat:TextFormat;
public var textFormat:TextFormat;
public var selectable:Boolean;
public var headerColor:uint;
public var bgColor:uint;

public function AdvAlertSkin() 
{
// default values
textPadding = new TextPadding(5, 5, 5, 5);
headerPadding = new TextPadding(5, 5, 5, 5);
titlePadding = new TextPadding(2, 2, 2, 2);
headerHeight = 30;
titleFormat = new TextFormat();
titleFormat.size = 20;
titleFormat.font = "Arial";
titleFormat.bold = true;
textFormat = new TextFormat();
textFormat.size = 16;
textFormat.font = "Arial";
selectable = false;
bgColor = 0xcccccc;
headerColor = 0xeeeeee;
}

}

}

Go to AdvAlertManager.as. In the alert() function, receive one more parameter which is an AdvAlertSkin object. Set it to null by default. Check if the value is null, if so - create a new AdvAlertSkin() object and apply its value to the skin parameter variable. Pass it to the AdvAlertWindow.

public function alert(text:String, title:String = "", width:int = 300, height:int = 200, position:Point = null, skin:AdvAlertSkin = null):void {
if (position == null) position = new Point((pWidth / 2) - (width / 2), (pHeight / 2) - (height / 2));
if (skin == null) skin = new AdvAlertSkin();
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 
{
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 Container's width.
 * @paramparentHeight Container's 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.
 * @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.
 * @paramskin (Optional) Skin of the alert window.
 */

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

trace("Message: " + text);
}

}

}

Now let's try out our new code.

Go to main.as and create a new AdvAlertSkin object, change some values and apply this object to the alert() method of AlertManager:

package  
{
import com.kircode.AdvAlertManager;
import com.kircode.AdvAlertSkin;
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 {
var mySkin:AdvAlertSkin = new AdvAlertSkin();
mySkin.headerColor = 0x9999ff;
mySkin.bgColor = 0x7777cc;
mySkin.titleFormat.color = 0xffffff;
mySkin.textFormat.color = 0xffffff;

AlertManager = new AdvAlertManager(this, stage.stageWidth, stage.stageHeight);
AlertManager.alert("This is a test message!", "TITLE", 300, 200, new Point(125,100), mySkin);
}

}

}

Now the user is able to change appearance of the alert window with ease!

Thanks for reading!

No comments:

Post a Comment