Growl Type Notifications in Adobe AIR

The past week or so I have been able to work on my first Adobe AIR app using HTML/JavaScript.  So far I have been very impressed with what you can build in AIR.  The application I have been working on pings a web service via jQuery and needs to pop up an alert to the user that new content is available for viewing.  The most difficult piece for me so far has been building the notification functionality.  My requirements called for notifications that were similar to those of some of the AIR based Twitter apps.  In the lower right corner of the screen a notification should display then auto hide after a given time frame.  I was able to get this working, but I was not happy with the display portion of the notification.  It just appeared clunky to me.

On my quest to find another way to accomplish this I joined the newly created Google Group for AIR with HTML and JavaScript.  I had mentioned in a post there that I had struggled a bit with the notifications.  Andy Matthews replied back and made me aware of jQuery plugin named BlockUI that allowed you to create Growl type notifications.  That is exactly what I was looking for.  I was able to modify some of the code I already had and implement the new plugin.  The results were great and were exactly what I needed.  The plugin also allows you to easily change the opacity, fade in and fade out times, etc…

There are two parts of code here that makes this work.  The first bit of code lives in my main HTML file for my application.  This code creates a new window that will essentially be the holder of the notification itself.  The last two lines of this code tell it to spawn my window and load the results of an HTML file into it.

function displayNotification() { var options = new air.NativeWindowInitOptions(); options.type = air.NativeWindowType.LIGHTWEIGHT; options.transparent = true; options.systemChrome = air.NativeWindowSystemChrome.NONE; var bounds = null; var screen = air.Screen.mainScreen.visibleBounds; var windowHeight = 150; var windowWidth = 400; bounds = new air.Rectangle( screen.width - windowWidth - 40, screen.height - windowHeight - 50, windowWidth, windowHeight ); var notification = air.HTMLLoader.createRootWindow( true, options, false, bounds ); notification.paintsDefaultBackground = false; notification.stage.nativeWindow.alwaysInFront = true; notification.navigateInSystemBrowser = true; var NOTIFYSOURCE = "growl.html"; notification.load( new air.URLRequest( NOTIFYSOURCE ) ); }

So now that we have our window fired off, we need to create the associated HTML page that contains the notification itself.  This is where the plugin comes into play.  You can see from the code below that all the HTML page does is fire off the jQuery function to create our notification.   The plugin will then handle the display of the message, which is simple HTML code wrapped into a DIV.  I did create a stylesheet that I use for the notifications that is included as well.


The result is a nice looking notification that displays, then fades out after a few seconds.

Again, thanks to Andy for pointing me over to the jQuery BlockUI plugin.


comments powered by Disqus