Wednesday, September 5, 2012

Creating Advanced Alert Window class: Part 3

Today we'll add text and header to the alert window.

The title text is the second parameter in the alert() function, which is optional (blank by default). Call alert() in main.as and pass "TITLE" as the title value:

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!", "TITLE");
// Same results as:
// AlertManager.alert("This is a test message!", "TITLE", 300, 200, new Point(125,100));
}

}

}

Go to AdvAlertManager.as. In the alert() function, we receive the title value and pass it to AdvAlertWindow object:

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);
windows.push(w);
defaultContainer.addChild(w);

trace("Message: " + text);
}

In AdvAlertWindow.as we declare 6 new variables - tt (for storing title value), textField (for displaying message), textPadding (for storing padding values), headerPadding (for storing padding values for header), titleField (for displaying title) and headerHeight (for storing the height of the header).

private var tt:String;

private var textField:TextField;
private var textPadding:TextPadding;
private var headerPadding:TextPadding;
private var titleField:TextField;
private var headerHeight:int;

Receive the title value in the constructor and apply it to "tt" variable.

Set textPadding and headerPadding to new TextPadding class instances (we'll create this class shortly) and call their methods setPadding() to set padding values. Set headerHeight to 20.

Set textField and titleField to new TextField objects and add them to the container.

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

textPadding = new TextPadding();
textPadding.setPadding(5, 5, 5, 5);
headerPadding = new TextPadding();
headerPadding.setPadding(5, 5, 5, 5);
headerHeight = 20;

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

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

updateDraw();
}

In updateDraw(), we only draw the background so far. Draw the header rectangle, position titleField and textField objects based on the data we have:

public function updateDraw():void {
// bg
this.graphics.clear();
this.graphics.beginFill(0xcccccc, 1);
this.graphics.drawRect(pos.x, pos.y, w, h);
this.graphics.endFill();
// header
this.graphics.beginFill(0xeeeeee, 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;
titleField.y = pos.y + headerPadding.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;
}

Full AdvAlertWindow.as code:

package com.kircode 
{
import flash.display.MovieClip;
import flash.geom.Point;
import flash.text.TextField;
/**
 * 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 textPadding:TextPadding;
private var headerPadding:TextPadding;
private var titleField:TextField;
private var headerHeight:int;

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

textPadding = new TextPadding();
textPadding.setPadding(5, 5, 5, 5);
headerPadding = new TextPadding();
headerPadding.setPadding(5, 5, 5, 5);
headerHeight = 20;

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

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

updateDraw();
}

public function updateDraw():void {
// bg
this.graphics.clear();
this.graphics.beginFill(0xcccccc, 1);
this.graphics.drawRect(pos.x, pos.y, w, h);
this.graphics.endFill();
// header
this.graphics.beginFill(0xeeeeee, 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;
titleField.y = pos.y + headerPadding.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;
}

}

}

Create a new class file in the same directory, TextPadding.as.

Here we add 4 public variables - top, bottom, left and right, set their values to 5 by default, and add a method that sets these values:

package com.kircode 
{
/**
 * ...
 * @author Kirill Poletaev
 */
public class TextPadding
{
public var left:int = 5;
public var right:int = 5;
public var top:int = 5;
public var bottom:int = 5;

public function TextPadding() 
{
}

/**
 * Padding values of a text field. All default values are 5.
 * @paramtopPadding Top padding of the text field.
 * @paramrightPadding Right padding of the text field.
 * @parambottomPadding Bottom padding of the text field.
 * @paramleftPadding Left padding of the text field.
 */

public function setPadding(topPadding:int, rightPadding:int, bottomPadding:int, leftPadding:int):void {
top = topPadding;
right = rightPadding;
bottom = bottomPadding;
left = leftPadding;
}

}

}

That's all for today!

Our Alert window is actually starting to look like one. We are still far from done, though.

Thanks for reading!

No comments:

Post a Comment