Showing posts with label alert. Show all posts
Showing posts with label alert. Show all posts
Wednesday, January 28, 2015
Creating Advanced Alert Window class Part 4
In this tutorial we will add more skinning options to the alert window.
Go to AdvAlertWindow.as and declare more variables:
The titlePadding variable will be used to create padding for the title text field inside the header box. Right now we have padding for header box only, which moves the header and the title together. Adding this variable will mean that we will also be able to tweak position of the title inside the header.
The titleFormat and textFormat objects are used for formatting the title and body text.
The selectable boolean will determine whether the text is selectable or not.
Go to the constructor and lets update the window skinning part.
Firstly, well get rid of lines that call setPadding() methods of TextPadding objects. Instead, well pass the padding values to the constructor.
Next lets set up some text formatting.
Then we set selectable to false.
Full constructor:
Now go to updateDraw() function. In the lines that set x and y coordinates of titleField, add titlePaddings left and top values.
Set text formats of textField and titleField to textFormat and titleFormat. Also set their selectable values to selectable variable value.
Full AdvAlertWindow.as code:
Go to TextPadding.as and update it to be able to pass padding values in the constructor:
And thats all for today.
Thanks for reading!
Read more »
Go to AdvAlertWindow.as and declare more variables:
private var titlePadding:TextPadding;
private var titleFormat:TextFormat;
private var textFormat:TextFormat;
private var selectable:Boolean;
The titlePadding variable will be used to create padding for the title text field inside the header box. Right now we have padding for header box only, which moves the header and the title together. Adding this variable will mean that we will also be able to tweak position of the title inside the header.
The titleFormat and textFormat objects are used for formatting the title and body text.
The selectable boolean will determine whether the text is selectable or not.
Go to the constructor and lets update the window skinning part.
Firstly, well get rid of lines that call setPadding() methods of TextPadding objects. Instead, well pass the padding values to the constructor.
textPadding = new TextPadding(5, 5, 5, 5);
headerPadding = new TextPadding(5, 5, 5, 5);
titlePadding = new TextPadding(2, 2, 2, 2);
Next lets set up some text formatting.
titleFormat = new TextFormat();
titleFormat.size = 20;
titleFormat.font = "Arial";
titleFormat.bold = true;
textFormat = new TextFormat();
textFormat.size = 16;
textFormat.font = "Arial";
Then we set selectable to false.
selectable = false;
Full constructor:
public function AdvAlertWindow(pt:String, ptt:String, pw:int, ph:int, ppos:Point)
{
t = pt;
tt = ptt;
w = pw;
h = ph;
pos = ppos;
// skinning
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;
textField = new TextField();
addChild(textField);
titleField = new TextField();
addChild(titleField);
updateDraw();
}
Now go to updateDraw() function. In the lines that set x and y coordinates of titleField, add titlePaddings left and top values.
Set text formats of textField and titleField to textFormat and titleFormat. Also set their selectable values to selectable variable value.
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 + 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;
}
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;
public function AdvAlertWindow(pt:String, ptt:String, pw:int, ph:int, ppos:Point)
{
t = pt;
tt = ptt;
w = pw;
h = ph;
pos = ppos;
// skinning
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;
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 + 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;
}
}
}
Go to TextPadding.as and update it to be able to pass padding values in the constructor:
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;
/**
* 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 TextPadding(topPadding:int = 5, rightPadding:int = 5, bottomPadding:int = 5, leftPadding:int = 5)
{
top = topPadding;
right = rightPadding;
bottom = bottomPadding;
left = leftPadding;
}
/**
* 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;
}
}
}
And thats all for today.
Thanks for reading!
Tuesday, January 27, 2015
Creating Advanced Alert Window class Part 1
Today we will start working on an advanced alert manager class for AS3.
The idea behind this tutorial series is to create a flexible AS3 class for displaying alert messages to the users.
The closest thing to this is the Alert class for Flex - however, I think it still lacks a few things. This is why I am writing this class and these articles - to create an universal and customizable class that would provide the developers with ability to quickly implement alert/notice/warning windows in their application.
If you have any additions to the code I provide, have any suggestions or questions - leave a comment. I hope you will find this series useful!
So, lets begin.
Im using FlashDevelop for writing the class, but Ill also use Flash for debugging. The class itself is just a folder of as3 files, but they alone are not viewable without an environment. Thats why well create a new AS3 project as a testing area for our class.
Im using Flash to create a new project and set its main class path to "main" (located under Publish tab in the tool panel). You can, of course, use FlashDevelop or any other IDE to do this.
Next to the Flash file Ill create a new class main.as.
Make the class extend MovieClip and declare a new variable called AlertManager. Set its type to AdvAlertManager. Import com.kircode.AdvAlertManager class. In the constructor, add a listener for ADDED_TO_STAGE event, set its handler to init() function.
In init(), set AlertManager to a new instance of AdvAlertManager. Call its alert() method to display a simple message.
Now create a new folder "com", inside of it add a folder "kircode", and there add a new class callde AdvAlertManager.as:
The class for now will only have a constructor that traces a message that an instance of this class has been created, and a public function alert().
The alert() function will later open a real alert window, but for now let it just trace the message:
And thats all for today!
Its not much yet, but the basis is there.
Thanks for reading!
Read more »
The idea behind this tutorial series is to create a flexible AS3 class for displaying alert messages to the users.
The closest thing to this is the Alert class for Flex - however, I think it still lacks a few things. This is why I am writing this class and these articles - to create an universal and customizable class that would provide the developers with ability to quickly implement alert/notice/warning windows in their application.
If you have any additions to the code I provide, have any suggestions or questions - leave a comment. I hope you will find this series useful!
So, lets begin.
Im using FlashDevelop for writing the class, but Ill also use Flash for debugging. The class itself is just a folder of as3 files, but they alone are not viewable without an environment. Thats why well create a new AS3 project as a testing area for our class.
Im using Flash to create a new project and set its main class path to "main" (located under Publish tab in the tool panel). You can, of course, use FlashDevelop or any other IDE to do this.
Next to the Flash file Ill create a new class main.as.
Make the class extend MovieClip and declare a new variable called AlertManager. Set its type to AdvAlertManager. Import com.kircode.AdvAlertManager class. In the constructor, add a listener for ADDED_TO_STAGE event, set its handler to init() function.
In init(), set AlertManager to a new instance of AdvAlertManager. Call its alert() method to display a simple message.
package
{
import com.kircode.AdvAlertManager;
import flash.display.MovieClip;
import flash.events.Event;
/**
* ...
* @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();
AlertManager.alert("This is a test message!");
}
}
}
Now create a new folder "com", inside of it add a folder "kircode", and there add a new class callde AdvAlertManager.as:
The class for now will only have a constructor that traces a message that an instance of this class has been created, and a public function alert().
The alert() function will later open a real alert window, but for now let it just trace the message:
package com.kircode
{
/**
* Advanced Alert window manager.
* @author Kirill Poletaev
*/
public class AdvAlertManager
{
public function AdvAlertManager()
{
trace(":AdvAlertManager instance created.");
}
public function alert(text:String):void {
trace("Message: " + text);
}
}
}
And thats all for today!
Its not much yet, but the basis is there.
Thanks for reading!
Subscribe to:
Posts (Atom)