I’m currently participating on a software development project using the Google Web Toolkit (GWT). While developing the GUI for a certain part of this project, I came across the need of a group box panel.

For those who don’t know what a group box is; here is an example:

Fortunately this type of panel is directly supported by HTML throught the <fieldset> tag. Unfortunately it isn’t supported by GWT (yet). However, it’s very simple to implement this using the SimplePanel class provided by GWT.

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.SimplePanel;

/**
 * A group box panel (i.e. a frame where to which a caption can be
 * attached). The caption can be set via {@link #setCaption(String)}. 
 * The content can be set via {@link SimplePanel#setWidget()}.
 *
 * @author Sebastian Krysmanski
 */
public class GroupBoxPanel
  extends SimplePanel {

  private final Element m_caption = DOM.createLegend();
  
  public GroupBoxPanelImpl() {
    super(DOM.createFieldSet());

    DOM.appendChild(getContainerElement(), this.m_caption);
  }

  public GroupBoxPanelImpl(String caption) {
    this();
    setCaption(caption);
  }

  public String getCaption() {
    return DOM.getInnerText(this.m_caption);
  }

  public void setCaption(String caption) {
    DOM.setInnerText(this.m_caption, caption);
  }
}

This code is released as public domain.