Opening a UI in a popup window

To open a new popup window in the browser showing another part of your application, you can use the new BrowserWindowOpener extension. Any component or MenuItem that you extend with BrowserWindowOpener will make clicking the component open a new browser window with some options for the content. Opening a popup this way helps you bypass most popup blockers.

One of the things that BrowserWindowOpener can be configured to open in the new window is a new instance of a Vaadin UI class.

Java

  1. public class OpeningUIInPopup extends UI {
  2.   @Override
  3.   protected void init(VaadinRequest request) {
  4.     Button popupButton = new Button("Open popup with MyPopupUI");
  6.     BrowserWindowOpener popupOpener = new BrowserWindowOpener(MyPopupUI.class);
  7.     popupOpener.setFeatures("height=300,width=300");
  8.     popupOpener.extend(popupButton);
  10.     // Add a parameter
  11.     popupOpener.setParameter("foo", "bar");
  13.     // Set a fragment
  14.     popupOpener.setUriFragment("myfragment");
  16.     setContent(popupButton);
  17.   }
  18. }
  20. public class MyPopupUI extends UI {
  21.   @Override
  22.   protected void init(VaadinRequest request) {
  23.     setContent(new Label("This is MyPopupUI where parameter foo="
  24.         + request.getParameter("foo") + " and fragment is set to "
  25.         + getPage().getUriFragment()));
  26.   }
  27. }

In this example, a Button is created and extended with a BrowserWindowOpener. Furthermore, the size of the popup window is defined. See https://developer.mozilla.org/en-US/docs/DOM/window.open#Position_and_size_features for a description of the commonly supported features. If you don’t define any features, the browser will use its default setting which usually makes it open a new tab instead of opening a popup window.

The BrowserWindowOpener can also be used to open a Resource or any URL that you define using different constructors.