Titled frame panel for GWT (using FIELDSET and LEGEND html tags)

Question

I'm trying to create a titled border frame in GWT, which results in this:

This can be done using HTML fieldset and legend tags, such as

<fieldset> 
    <legend>Connection parameters</legend>
    ... the rest ...
</fieldset>

I want to create a custom widget in GWT that implements that. I managed to do that, but the problem is that events that happen inside the widget (button click etc) does not get fired although I have added the handler.

My implementation of the widget is as follows:

public class TitledPanel extends Widget {
private Element legend;
private Widget content = null;

public TitledPanel() {
    Element fieldset = DOM.createFieldSet();
    legend = DOM.createLegend();
    DOM.appendChild(fieldset, legend);
    setElement(fieldset);
}

public TitledPanel(String title) {
    this();
    setTitle(title);
}

@Override
public String getTitle() {
    return DOM.getInnerHTML(legend);
}

@Override
public void setTitle(String html) {
    DOM.setInnerHTML(legend, html);
}

public Widget getContent() {
    return content;
}

public void setContent(Widget content) {
    if (this.content != null) {
        DOM.removeChild(getElement(), this.content.getElement());
    }

    this.content = content;

    DOM.appendChild(getElement(), content.getElement());
}
}

Do I need to extend Composite, or need to manually reroute the events, or is there other ways?

Answer 1

I think you're looking for CaptionPanel:

A panel that wraps its contents in a border with a caption that appears in the upper left corner of the border. This is an implementation of the fieldset HTML element.

Answer 2

I think the problem here is that you just call DOM.appendChild - this doesn't cause the TitledPanel to adopt the Widget. The normal course of action is that you extend Composite and then call initWidget(Widget widget) - inside the hood it calls widget.setParent(this);, which in turn makes the parent adopt this widget and attach it to the browser's document. However com.google.gwt.user.client.ui.Widget.setParent(Widget) is only package-visible so you can't call it from your code (after, for example, DOM.appendChild).

I'd recommend reading Widget Best Practices / Widget Building, especially the Clean up after yourself and/or look at the source code for some GWT Widgets, to get the idea how the GWT sees custom widget creation.

And, as Robert suggested, CaptionPanel is the safer route :)