When planning this, I had two use cases in my head:
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.
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.
Before I get some positive feedback from the users (remember to rate ) 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.
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);
notif.setWidth("100%");
// Hide messages when clicked anywhere (not only with the close
// button)
notif.setClickListener(new Notifique.ClickListener() {
private static final long serialVersionUID = 1L;
@Override
public void messageClicked(Message message) {
message.hide();
}
});
// Extra invisible layout needed for bottom alignment
VerticalLayout lo = new VerticalLayout();
lo.setWidth("100%");
lo.setHeight("200px");
lo.addComponent(notif);
lo.setComponentAlignment(notif,Alignment.BOTTOM_LEFT);
// Display as overlay in top of the main window
CustomOverlay ol = new CustomOverlay(lo, getMainWindow());
ol.setComponentAnchor(Alignment.BOTTOM_LEFT);
ol.setOverlayAnchor(Alignment.BOTTOM_LEFT);
root.addComponent(ol);
// Show some notifications
notif.add(null,"1.) This is the <a href=\"http://vaadin.com/addon/notifique\">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.
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.
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?
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…
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?
Well it has been quiet for a while, but I’m listening.
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?
Hi,
Please restore work of demo application. The URL provided in the add-ons directory is not available now: http://sami.virtuallypreinstalled.com/notifique. And finally give an answer whether it planned to transfer addon to Vaadin 7 version?
) 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.