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>

Answer 1

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>