« Flex & AIR Resources | Main | AIR AlertMXWindow Component (Toast Style) »
AIR AlertWindow Component (Toast Style)
| By Rich Tretola | December 17, 2007 | |
| 7,411 views |
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.
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.
1 2 3 4 | 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.
1 2 3 4 | 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.
1 2 3 4 | 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.
1 2 3 4 | 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.
Topics: Adobe AIR | 11 Comments »
December 17th, 2007 at 2:22 pm
Cool Sample!!
Reply to this comment
December 17th, 2007 at 6:02 pm
Thanks Rich!
Just what I was looking for!
Reply to this comment
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??
Reply to this comment
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).
Reply to this comment
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!
Reply to this comment
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.
Reply to this comment
December 17th, 2007 at 10:09 pm
OK This is how far I got with using the Window component;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
{
import flash.display.NativeWindowSystemChrome;
import flash.display.NativeWindowType;
import flash.events.*;
import flash.utils.Timer;
import mx.containers.Canvas;
import mx.controls.Button;
import mx.controls.TextArea;
import mx.core.Window;
import mx.events.FlexEvent;
public class AlertWin extends Window
{
private var _showTimer:Timer;
private var _delayTimer:Timer;
private var _hideTimer:Timer;
private var _delayTime:int;
private var _message:String;
private var _width:int;
private var _height:int;
private var _systemChrome:NativeWindowSystemChrome;
private var _windowType:NativeWindowType
public function AlertWin() {
this.maximizable = false;
this.resizable = false;
this.minimizable = false;
// alternate, none, standard, utility
this.systemChrome = "none";
// lightweight, normal, utility
this.type = "lightweight"
this.addEventListener(FlexEvent.CREATION_COMPLETE, completeHandler);
}
public function completeHandler(event:FlexEvent):void {
this.nativeWindow.x = flash.display.Screen.mainScreen.bounds.width - (this.width + 20);
this.nativeWindow.y = flash.display.Screen.mainScreen.bounds.height - 20;
this.horizontalScrollPolicy = "off";
this.verticalScrollPolicy = "off";
_showTimer = new Timer(10,0);
_showTimer.addEventListener("timer", showTimerHandler);
_showTimer.start();
}
public function show(message:String, title:String = "", delayTime:int=2, width:int=200, height:int=150): void {
_delayTime = delayTime;
this.width = width;
this.height = height;
var cnv:Canvas = new Canvas();
cnv.width = width;
cnv.height = height;
cnv.horizontalScrollPolicy = "off";
cnv.verticalScrollPolicy = "off";
var ta:TextArea = new TextArea();
ta.text = message;
ta.width = width;
ta.height = height;
var btn:Button = new Button();
btn.label = "My Message";
btn.setStyle("right", "5");
btn.setStyle("bottom", "45");
cnv.addChild(ta);
cnv.addChild(btn);
this.addChild(cnv);
this.open();
}
private function showTimerHandler(event:TimerEvent):void {
this.nativeWindow.y -= 10;
if(this.nativeWindow.y = (flash.display.Screen.mainScreen.bounds.height-20)){
this.close();
_hideTimer.stop();
}
} else {
_hideTimer.stop();
}
}
}
}
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.
Reply to this comment
December 18th, 2007 at 7:25 am
Here it is:
http://blog.everythingflex.com/2007/12/18/air-alertmxwindow-component-toast-style/
Reply to this comment
February 5th, 2008 at 6:04 pm
any way to make these windows with no chrome? flex or system?
Reply to this comment
January 17th, 2009 at 4:56 pm
yep
this.setStyle(‘showFlexChrome’,false);
Reply to this comment
December 24th, 2009 at 4:59 pm
A text just about this post is released by essay writing to have a chance to buy an essay and custom papers.
Reply to this comment