Modify a variable when an event is triggered in AS3 - actionscript-3

Question

I am trying to code a simple notification class in as3, it as just two buttons, one for "ok", one for "cancel", so there is one event listener for each buttons.
The problem is that I want a variable to be passed from the main class to the notification class, then to be returned to the main after one of the eventListener has been triggered by the user.
I have tried differents things but no one seems to work, I am sure there is a common and simple way to do that but I am new to the language.
Thanks, and sorry for my english.
Here is an example:
Main.as:
package {
import flash.display.Sprite;
import flash.events.Event;
public class Main extends Sprite {
[SWF(width="640",height="480",backgroundColor="#ffffff")]
public function Main():void {
if (stage)
init();
else
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
var msg:Notification = new Notification();
addChild(msg);
}
}
}
Notification.as:
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormatAlign;
import flash.text.TextFieldAutoSize;
public class Notification extends Sprite {
private var background:Sprite;
private var button1:Sprite;
private var button2:Sprite;
private var buttonOk:TextField;
private var buttonCancel:TextField;
public function Notification() {
addBackground();
addMessage();
addOkButton();
addCancelButton();
}
private function addBackground():void {
background = new Sprite();
background.graphics.beginFill(0x4682b4, 1);
background.graphics.drawRoundRect(0, 0, 300, 200, 30, 30);
background.graphics.endFill();
addChild(background);
}
private function addMessage():void {
message = new TextField();
message.autoSize = TextFieldAutoSize.LEFT;
message.text = "My text";
message.scaleX = 1.2;
message.scaleY = 1.2;
message.textColor = 0xffffff;
background.addChild(message);
}
private function addOkButton():void {
button2 = new Sprite();
button2.graphics.beginFill(0x35733b, 1);
button2.graphics.drawRoundRect(0, 0, 90, 40, 10, 10);
button2.x = 175;
button2.y = 115;
button2.buttonMode = true;
button2.mouseChildren = false;
button2.alpha = 0.7;
background.addChild(button2);
button2.addEventListener(MouseEvent.ROLL_OVER, onButton2);
button2.addEventListener(MouseEvent.ROLL_OUT, outButton2);
button2.addEventListener(MouseEvent.CLICK, clickButton2);
buttonOk = new TextField();
buttonOk.autoSize = TextFieldAutoSize.LEFT;
buttonOk.text = "Ok";
buttonOk.scaleX = 1.2;
buttonOk.scaleY = 1.2;
buttonOk.textColor = 0x000000;
buttonOk.selectable = false;
buttonOk.x = button2.width/2 - buttonOk.width/2;
buttonOk.y = button2.height/2 - buttonOk.height/2;
button2.addChild(buttonOk);
}
private function addCancelButton():void {
button1 = new Sprite();
button1.graphics.beginFill(0x771d1d, 1);
button1.graphics.drawRoundRect(0, 0, 90, 40, 10, 10);
button1.x = 25;
button1.y = 115;
button1.buttonMode = true;
button1.useHandCursor = true;
button1.mouseChildren = false;
button1.alpha = 0.7;
background.addChild(button1);
button1.addEventListener(MouseEvent.ROLL_OVER, onButton1);
button1.addEventListener(MouseEvent.ROLL_OUT, outButton1);
button1.addEventListener(MouseEvent.CLICK, clickButton1);
buttonCancel = new TextField();
buttonCancel.autoSize = TextFieldAutoSize.LEFT;
buttonCancel.text = "Cancel";
buttonCancel.scaleX = 1.2;
buttonCancel.scaleY = 1.2;
buttonCancel.textColor = 0x000000;
buttonCancel.x = button1.width/2 - buttonCancel.width/2;
buttonCancel.y = button1.height/2 - buttonCancel.height/2;
button1.addChild(buttonCancel);
}
private function onButton1(e:MouseEvent):void {
button1.alpha = 1;
}
private function outButton1(e:MouseEvent):void {
button1.alpha = 0.7;
}
private function onButton2(e:MouseEvent):void {
button2.alpha = 1;
}
private function outButton2(e:MouseEvent):void {
button2.alpha = 0.7;
}
private function clickButton1(e:MouseEvent):void {
this.parent.removeChild(this);
}
private function clickButton2(e:MouseEvent):void {
this.parent.removeChild(this);
}
}
}

Answer 1

There's no point in sending any variable to a notification and return it back.
The notification should only tell you what of its buttons was pressed.
Think about it: what if you need another notification for a different value, that's also just having an "ok" and a "cancel" button. Will you create another notification class for that?
The notification should not have any knowledge about the value or the Main class. This is to make it as independent as possible. Save your variable the roundtrip through the notification and back to main.
Instead, do something like this in Main:
create notification
listen for event of notification
event of notification will contain what happened (ok or cancel)
based on what happened, perform some logic in Main
There are other auxiliary actions that you likely want to perform, such as:
making the notification visible/invisible
making sure its modal (nothing else can be clicked when it's active)
Such actions are out of scope for this question as this is only about the flow of information.
For your Notification class, the best practice is to dispatch a custom Event. this Event carries the action performed by the user and could look something like this (untested code):
package
{
public class NotificationEvent extends Event
{
private var _action:String;
public function get action ()
{
return _action;
}
public NotificationEvent (action:String = "ok")
{
_action = action;
}
}
}
In your Notification class, dispatch that event and pass a String to the constructor that describes the action. (You could make this a lot more elaborate only allowing certain values, which would be very convenient, but it doesn't add to the overall functionality)
dispatchEvent(new NotificationEvent("cancel")); // when cancel button is clicked
in Main, a listener added to the notification will receive the Event as parameter and can extract the performed action via the action property I defined in the class, for example in a switch case:
function notificationHandler(e:NotificationEvent)
{
switch(e.action)
{
case "ok":
//do stuff
break;
case "cancel":
//do other stuff
break;
}
}
At first the custom Event seems like an overcomplication, but it provides a clear interface for the notification, without exposing any internal stuff. If you want to add keyboard control like "enter" for "ok" and "esc" for "cancel", you can do so in the Notification class, without changing anything outside. Just make sure to dispatch the NotificationEvent.
You often find code that tries stunts like notification.okBtn.addEventListener... from the Main class which works at first, but blows up quickly if you apply changes.