A Flex Growl Notification Component

Unobtrusive notifications are all the rage now in web apps (check out Google Chromes method for asking to remember passwords).  Rather than have an alert dialog which forces the user to lose context and actually click something to clear it, its sometimes better to have a notification which clears itself after a short amount of time.

growl-logoThe Mac has the Growl framework and Windows has the system tray.

For the web – JQuery has a plugin which seems to work well.

For Adobe Flex, though there are a couple of options kicking around, there was nothing which really suited my needs.  I therefore modified this one – http://afoucal.free.fr/index.php/2009/07/06/flex-notification/ – I wanted to simplify it so I stripped out the extra bits but left the core logic but the original author did all the hide work ;-)

The notification has the following features:

  • Can be position top left, top middle, top right, middle left, middle,middle right, bottom left, bottom and bottom right.
  • The message will display for 2.5 seconds (can be changed for each call) before clearing.
  • Hovering the mouse over the message will force it to pause, clicking on it will clear it.
  • You can optionally stack the notifications – on the demo try clicking the button more than once.
  • The notification icon can be set for each notification call.

The result can be seen here on a demo page. – view source is enabled so you can download it.  The source consists of a CSS page, an example notification icon, 1 Actionscript class, 1 MXML component with some static methods (which means you do not have to instantiate the object first) and the calling demo MXML page.

In my example I have a showAlert method which in turn calls the static Notification.show method.  The properties for the show method are:

  • The message to display
  • The title
  • Duration in ms – default(2500)
  • Position of Notification – there are constants defined within the Notification component (default is NOTIFICATIONPOSITIONTOP_CENTER)
  • The NotificationIcon class – the demo has an example on how you might define this, remember you can define several and change the icon for each call to the Notification.
  • Stackable – whether the notifications should stack – the default is true.