As part of a larger project, I have been working to simulate an alert from AIR ala TweetDeck. Attached to this is the results of that work. I stripped the alert out so that I could share it. I have included the AIR application as well as all the source code.

The application example is very simplistic. It is just an AIR html window with a button to launch the alert. In the larger application this came from I launch the alert as a response to a BlaseDS message. The alert window is actually a styled, transparent AIR window.

Now, let me try and explain the workings of the code. The first part is the launching of the alert window. Using "air.Capabilities" I am able to get the resolution of the users screen. This allows me to create positioning so I can place the alert top right on the screen. Next I set the options for the window. These options just create a transparent window with no header/footer or other controls. The last part is just the click action to launch the window and have it load the html file into itself.

view plain print about
2    ypos = 25;
3    xpos = air.Capabilities.screenResolutionX - 300;
4    var options = new air.NativeWindowInitOptions();
5        options.type = air.NativeWindowType.LIGHTWEIGHT;
6        options.transparent = true;
7        options.systemChrome = air.NativeWindowSystemChrome.NONE;
8    var windowBounds = new air.Rectangle(xpos,ypos,350,200);        
10    $(document).ready(function(){    
11        $("#launchBtn").click(function(){
12            var newHTMLLoader = air.HTMLLoader.createRootWindow( true, options, true, windowBounds);
13            newHTMLLoader.load(new air.URLRequest("newwindow.html"));                    
14        });                        
15    });                    

The code for the alert is not that tricky but I wanted to pull off some of the tricks that TweetDeck's alerts were doing. For example, prevent close while mouse was over alert, fade alert in and out, mouse over effect on alert, and right click close. All these were fairly easy except for the mouse out handling. I covered how to handle that in a previous blog post Air HTML mouseOut event.

The code for the new window has a lot going on for such a little window. So skipping the vars lets look over the code...

First thing was to create a fade for the div in the window. This will allow the alert to fade in, hang around for a bit, then fade out. Using chaining this was pretty easy to accomplish. Then a call is made to a timer function to have a AIR timer run that will close the window at a set interval.

view plain print about
1$(document).ready(function() {
2    $('#msgDiv').fadeIn(1000).delay(DELAY-2000).fadeOut(1000);        
3    closeTimer(DELAY, REPEAT);

Next is how the mouse overs are handled. We have to use some AIR window objects to handle. Depending on mouse state we perform different actions. On a right click the window is immediately closed.

view plain print about
2    $('#msgDiv').removeClass().addClass("msgDiv");
3    preventClose(false);
7    $('#msgDiv').removeClass().addClass("msgDivOver");
8    preventClose(true);
12 nativeWindow.close();

The next part of the code is for closing the window when the timer ends. However, it checks to see if the close should be aborted due to mouse intervention.

view plain print about
1function doTimerComplete( evt ) {
2    timerEnd = true;
3    if (!abortClose) {
4        nativeWindow.close();
5    }

The closeTimer function sets up the air timer to close the entire window after an interval. This code came from an AIR application written by Ray Camden Adobe AIR Game - Hamurabi.

view plain print about
1function closeTimer(del, rep){
3    // Create a timer instance and listen for completion
4    timer = new air.Timer( del, rep );
5    timer.addEventListener( air.TimerEvent.TIMER_COMPLETE, doTimerComplete );
7    // Start the timer
8    timer.start();

Up next is the function that handles stoping the alert close because of mouse intervention. This is not that tricky but did require figuring out how to stop the initial fade and delay timers on the div.

view plain print about
1function preventClose(state){    
2    if (state){
3        abortClose = true;
4        $('#msgDiv').stop(true, false);
5    } else {
6        abortClose = false;            
7        if (timerEnd){
8            $('#msgDiv').fadeOut(1000);
9            closeTimer(2000, 1);            
10        }
11    }

The rest of the code is just display for the alert.

The alert fading is not perfect and the mouse over to top the exit could use some work. However, it is still a good example of what you can do with AIR and still just write HTML.

Till next time...