In an application, you often must send messages to your users. Some messages require an acknowledgement or a decision from the user: in Flex, the Alert class is used for this. But sometimes, your message is "for information" only. In this case, the Alert and its OK button represent a disturbing and ennoying additional click.
Here comes the Flex Notification, that actually mimics any other notification that may be found in other applications, poping up from the bottom right corner of your screen.
The Flex Notification is a small box that appears on a predefined part of your application (top/bottom left/center/right corner/side…), displays a message for the user then disappears.
You show a Notification just calling the method show(). Like the Alert class. But the parameters are not all the same:
- Title: the title of the Notification. If it is null, the Notification won’t have a title bar (and no close Button).
- Message: the message to display. This is displayed as HTML.
- Duration: the duration of the notification. If you specify a duration of 0, the Notification won’t auto-close.
- Position: the place in the application where to put the Notification.
- Icon: the icon to illustrate the message.
- Stackable: indicate if the Notifications are stackd or not (true by default)
- Parent: the container of the Notification. By default, this is the application.
- Filters: the filters to apply on the Notification (by default, there is a default DropShadowFilter).
The user can keep the notification on screen by placing the mouse over the Notification. The notification will then vanish when the mouse rolls out or on click.
You can also style all the Notifications in your application using a CSS file. As the Flex Notification extends my GradientCanvas, you can define beautiful Notifications using the backgroundStyle style and my GradientComponent Style Explorer. You can also change the default effects that are played when the Notification pops up or vanishes (a Move and a Fade by default).
I used MXML for this component, I suppose this will help when I convert it to Flex 4… maybe.
Downloaded a total of 5365 times
Have fun.
Licence:
This component is free for use, modification and distribution under the following condition:
Just mention the name and the url of the author in a part of your product that is visible to the user (about section, documentation…).
You can avoid this constrain with a donation ;).
Information:
Version 1.3
Great contribution by Herb Morris from Okinawa, Japan !
- Changed calculation to ensure a Notification is correctly displayed within the parent, not clipped
- Fixed a bug that could hang the application when lots of Notifications are displayed
- Added an easing function to the default effect.
- Added a duration for the closing effect.
Version 1.2
- Added the ability to display stacked Notifications (use the property stackable that is true by default)
Notifications that are centered, left or right centered are not stackable
Version 1.1
- Added the property focusEnabled, set to false
- Fixed : the parent is now taken into account. The Notification is not included in the parent container (as it is a popup) but the target x/y is calculated using the coordinates of the parent container.
Version 1.0
First release.
You can face unenexpected behaviors or loops if you call the Notification in response to events such as itemEditBeginning while editing a DataGrid, FocusIn… This is due to the nature of the Notification that is invoked by the PopupManager.
Related posts
Written by Arnaud
Tags: Component, Flex, GradientCanvas, Notification
(5 votes, average: 5 out of 5)
Loading ...Comments are closed.
