Calendar

November 2008
M T W T F S S
« Oct    
 12
3456789
10111213141516
17181920212223
24252627282930

Tag Cloud

Categories

Archives

Highest Rated

Most Viewed

Recent Posts

Recent Comments

AlertWindow

By Rich Tretola | February 13, 2008Print This Page Print This Page
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
284 views

Similar to the NativeAlertWindow, the AlertWindow performs mostly in the same way, however it is meant to be used within AIR applications based on the Flex Framework. It will animate itself rising 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.

eflex004.jpg

Grab the SWC file here.

In addition to the inherited properties of mx.core.Window the AlertWindow includes:

delayTime:int - the amount of time the window will remain in the up position, defaults to 3 seconds
notify:Boolean - if delayTime is set to 0 and notify is set to true, the window will bounce until the user interacts with it
riseTo:int - the y position in which the window will rise to, defaults to 0 which then will calculate the y position based on the window height and the overall screen height

The sample below shows how to use AlertWindow creating it with ActionScript. This example will have a title of “My Alert Title”, height of 100, width of 200, and will have a delay time of 3 seconds.

  1. private function createAlertWithAS():void{
  2.     var a:AlertWindow = new AlertWindow();
  3.     a.title = "My Alert Title";
  4.     a.height = 100;
  5.     a.width = 200;
  6.     a.open();
  7. }

The sample below shows how to use AlertWindow creating it with ActionScript and Text component. This example will be 300 x 125, have a title of “My Alert Title” and will have a delay time of 5 seconds.

  1. private function createAlertWithAS2():void{
  2.     var a:AlertWindow = new AlertWindow();
  3.     a.title = "My Alert Title";
  4.     var t:Text = new Text();
  5.     t.text = "Hello World";
  6.     t.x=50;
  7.     t.y=50;
  8.     a.delayTime=5;
  9.     a.width=300;
  10.     a.height=125;
  11.     a.addChild(t);
  12.     a.open();
  13. }

The sample below shows how to use AlertWindow creating it with ActionScript and adding a button. This example will be 200 x 100, have a title of “My Alert Title” and will rise up and remain static until the user interacts with it.

  1. private function createAlertWithAS3():void{
  2.     var a:AlertWindow = new AlertWindow();
  3.     a.title = "My Alert Title";
  4.     a.height = 100;
  5.     a.width = 200;
  6.     a.delayTime=0;
  7.     a.notify = false;
  8.     a.open();
  9. }

The sample below shows how to use AlertWindow creating it with ActionScript and adding a button. This example will be 200 x 100, have a title of “My Alert Title” and will rise up and bounce until the user interacts with it.

  1. private function createAlertWithAS3():void{
  2.     var a:AlertWindow = new AlertWindow();
  3.     a.title = "My Alert Title";
  4.     a.height = 100;
  5.     a.width = 200;
  6.     a.delayTime=0;
  7.     a.notify = true;
  8.     a.open();
  9. }

The sample below shows how to use AlertWindow creating it with ActionScript and adding a button. This example will be 200 x 100, have a title of “My Alert Title” and will rise up to a y position of 100 and then retreat after 3 seconds.

  1. private function createAlertWithAS3():void{
  2.     var a:AlertWindow = new AlertWindow();
  3.     a.title = "My Alert Title";
  4.     a.height = 100;
  5.     a.width = 200;
  6.     a.riseTo = 100;
  7.     a.open();
  8. }

The code below shows how to subclass AlertWindow as an MXML object:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <alertWindow xmlns="com.everythingflex.air.components.*" title="Alert" layout="absolute"
  3.     xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="60">
  4.     <mx:Script>
  5.         <![CDATA[
  6.             [Embed(source="/assets/icons/alert+35.png")]
  7.             private var alert:Class;
  8.  
  9.             [Embed(source="/assets/icons/info+35.png")]
  10.             private var info:Class;
  11.  
  12.             [Bindable]
  13.             public var alertMessage:String;
  14.  
  15.             [Bindable]
  16.             public var alertType:String;
  17.  
  18.             private function setImage(s:String):Class{
  19.                 if(s == NotificationType.CRITICAL) return alert;
  20.                 return info;
  21.             }
  22.         ]]>
  23.     </mx:Script>
  24.     <mx:Image source="{setImage(alertType)}" verticalCenter="0" x="5"/>
  25.     <mx:Text text="{alertMessage}" fontWeight="bold" verticalCenter="0"
  26.          width="150" x="45" textAlign="center"/>
  27. </alertWindow>

Finally, here is the full sample code for this demonstration of the AlertWindow component.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import mx.controls.Text;
  6.             import com.everythingflex.air.components.AlertWindow;
  7.  
  8.             private function createAlertWithAS():void{
  9.                 var a:AlertWindow = new AlertWindow();
  10.                 a.title = "My Alert Title";
  11.                 a.height = 100;
  12.                 a.width = 200;
  13.                 a.open();
  14.             }
  15.  
  16.             private function createAlertWithAS2():void{
  17.                 var a:AlertWindow = new AlertWindow();
  18.                 a.title = "My Alert Title";
  19.                 var t:Text = new Text();
  20.                 t.text = "Hello World";
  21.                 t.x=50;
  22.                 t.y=50;
  23.                 a.delayTime=5;
  24.                 a.width=300;
  25.                 a.height=125;
  26.                 a.addChild(t);
  27.                 a.open();
  28.             }
  29.  
  30.             private function createAlertWithAS3():void{
  31.                 var a:AlertWindow = new AlertWindow();
  32.                 a.title = "My Alert Title";
  33.                 a.height = 100;
  34.                 a.width = 200;
  35.                 a.delayTime=0;
  36.                 a.notify = false;
  37.                 a.open();
  38.             }
  39.  
  40.             private function createAlertWithAS4():void{
  41.                 var a:AlertWindow = new AlertWindow();
  42.                 a.title = "My Alert Title";
  43.                 a.height = 100;
  44.                 a.width = 200;
  45.                 a.delayTime=0;
  46.                 a.notify = true;
  47.                 a.open();
  48.             }
  49.  
  50.             private function createAlertWithAS5():void{
  51.                 var a:AlertWindow = new AlertWindow();
  52.                 a.title = "My Alert Title";
  53.                 a.height = 100;
  54.                 a.width = 200;
  55.                 a.riseTo = 100;
  56.                 a.open();
  57.             }
  58.  
  59.             private function createAlertFromComponent():void{
  60.                 var a:MyAlertWindow = new MyAlertWindow();
  61.                 a.alertMessage = "Something is happening";
  62.                 a.alertType = NotificationType.INFORMATIONAL;
  63.                 a.delayTime = 0;
  64.                 a.open();
  65.             }
  66.  
  67.         ]]>
  68.     </mx:Script>
  69.     <mx:Button click="createAlertWithAS()" label="Create Alert with ActionScript" x="163" y="106" width="200"/>
  70.     <mx:Button click="createAlertWithAS2()" label="Alert with 5 second delay (big)" x="163" y="136" width="200"/>
  71.     <mx:Button click="createAlertWithAS3()" label="AlertWindow permanent" x="163" y="166" width="200"/>
  72.     <mx:Button click="createAlertWithAS4()" label="AlertWindow notify" x="163" y="196" width="200"/>
  73.     <mx:Button click="createAlertWithAS5()" label="AlertWindow notify y=100" x="163" y="226" width="200"/>
  74.     <mx:Button click="createAlertFromComponent()" label="Alert MXML Component" x="163" y="256" width="200"/>
  75. </mx:WindowedApplication>

Share/Save/Bookmark