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.
The 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 NOTIFICATION_POSITION_TOP_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.
That’s a good start!
One of the things I’ve noticed in the Systray notifications that is occasionally annoying but sometimes critically important in the ability to put a hyperlink in the notification or make the default click behavior do something besides clear. Like “Your firewall is disabled. Click this balloon to configure…”.
Hypertext doesn’t seem to be terrifically easy in Flex in my experience thus far, so you’d probably wind up with some markup system for designating flash components to be rendered inside your message area. Like [[button onclick="showPasswordReset()"]] which could be parsed into the correct mxml on the fly.
Handy – thanks for sharing!
Hey Jerry – the original implementation actually had HTML in the notification rather than plain text.
I think I might add that option as a variable property.
I am not sure if theres a requirement to click something though whether this type of notification is appropriate – maybe a more traditional alert would be better in your example.
I think it would be a good option. I’ve seen a few more examples on web apps where the notification are has a link to some important action. With a traditional alert, I suppose you could do “click OK to [take action] and Cancel to dismiss this alert” but it seems more intuitive to see something like “you have _7 documents_ waiting for your approval” where the link is self describing and the text doesn’t require a higher order of interpretation. Back to the “don’t make me think” usability measuring stick, did it take me 1 or 3 seconds to figure out what the alert was about?
Jerry – I will update the component and add the option – I needed to add a width property as well.
Thinking about the result of clicking the link it should be possible to call a Javascript function from the link which in turn calls the actionscript method as long as the methods are registered in advance with the browser.
I’m looking for code to download but I can’t find anything – am I missing something?
Clay – right click on the demo to view source. It will give you a zip which you can download.