« Flex & AIR Resources | Main | AIR AlertMXWindow Component (Toast Style) »
AIR AlertWindow Component (Toast Style)
| By Rich Tretola | December 17, 2007 | |
| 4,692 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 | 19 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
May 6th, 2010 at 3:01 am
The Internet is inAir Max a tizzy over an interview in which teen dream Justin Bieber appears to not be familiar with the word “German.” In the interview, a talk show host from New Zealand asks the 16-year-old a few true-or-false questions, including the query “True or false: Air Max 90 ‘Bieber’ is German for basketball.” Bieber gets confused over the word “German,” and the interviewer repeats it. After this back-and-forth, Bieber says he doesn’t know what the TV host means, and finally gives up on the question, proclaiming: “We don’t say that in America.”It seems obvious that Bieber was simply perplexed byAir Max 95 the interviewer’s thick Kiwi accent (which the host himself points out). Or perhaps he was just annoyed at being asked an inane question.
Reply to this comment
June 6th, 2010 at 1:54 am
Or perhaps he was just annoyed at being asked an inane question.
Reply to this comment
June 13th, 2010 at 12:06 am
The custom essay writing can demonstrate a writing skillfulness of some students. But it needs a lot of efforts to compose the perfect quality persuasive research paper. The best writing services could advice to buy thesis writing referring to this good topic to save time and money.
Reply to this comment
June 18th, 2010 at 7:17 am
buy dissertation, it will help you in learning and save your time
Reply to this comment
June 21st, 2010 at 6:24 am
it will help you in learning and save your time
Reply to this comment
June 21st, 2010 at 11:54 pm
[url=http://www.niuniu.com]niu[/url] niu niu
Reply to this comment
July 7th, 2010 at 3:10 am
nike air max http://www.airmaxsold.com
air max http://www.airmaxsold.com
cheap air max http://www.airmaxsold.com
air max shoes http://www.airmaxsold.com
Reply to this comment
July 13th, 2010 at 4:50 am
Nike air max is very simple and clean,also light!it’s time to buy a pair of nike air max 2010 shoes from http://www.sneakerair.com. 100% satisfication guaranteed.
Reply to this comment