GWT PopupPanel

GWT 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).

GWT PopupPanel Class Declaration

Let's see the declaration of com.google.gwt.user.client.ui.PopupPanel class.

GWT PopupPanel Nested Class

Class	Description
PopupPanel.AnimationType	It is the type of animation to use when opening the popup.
PopupPanel.PositionCallback	It is a callback that is used to set the position of a PopupPanel right before it is shown.
PopupPanel.ResizeAnimation	It is used to enlarge the popup into view.

GWT PopupPanel Constructors

Constructor	Description
PopupPanel()	It creates an empty popup panel.
PopupPanel(boolean autoHide)	It creates an empty popup panel, specifying its "auto-hide" property.
PopupPanel(boolean autoHide, boolean modal)	It creates an empty popup panel, specifying its "auto-hide" and "modal" properties.

GWT PopupPanel Common Methods

Modifier and Types	Method	Description
void	addAutoHidePartner(Element partner)	It is a mouse events that occur within an autoHide partner will not hide a panel set to autoHide.
void	center()	It centers the popup in the browser window and shows it.
PopupPanel.AnimationType	getAnimationType()	It get the type of animation to use when opening and closing the popup.
protected Element	getContainerElement()	It override this method to specify that an element other than the root element be the container for the panel's child widget.
protected Element	getGlassElement()	It get the glass element used by this PopupPane
int	getOffsetHeight()	It gets the panel's offset height in pixels.
int	getOffsetWidth()	It gets the panel's offset width in pixels.
void	hide()	It hides the popup and detaches it from the page.
void	hide(boolean autoClosed)	It hides the popup and detaches it from the page.
boolean	isAnimationEnabled()	It returns true if animations are enabled, false if not.
boolean	isModal()	It returns true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored.
boolean	isPreviewingAllNativeEvents()	It returns true if the popup should preview all native events, even if the event has already been consumed by another popup.
void	setModal(boolean modal)	When the popup is modal, keyboard or mouse events that do not target the PopupPanel or its children will be ignored.
void	setAnimationType(PopupPanel.AnimationType type)	It set the type of animation to use when opening and closing the popup.

GWT PopupPanel Example 1

//SamplePopupPanel.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class MyPopup extends DialogBox {
  interface MyPopupUiBinder extends UiBinder<Widget, MyPopup> {}
  private static MyPopupUiBinder uiBinder = GWT.create(MyPopupUiBinder.class);

  public MyPopup() {
    super(false, true);
    
    setWidget(uiBinder.createAndBindUi(this));
    
    setGlassEnabled(true);
  }
}

//SamplePopupPanel.css

.gwt-PopupPanelGlass {
  opacity:0.3;
  filter:alpha(opacity=30);
  background-color: grey;
}

Output:

GWT PopupPanel Example 2

//SamplePopupPanel.java

import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.HtmlEditor;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Popup implements EntryPoint {

  public void onModuleLoad() {
    final Window w = new Window();
    w.setPlain(true);
    w.setSize(500, 300);
    w.setHeading("Resize Me");
    w.setLayout(new FitLayout());

    FormPanel panel = new FormPanel();
    panel.setBorders(false);
    panel.setBodyBorder(false);
    panel.setLabelWidth(55);
    panel.setPadding(5);
    panel.setHeaderVisible(false);

    TextField<String> field = new TextField<String>();
    field.setFieldLabel("Sent To");
    panel.add(field, new FormData("100%"));

    field = new TextField<String>();
    field.setFieldLabel("Subject");
    panel.add(field, new FormData("100%"));

    HtmlEditor html = new HtmlEditor();
    html.setHideLabel(true);
    panel.add(html, new FormData("100% -53"));

    w.addButton(new Button("Send"));
    w.addButton(new Button("Cancel"));
    w.add(panel);

    Button b = new Button("Open", new SelectionListener<ButtonEvent>() {

      @Override
      public void componentSelected(ButtonEvent ce) {
        w.show();
      }

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

  }
}

Output: