AIR AlertWindow Component (Toast Style)

Want to launch a toast style window within an AIR application that animates in the lower right corner of the screen? Try my AIR AlertWindow component. It will animate itself rizing from the lower right corner of the screen and delay for a predetermined amount of time that you set. It also has the ability to bounce. See the details below.

Grab the SWC file here.

Here is a sample function creating the AlertWindow. The AlertWindow constuctor accepts 6 arguments. The first two are required and they are the title and the message. The next 4 are optional and they are delay timer (how long the window shows), width, and height. The delay timer defaults to 3 seconds, the width defaults to 200 and the height defaults to 100. If you change the default width and height, the AlertWindow will automatically recalculate its x and y position. There is a 6th argument that will only have an effect if the delay time is set to 0. When the delay time is set to 0, the default behavior is for the window to bounce until the user interacts with it. This can be overridden by setting the 6th argument to false which will result in the window remaining in place but static until the user closes it.

This sample creates a window that is 200 x 100, has the title “My Alert Title” with the message “My Alert Message” and will rise up, delay 3 seconds, and then go back down.

private function createAlert():void{
    var a:AlertWindow = new AlertWindow("My Alert Title","My Alert Message");
    a.activate();
}

This sample creates a window that is 200 x 100, has the title “My Alert Title” with the message “My Alert Message” and will rise up, delay 5 seconds, and then go back down.

private function createAlert():void{
    var a:AlertWindow = new AlertWindow("My Alert Title","My Alert Message",5);
    a.activate();
}

This sample creates a window that is 300 x 80, has the title “My Alert Title” with the message “My Alert Message” and will rise up and bounce until the user interacts with it.

private function createAlert():void{
    var a:AlertWindow = new AlertWindow("My Alert Title","My Alert Message",0,300,80);
    a.activate();
}

This sample creates a window that is 300 x 80, has the title “My Alert Title” with the message “My Alert Message” and will rise up and remain static until the user interacts with it.

private function createAlert():void{
    var a:AlertWindow = new AlertWindow("My Alert Title","My Alert Message",0,300,80,false);
    a.activate();
}

Download the sample application here.

This entry was posted on Monday, December 17th, 2007 at 8:20 am and is filed under Adobe AIR (Apollo). You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “AIR AlertWindow Component (Toast Style)”

Antonio Serrano Says:
December 17th, 2007 at 2:22 pm
Cool Sample!!
judah Says:
December 17th, 2007 at 6:02 pm
Thanks Rich!
Just what I was looking for!
Theo Says:
December 17th, 2007 at 7:21 pm
Exellent sample! I’m trying to extend upon your example but I can’t add anything but your textField onto the stage of the nativeWindow. I tried adding a button (instead of the textField) and the stage is blank.

var btn:Button = new Button();
btn.id = “myBtn”;
btn.label = “x”;

this.stage.addChild(btn);

The rest of the code is exactly as you have posted.

Any suggestions??
Josh Says:
December 17th, 2007 at 7:47 pm
Nice. Some ideas for extension:

1) Make a version based on the Flex Window component so that Flex controls may be added (that’s why Theo’s code doesn’t work).

2) Any corner of the screen would be useful. I know that Macs tend to toast on the top instead of the bottom (Growl does, anyway).
Theo Says:
December 17th, 2007 at 8:07 pm
Ahh! And the light come on. For those of you (you know who you are) who were as much in the dark about this aspect as I was here is a paragraph from the Adobe site;

“In Adobe AIR, the operating system’s windows are represented by a NativeWindow class. Since this class is not Flex-aware, it doesn’t provide the layout and other features that Flex developers (including you, presumably) demand. To give you multiple windows and Flex layout capabilities, we’ve created two components you can use for your AIR applications. They contain the raw ActionScript NativeWindow, but provide Flex-friendly functionality.”

Use the Flex Window component.

Thanks Josh!
everythingflex Says:
December 17th, 2007 at 8:27 pm
Agreed Josh. I’ll get one up for mx:Window as well. The current one is useful for HTML and Flash based applications that would not normally have access to the mx package.
Theo Says:
December 17th, 2007 at 10:09 pm
OK This is how far I got with using the Window component;
1. package
2. {
3. import flash.display.NativeWindowSystemChrome;
4. import flash.display.NativeWindowType;
5. import flash.events.*;
6. import flash.utils.Timer;
8. import mx.containers.Canvas;
9. import mx.controls.Button;
10. import mx.controls.TextArea;
11. import mx.core.Window;
12. import mx.events.FlexEvent;
14. public class AlertWin extends Window
15. {
16. private var _showTimer:Timer;
17. private var _delayTimer:Timer;
18. private var _hideTimer:Timer;
20. private var _delayTime:int;
21. private var _message:String;
22. private var _width:int;
23. private var _height:int;
25. private var _systemChrome:NativeWindowSystemChrome;
26. private var _windowType:NativeWindowType
28. public function AlertWin() {
29. this.maximizable = false;
30. this.resizable = false;
31. this.minimizable = false;
33. // alternate, none, standard, utility
34. this.systemChrome = "none";
36. // lightweight, normal, utility
37. this.type = "lightweight"
39. this.addEventListener(FlexEvent.CREATION_COMPLETE, completeHandler);
40. }
42. public function completeHandler(event:FlexEvent):void {
43. this.nativeWindow.x = flash.display.Screen.mainScreen.bounds.width - (this.width + 20);
44. this.nativeWindow.y = flash.display.Screen.mainScreen.bounds.height - 20;
46. this.horizontalScrollPolicy = "off";
47. this.verticalScrollPolicy = "off";
49. _showTimer = new Timer(10,0);
50. _showTimer.addEventListener("timer", showTimerHandler);
51. _showTimer.start();
52. }
54. public function show(message:String, title:String = "", delayTime:int=2, width:int=200, height:int=150): void {
55. _delayTime = delayTime;
57. this.width = width;
58. this.height = height;
60. var cnv:Canvas = new Canvas();
61. cnv.width = width;
62. cnv.height = height;
63. cnv.horizontalScrollPolicy = "off";
64. cnv.verticalScrollPolicy = "off";
66. var ta:TextArea = new TextArea();
67. ta.text = message;
68. ta.width = width;
69. ta.height = height;
71. var btn:Button = new Button();
72. btn.label = "My Message";
73. btn.setStyle("right", "5");
74. btn.setStyle("bottom", "45");
76. cnv.addChild(ta);
77. cnv.addChild(btn);
79. this.addChild(cnv);
81. this.open();
82. }
84. private function showTimerHandler(event:TimerEvent):void {
85. this.nativeWindow.y -= 10;
87. if(this.nativeWindow.y = (flash.display.Screen.mainScreen.bounds.height-20)){
88. this.close();
89. _hideTimer.stop();
90. }
91. } else {
92. _hideTimer.stop();
93. }
94. }
95. }
96. }
Thanks Guys! I got a bit more to do with this class but I can see the light at the end of the tunnel now. I want to completely remove the chrome and use a simple border.

Thanks again. I’ll keep looking here to see if you got any improvements that could be made.
everythingflex Says:
December 18th, 2007 at 7:25 am
Here it is:
http://blog.everythingflex.com/2007/12/18/air-alertmxwindow-component-toast-style/
CRitter Says:
February 5th, 2008 at 6:04 pm
any way to make these windows with no chrome? flex or system?