Stacked Notification

Extension of Notification to display information to your users.

View larger

Close

Stacked Notification

Description

Stacked Notification is an extension of the default Notification component in V10. It allows you to display different information in a stacked manner. The information can be closed at once or one by one. Optionally a reload button can be provided to allow an automatic reload of several parts of your application.

Usage examples

Please note that all the examples are simple show cases. UI Thread accesses, actions to open the notification, etc. are omitted.

Simple notification

This stacked notification will show three simple text entries. It can be closed at once with the main close button in the notification caption.

StackedNotification stackedNotification = new StackedNotification("Contents have changed");
stackedNotification.addItem("Entry 1 has changed");
stackedNotification.addItem("Entry 2 was added");
stackedNotification.addItem("Entry 3 was removed");
stackedNotification.open();

Closeable items and reloadable content

This notification will allow the user to close single entries one by one as soon as they were acknowledged. Also a reload button will be shown in the caption. This reload button closes the notification and reloads a grid.

StackedNotification stackedNotification = new StackedNotification("Contents have changed");
stackedNotification.addCloseableItem("Entry 1 has changed");
stackedNotification.addCloseableItem("Entry 2 was added");
stackedNotification.addCloseableItem("Entry 3 was removed");
    
stackedNotification.addReloadClickListeners(event -> grid.getDataProvider().refreshAll());
        
stackedNotification.open(); 

Usage of components as content

private void createNotification() {
    // Caption can be a component as well
    Span caption = new Span("Contents have changed");
    caption.getStyle().set("font-weight", "bold");

    StackedNotification stackedNotification = new StackedNotification(caption);

    stackedNotification.addCloseableItem(wrapImageEntry("Entry 1 has changed", "http://..."));
    stackedNotification.addCloseableItem(wrapImageEntry("Entry 2 has changed", "http://..."));
    stackedNotification.addCloseableItem(new Span("Entry 3 was removed"));
        
    stackedNotification.addReloadClickListeners(event -> grid.getDataProvider().refreshAll());

    stackedNotification.open();
}

private Component wrapImageEntry(String content, String imageSource) {
    Div div = new Div();
    div.add(new Image(imageSource, "some image"));
    div.add(new Span(content));
    // ... we should do some styling here
    return div;
}

Links

• Vaadin Notification component

Compatibility