5

How to increase the Vaadin notification/warning time? I am using Vaadin Valo theme. Nothing from the Book of Vaadin Notifications page helps.

Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154

1 Answers1

12

Default Delays

First note that the five types of Notification have different delays by default.

  • Notification.Type.HUMANIZED_MESSAGE
    Displayed until user moves the mouse pointer.
  • Notification.Type.TRAY_NOTIFICATION
    Displayed until 3 seconds after user moves the mouse pointer.
  • Notification.Type.WARNING_MESSAGE
    Displayed until 1.5 seconds after user moves the mouse pointer.
  • Notification.Type.ERROR_MESSAGE
    Displayed until user clicks on the message. (Delay set to -1 milliseconds)
  • Notification.Type.ASSISTIVE_NOTIFICATION
    Does nothing for me in Safari on Mac OS X Mountain Lion.

See below for the source code of an example app demonstrating each type.

Controlling Delay

The Notification class has accessors for the delay: getDelayMsec and setDelayMsec.

For example, to set a delay to seven seconds first we must convert to milliseconds.

notification.setDelayMsec( 7 * 1_000 );

Or better yet, replace "magic" numbers with use of the TimeUnit converter. The converter produces only long values, so we must cast to an int to satisfy the Vaadin setter.

notification.setDelayMsec( ( int ) TimeUnit.SECONDS.toMillis( 7 ) );

Beware of one big change in behavior from the default. If setting a positive delay number on an ERROR_MESSAGE, the user need not click to dismiss; the error message disappears after the delay expires after a move of the mouse pointer.

See this code in action in the following example app. Uncomment the line of code calling the setter.

Example App

Here is some Vaadin 7.5.3 code. This class is a complete Vaadin app. Just create a new Vaadin project and replace with this code.

When disabling/enabling the setter, you may need to restart your Vaadin app. (Or buy a license for JRebel to avoid restarts.)

screenshot of example app with five buttons

package com.example.vaadinnotifs;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.Page;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import java.util.concurrent.TimeUnit;

/**
 *  By Basil Bourque. 
 *
 * Source code provided under MIT License. 
 * http://opensource.org/licenses/MIT
 */
@Theme ( "mytheme" )
@Widgetset ( "com.example.vaadinnotifs.MyAppWidgetset" )
@SuppressWarnings ( "serial" )
public class MyUI extends UI
{

    @Override
    protected void init ( VaadinRequest vaadinRequest ) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin( true );
        layout.setSpacing( true );
        setContent( layout );

        layout.addComponent( this.makeButton( Notification.Type.HUMANIZED_MESSAGE ) );
        layout.addComponent( this.makeButton( Notification.Type.TRAY_NOTIFICATION ) );
        layout.addComponent( this.makeButton( Notification.Type.WARNING_MESSAGE ) );
        layout.addComponent( this.makeButton( Notification.Type.ERROR_MESSAGE ) );
        layout.addComponent( this.makeButton( Notification.Type.ASSISTIVE_NOTIFICATION ) );
    }

    @WebServlet ( urlPatterns = "/*" , name = "MyUIServlet" , asyncSupported = true )
    @VaadinServletConfiguration ( ui = MyUI.class , productionMode = false )
    public static class MyUIServlet extends VaadinServlet
    {
    }

    private Button makeButton ( Notification.Type typeArg ) {
        // Taking advantage of Java’s nifty Enum capability to generically produce each Button instance.
        Button b = new Button( typeArg.name() );
        b.setData( typeArg );  // "setData" and "getData" are accessors for a little hiding place for any object you wish to carry with a Vaadin widget.
        b.addClickListener( new Button.ClickListener()
        {
            @Override
            public void buttonClick ( ClickEvent event ) {
                Notification.Type t = ( Notification.Type ) event.getButton().getData();  // Cast from Object type used by the widget’s hiding place to the `Notification.Type` type we know we used.
                Notification notification = new Notification( "This is a Notification message." , t );
                //notification.setDelayMsec( ( int ) TimeUnit.SECONDS.toMillis( 7 ) );
                Integer delayMillis = notification.getDelayMsec();
                String description = "Notification.Type: " + t.name() + " has delay of " + delayMillis + " ms.";
                notification.setDescription( description );
                notification.show( Page.getCurrent() );
            }
        } );
        return b;
    }

}
Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
  • Thank you for the solution @BasilBourque. I am using the notification at many places. To change every notification property is not possible. Do we have any CSS to apply for notification class or Can we overload any Vaadin method to increase the delay? – LARKINS CARVALHO Aug 14 '15 at 17:35
  • 1
    I suggest you make a class that extends `Notification` and adds the delay in its own constructor. Then do a global search-and-replace. – Basil Bourque Aug 14 '15 at 20:56
  • Another thought: If you have so many uses of Notification that changing them annoys you, then you may be annoying your users with so many notification appearances. You might want to consider alternative user-interface devices for giving feedback to users. – Basil Bourque Aug 14 '15 at 20:57
  • I created notification method, added the delay and did a global search-and-replace. It works fine. Thanks a lot for the kind help. – LARKINS CARVALHO Aug 18 '15 at 23:07