Toast-Style Alert Window

Posted: December 17, 2007 in AIR
Tags:

Hello World,

I read a very interesting post today from Rich Tretola on his Everything Flex blog about creating an AIR AlertWindow Component (Toast Style). Go on over to his blog and take a look. It has some very useful material. I decided I would learn from his example and attempt to incorporate what he’s done into something I was doing. I ran into a few obstacles but a few posts later I came up with another version of the AS class he created. I give my thanks to him and Josh (another developer who commented on Rich’s blog) for helping me with what I am presenting below:

Here is the modified class:

package
{
    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;

        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 - (this.nativeWindow.height + 10))){
                _showTimer.stop();

                _delayTimer = new Timer(1000,_delayTime);
                _delayTimer.addEventListener("timer", delayTimerHandler);
                _delayTimer.start();
            }
        }

        private function delayTimerHandler(event:TimerEvent):void {
            var t:Timer = Timer(event.target);

            if(t.currentCount == _delayTimer.repeatCount){
                _hideTimer = new Timer(20,999);
                _hideTimer.addEventListener("timer", hideTimerHandler);
                _hideTimer.start();
            }
        }

        private function hideTimerHandler(event:TimerEvent):void {
            if(!this.nativeWindow.closed) {
                this.nativeWindow.y += 10;

                if(this.nativeWindow.y >= (flash.display.Screen.mainScreen.bounds.height-20)){
                    this.close();
                    _hideTimer.stop();
                }
            } else {
                _hideTimer.stop();
            }
        }
    }
}

And here is my implementation;

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

    <mx:Script>
        <!&#91;CDATA&#91;
            import AlertWin;

            private var myAlertWin:AlertWin = new AlertWin();

            private function init():void {
                myAlertWin.show("My Alert Message\nLine 2");
            }
        &#93;&#93;>
    </mx:Script>
</mx:WindowedApplication>

Thanks Guys!Ciao

Advertisements
Comments
  1. Rich Tretola says:

    FYI,

    I have added a version named AlertMXWindow based on mx.core.Window here:
    http://blog.everythingflex.com/2007/12/18/air-alertmxwindow-component-toast-style/

    It can be instantiated with either ActionScript or sub-classed as an MXML comonent.

    Rich

  2. therush says:

    Thanks Rich. The work you’ve done on your site has helped me learn a lot. I also like the fact that you placed several of your class libraries in a SWC for anyone to download. Just reference it and go! I think I could use the ConnectionManager class.

  3. Venkata Guru says:

    Hi,
    Iam a beginner to Adobe AIR. I want to develop a windows desktop application using AIR. Can i connect to a MYSQL Server through the action script and get the result.(or can i invoke a JAVA class).

    Please help me ASAP.

  4. therush says:

    Hi Venkata,

    Yes, you can! And you can do so in several ways; The easiest way would be to use the WebService AS3 class to communicate with one or more server-side web services. These web services can be written in ColdFusion, ASP.NET, Java, etc. This is a fine solution for those who have very little to no control over the server resources, such as a hosted web server account. A faster and more efficient method is Adobe LiveCycle Data Services. It is a server-side product that features, among many others, automatic and manual synchronization data with server-side resources. Check the Adobe website for more information on Adobe LiveCycle Data Services. Another solution that was just released as Beta is BlazeDS. This once again is a server-based product that allow you to connect to server-side data. BlazeDS is currently available for download at the following URL: http://labs.adobe.com/technologies/blazeds/.

    Hope I answered your question.

  5. k0rneliuz says:

    oi mate.. quick question.. any idea how I can get it to /hot/ show the flexchrome? I have tried showFlexChrome=false, but it still shows it..

  6. therush says:

    1st) Open the application descriptor file for the application.
    2nd) Find the systemChrome and transparent elements and change them to read none, true (without the comma of course)
    3rd) Make sure the background is transparent and without an image by setting the CSS for the Application. You can use this bit of code;

    Application
    {
    background-color:””;
    background-image:””;
    }

    Now having done that you need to create your own “chrome” and event listeners to allow one to move and close the app.

    I hope that helps

  7. tom says:

    hi, if u r fast enough, u see that the window goes first to the left, then to the right before it finally appears bottom right…
    is there a way to hide it till the location-calc is done?

  8. nicky says:

    hey tom,
    im also facing the same problem, did u find the solution for tht. if u please let me know. its really distubing me. thanks in advance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s