如何在不向 DOM 添加 DIV 的情况下创建 GWT Composite 小部件？答案

【问题标题】：How can I create a GWT Composite widget without adding a DIV to the DOM?如何在不向 DOM 添加 DIV 的情况下创建 GWT Composite 小部件？
【发布时间】：2012-01-11 23:53:16
【问题描述】：

如果我使用 UIBinder 创建一个复合小部件，然后在代码中使用我创建的小部件，它会在我的小部件周围插入和额外的 <div> 元素。有没有办法消除div或者控制它是什么元素？

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>

编辑看来DIV是由<g:HTMLPanel>创建的

【问题讨论】：

标签： java gwt

【解决方案1】：

是的，该 div 正在由 HTML 面板创建。您可以删除 HTMLPanel，但您必须将绑定类型更改为 Element，并且您将无法再将其用作组合。在这种情况下，我会执行以下操作：

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>

【讨论】：

出于问题的目的，我简化了我的示例，而不仅仅是一个标签，我有几个字段，如果不是复合字段，我还能有几个字段吗？
只要不使用小部件（仅 com.google.gwt.dom.client.* 元素），可以；显然你仍然需要一个容器元素。
是的；您可以在其中拥有所需的所有 HTML，只是不能添加小部件，这就是 HTML 面板的用途，因为它处理小部件的逻辑绑定。如果您自己处理逻辑绑定，则可以将小部件的元素注入到您的 html 中，但实际上您将重写大量 HTMLPanel 绑定逻辑。

【解决方案2】：

部分回答 显然<g:HTMLPanel> 生成了 div 并且可以通过使用 tag 属性来控制：

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

信用：Trying to get UIBinder to give me a span not a div

这并不能完全解决我的需求，因为我想消除 DIV（使用 HTMLPanel 的替代品？）或能够与之交互（添加类等）。

【讨论】：