Tyler Chesley’s Blog

* I’ve updated the source code for the new Flex 4 beta 2. I’ve also fixed the null pointer error. You can download it here or checkout the latest from the Github.

Introducing Bark! a notification framework for Flex modeled after the uber-awesome Growl framework for the Mac.

Recently, I’ve worked on several projects where I needed a Growl like notification to alert users of various events happening in the background. I did a Google search for Flex Growl and came across several solutions for Air and Growl but not many results for a web-based solution. I did come across Francis Lukesh’s Rawr! component. While I liked the result and thought it was well-thought out and implemented, I wanted a more general framework and less  dependencies on any non-Flex framework code (Rawr! was written using the HydraFramework and uses Degrafa for skinning). Originally, I intended to write the framework using the Flex 3 SDK, but I had been playing around with the new Flex 4 beta and was very impressed with the ease of skinning components. I thought here was a perfect opportunity to get my feet wet with Flex 4. I know I’ve possibly condemned myself to rewriting code as the SDK evolves from beta to production but I thought it was worth it for the improved functionality and ease of use. I might consider writing a Flex 3 version if there is a enough demand. You can check out a demo here (view source is enabled) and download the source code here. You can also checkout the source code from github here. Any comments or suggestions welcome.

Features:

• Utilizes the new Flex 4 Beta SDK for improved skinning ability and other improvements.
• Notifications are completely configurable. The title, description, duration, icon, and renderer can all be configured using the Notification object.
• Multiple skins and styles can be setup using the type property of the Notification object. If the type property is set it will be used as the styleName for the renderer. This makes it easy to have multiple skins for a specific renderer (see the demo for an example of this).
• Custom renderers can easily be specified using the renderer property on the Notification object.
• Notification events can be dispatched anywhere in the display list to trigger a notification display. Once the NotificationManager is initialized it will listen for all notification events that bubble up the display list (by default it listens for events on the top level application but you can also pass in a custom display object to listen to).
• Callback in place for notification renderer clicks. Simply listen for a NotificationEvent.notificationItemClick event on the notification object. * Note – calling preventDefault() on the event will stop the renderer from being removed  from the display list.
• Hide and show effects for the notifications renderers are customizable globally using the NotificationManager.

To Do:

• Switch notification renderer layout to use the new Flex 4 layouts for more flexibility and configuration options.
• Maybe implement Flex 3 version depending on demand.
• Documentation
• More examples