Package com.google.gwt.user.client.ui

Class PopupPanel

java.lang.Object
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
com.google.gwt.user.client.ui.SimplePanel
com.google.gwt.user.client.ui.PopupPanel
All Implemented Interfaces:
HasAttachHandlers, HasCloseHandlers<PopupPanel>, HasHandlers, EventListener, EventPreview, AcceptsOneWidget, HasAnimation, HasOneWidget, HasVisibility, HasWidgets, HasWidgets.ForIsWidget, IsWidget, SourcesPopupEvents, Iterable<Widget>
Direct Known Subclasses:
DecoratedPopupPanel, LoggingPopup
public class PopupPanel extends SimplePanel implements SourcesPopupEvents, EventPreview, HasAnimation, HasCloseHandlers<PopupPanel>
A panel that can "pop up" over other widgets. It overlays the browser's client area (and any previously-created popups).

A PopupPanel should not generally be added to other panels; rather, it should be shown and hidden using the show() and hide() methods.

The width and height of the PopupPanel cannot be explicitly set; they are determined by the PopupPanel's widget. Calls to setWidth(String) and setHeight(String) will call these methods on the PopupPanel's widget.

The PopupPanel can be optionally displayed with a "glass" element behind it, which is commonly used to gray out the widgets behind it. It can be enabled using setGlassEnabled(boolean). It has a default style name of "gwt-PopupPanelGlass", which can be changed using setGlassStyleName(String).

Example

public class PopupPanelExample implements EntryPoint {

  private static class MyPopup extends PopupPanel {

    public MyPopup() {
      // PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
      // If this is set, the panel closes itself automatically when the user
      // clicks outside of it.
      super(true);

      // PopupPanel is a SimplePanel, so you have to set it's widget property to
      // whatever you want its contents to be.
      setWidget(new Label("Click outside of this popup to close it"));
    }
  }

  public void onModuleLoad() {
    Button b1 = new Button("Click me to show popup");
    b1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        // Instantiate the popup and show it.
        new MyPopup().show();
      }
    });

    RootPanel.get().add(b1);

    Button b2 = new Button("Click me to show popup partway across the screen");

    b2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        // Create the new popup.
        final MyPopup popup = new MyPopup();
        // Position the popup 1/3rd of the way down and across the screen, and
        // show the popup. Since the position calculation is based on the
        // offsetWidth and offsetHeight of the popup, you have to use the
        // setPopupPositionAndShow(callback) method. The alternative would
        // be to call show(), calculate the left and top positions, and
        // call setPopupPosition(left, top). This would have the ugly side
        // effect of the popup jumping from its original position to its
        // new position.
        popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
          public void setPosition(int offsetWidth, int offsetHeight) {
            int left = (Window.getClientWidth() - offsetWidth) / 3;
            int top = (Window.getClientHeight() - offsetHeight) / 3;
            popup.setPopupPosition(left, top);
          }
        });
      }
    });

    RootPanel.get().add(b2);
  }
}

CSS Style Rules

.gwt-PopupPanel
the outside of the popup
.gwt-PopupPanel .popupContent
the wrapper around the content
.gwt-PopupPanelGlass
the glass background behind the popup