Notifique - an add-on for user notifications

Hi all,

I just released the first version of the “Notifique” add-on for Vaadin. It is meant to be a stylish way to give users feedback and notification.

As usual you can find it from the Directory:

When planning this, I had two use cases in my head:

  1. Having a stream or flow of messages that scroll. This should be useful for visualizing RSS feeds for example. (Re-)Implementing a Twitter search widget should be very easy this.

  2. Building a notification area for application messages. You probably seen these “yellow notification banners” before: browsers built-in popup blocker, Gmail’s user notifications or Stack Overflow’s orange bar. This could be even wired to the showNotification function in the Window class.

Check this small demo app:

Before I get some positive feedback from the users (remember to rate :slight_smile: ) and validate Notifique in a bigger real-life application, I consider this as “experimental” and API might change a bit. Please report any problems and/or missing features here at the forum.

For those wanting something more simple for user feedback, I suggest you take a look at the
TemporaryLabel add-on
. It’s very nice too.


Please make Notifique.ClickListener extend Serializable. You can’t implement the listener using an anonymous class in GAE without it.

How to create a notification area that grows upwards from the bottom of the screen? Preferably using the Overlays add-on.


To be able to position an overlay aligned to the bottom the component needs to have height. However, you don’t want to have the height on the Notifique. I suggest using an extra wrapper layout:

// Notification area. Full width.
final Notifique notif = new Notifique(false);

// Hide messages when clicked anywhere (not only with the close
// button)
notif.setClickListener(new Notifique.ClickListener() {
    private static final long serialVersionUID = 1L;

    public void messageClicked(Message message) {

// Extra invisible layout needed for bottom alignment
VerticalLayout lo = new VerticalLayout();

// Display as overlay in top of the main window
CustomOverlay ol = new CustomOverlay(lo, getMainWindow());

// Show some notifications
notif.add(null,"1.) This is the <a href=\"\">Notifique</a> add-on for Vaadin.",
                            true, Notifique.Styles.BROWSER_CHROME, true);

Note that even you can have 100% height on the invisible container, it would overlay the whole application window. This has for example the nasty side effect that mouse wheel scrolling does not work. So, better calculate a size that is just enough for the Notifique.

I’ll add this sample to the demo app too.

Ok, I uploaded version 1.0.5 of the
Notifique Add-on to the Directory
. That should fix the GAE serialization issue, but please test and report. Also, I added pom.xml for Maven users and fixed some IE issues along the way.

Here is demo of the bottom alignment:

Works like a charm, thanks for speedy support :slight_smile:

What is the “root” component you are adding the CustomOverlay to? Can that be the Main Window ?

It just the VerticalLayout in the main Window instance.

Actually it does not matter where you add it. The implementation relies on PopupView that always adds actual overlay div directly into the body element - regardless where the component was added.

(This is because of the browser differences in absolute div handling)

Hi, Sami,
Thanks for Notifique! I’m trying to put it across the complete width of an interior component (VLayout) in the same way that your demo puts it across the whole browser window. It works, displays the right text, style, etc., but I don’t seem to be able to control the width. It looks like it always wants to fill the browser window, even if my width=“100%” is supposed to refer to it’s enclosing component. Also, resizing the browser window does not reposition it properly – it’s parent is moved, but it still stays at its initial absolute coordinates?

Any thoughts? Am I using it properly?


Sound likeyou are using the CustomOverlay and that is causing this? If you don’t need the overlay feature you might add tne Notifique directly to the layout. Also the repositioning sounds like Overlays issue that has been seen earlier.

Otherwise I suggest to set an explicit size for the Notifique - I know that is not exactly what you are looking for, but reasonable trade-off until I get the time to add some features to the Overlays…

I made use of this addon, thank you!


Hi, really great Addon. We want to use this together with “Overlays addon” instead of Vaadin’s “Notification” which you can add to your Window. (The problem with Vaadin’s built-in Notifications is that they use absolute positioning when placed bottom-right … in a Portal container where possibly other content is at this place, this is not so cool)

The only thing we miss is, that you can’t set a “delay” after how much milliseconds a notification disappears again.
Has anyone an Idea how to get that into Notifique addon? Or in Overlays addon?

Or is this addon still open for improvements? :slight_smile:

Hi Thomas,

Well it has been quiet for a while, but I’m listening. :slight_smile:

Actually the delay was one thing I was sure someone asks at some point. So, It should be doable, but I’m not promising any schedule. If you really need it and wish to implement that I’m happy to give you some pointers.

Hi, we’re using this great add-on in our application, and are planning to upgrade from Vaadin 6 to 7. Any plans when Notifique would become Vaadin 7 compatible?

Please restore work of demo application. The URL provided in the add-ons directory is not available now: And finally give an answer whether it planned to transfer addon to Vaadin 7 version?

Hi Sami,
I would like to upgrade Notifique for Vaadin7. I never develop Vaadin add-ons. Can you give me keys to do it in the right way ?

For user notification I used ZetPush