How can I create a GWT Composite widget without adding a DIV to the DOM?

Question

If I create a Composite Widget using UIBinder, then use my created widget in code, it inserts and extra <div> element around my widget. Is there a way to eliminate the div or control what kind of element it is?

public class ExamplePanel<T> extends Composite {
    @UiField LabelElement inputLabel;
    private static ExamplePanelUiBinder uiBinder = GWT.create(ExamplePanelUiBinder.class);
    interface ExamplePanelUiBinder extends UiBinder<Widget, ExamplePanel> { }

    public ExamplePanel() {
        initWidget(uiBinder.createAndBindUi(this));
    }
}

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <g:HTMLPanel>
            <label ui:field="inputLabel">Label text</label>
    </g:HTMLPanel>
</ui:UiBinder>

Edit It appears that the DIV is being created by the <g:HTMLPanel>

score 3 · Accepted Answer · answered Jan 12 '12 at 00:06

3

Yes, the div is being created by the HTML panel. You can remove the HTMLPanel, but you will have to change the binding type to Element and you will no longer be able to use it as a composite. I this case I would do the following:

public class ExamplePanel extends Widget
{
    private static ExamplePanelUiBinder uiBinder = GWT.create(ExamplePanelUiBinder.class);

    interface ExamplePanelUiBinder extends UiBinder<Element, ExamplePanel>
    {
    }

    @UiField LabelElement inputLabel;

    public ExamplePanel()
    {
        setElement(uiBinder.createAndBindUi(this));
    }
}

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
    <label ui:field="inputLabel">Label text</label>
</ui:UiBinder>

answered Jan 12 '12 at 00:06

LINEMAN78

2,562
16
19

I simplified my example for the purpose of the question, instead of just a label I have several fields, would I still be able to have several fields if it isn't a composite? – checketts Jan 12 '12 at 00:10
As long as you don't use widgets (only com.google.gwt.dom.client.* elements), yes; obviously you still need a single container element. – Thomas Broyer Jan 12 '12 at 12:54
Yeah; you can have all the HTML you want in there, you just can't add a widget, thats what HTML panel is for because it handles the logical binding of the widgets. If you handle the logical binding yourself you can inject the elements of the widgets into your html, but you will essentially be rewriting a lot of the HTMLPanel binding logic. – LINEMAN78 Jan 12 '12 at 21:18

score 1 · Answer 2 · edited May 23 '17 at 10:28

Partial Answer Apparently the <g:HTMLPanel> generates the div and can be controlled by using the tag attribute:

<g:HTMLPanel tag="span">
    <!-- your stuff -->
</g:HTMLPanel>

Credit: Trying to get UIBinder to give me a span not a div

This doesn't solve my need completely since I want to either eliminate the DIV (using an alternative to HTMLPanel?) or be able to interact with it (to add classes etc).

How can I create a GWT Composite widget without adding a DIV to the DOM?

2 Answers2