Creating a GWT Popup Window – Sample Code Example for PopupPanel and UiBinder

This post is an easy tutorial for creating a popup window in GWT using the PopupPanel component included in the panel. Its really quite simple, so hopefully it will get you going in just a few minutes.

This screenshot shows what is accomplished in this tutorial:

This example was built using GWT SDK 2.0.3. It employs the UiBinder templating facility to define the contents of the popup, but you can easily do without UiBinder as well.

Sample Code

Because I am lazy, I am splatting in my code “as is”. This means you need to understand that my popup window is called EEGraphPopup and my main application window is the RewardsView. Otherwise, it should all be self explanatory.

EEGraphPopup.java

Create a new Java file in your client directory. This file holds the code behind your popup panel. Notice it directly extends PopupPanel.

package com.tendril.ui.components.reward.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* A simple popup that displays a EEGraph's information.
*/
public class EEGraphPopup extends PopupPanel {

    @UiTemplate("EEGraphPopup.ui.xml")
    interface Binder extends UiBinder<Widget, EEGraphPopup> { }
    private static final Binder binder = GWT.create(Binder.class);
    public EEGraphPopup() {
      // The popup's constructor's argument is a boolean specifying that it
      // auto-close itself when the user clicks outside of it.
      super(true);
      add(binder.createAndBindUi(this));
    }
}

EEGraphPopup.ui.xml

If you are using UiBinder to define your popup view, create this file in your client directory.

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'
>

  <ui:image field='ee_graph' src='consumer_ee_graph.png'/>

  <ui:style>

  @sprite .ee_graph {
    gwt-image: 'ee_graph';
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  </ui:style>

  <g:HTMLPanel styleName='ee_graph_popup'>
      <span>Baseline Energy Usage</span>
    <div class='{style.ee_graph}'/>
  </g:HTMLPanel>

</ui:UiBinder>

rewards.css

Put this stuff in your application’s CSS file.

.ee_graph_popup {
    background: #dfefc8;
    border: 1px solid #808080;
    padding: 0.5em;
    width: 650px;
    height: 400px;
}

RewardsView.java

This code belongs in the view that triggers the popup. I trigger mine via a button ClickHandler. Notice how the line that centers your popup. Also, setGlassEnabled dims the rest of the screen – a very nice feature!

public void onClick(ClickEvent event) {
    EEGraphPopup popup = new EEGraphPopup();
    popup.setGlassEnabled(true);
    popup.center();
    popup.show();
}

References

This post was made possible by a couple other blog posts. Check in with these too:

• Roughian Popup Example
• Centering your popup

Technorati Tags: gwt,popups