CODEWITHSUNDEEP
javagwt
checketts
checketts

Reputation: 14963

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

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>

Upvotes: 3

Views: 2408

Answers (2)

checketts
checketts

Reputation: 14963

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).

Upvotes: 1

LINEMAN78
LINEMAN78

Reputation: 2562

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>

Upvotes: 3

Related Questions