How do I create a dialog window in Vaadin 8?

Question

We are using Vaadin 8 and, unfortunately, we're stuck with that version for a while.

I need to be able to create a dialog window when the user clicks a button. This window doesn't have to be draggable but it needs to be customizable (ie, different sizes with different components inside). For example, the window would have textfields, labels, combos, etc.

All of my searching is recommending I use Vaadin 11 or higher. We cannot do that at the moment.

Is there an example of how I can do this in Vaadin 8? We do have the paid, pro license if that helps.

I have a crude version working with the PopupView :

    DateProcessedFilterUi dateProcessedFilterUi = new DateProcessedFilterUi();
    PopupView dateProcessedPopupView = new PopupView("", dateProcessedFilterUi.getPopupComponent());
    Button dateProcessedButton = new Button("Past Hour", click -> dateProcessedPopupView.setPopupVisible(true));
    dateProcessedPopupView.addPopupVisibilityListener(event -> dateProcessedFilterUi.setVisible(event.isPopupVisible()));

This works but the popup appears over the button and disappears when my mouse leaves it. If I could at least stop the auto-closing of the window then that would help.

Thanks for any suggestions.

Answer 1

You are looking for the Window class ( com.vaadin.ui.Window ).
Vaadin Docs for Window
Window Demo

In Vaadin Flow (10+), it is replaced by Dialog .