GWT：基于 uiBinder 的小部件不能第二次实例化答案

【问题标题】：GWT: uiBinder-based widget cant be instanced second timeGWT：基于 uiBinder 的小部件不能第二次实例化
【发布时间】：2010-05-05 08:20:03
【问题描述】：

我使用 GWT uiBinder 创建了一个小部件。它工作正常，直到我想第二次实例化它。在我第二次调用构造函数后，它只返回来自 XML 的原始描述，并且构造函数 (rootElement.add( new HTML( "panel1" ), leftId );) 中的语句不起作用。它不会引发错误或警告。

请帮忙

Java 类：

public class DashboardLayout extends Composite {

final String leftId = "boxLeft";
final String rightId = "boxRight";

interface DashboardLayoutUiBinder extends UiBinder<HTMLPanel, DashboardLayout> {
}

private static DashboardLayoutUiBinder ourUiBinder = GWT.create( DashboardLayoutUiBinder.class );

@UiField
HTMLPanel htmlPanel;

public DashboardLayout() {
    HTMLPanel rootElement = ourUiBinder.createAndBindUi( this );
    this.initWidget( rootElement );

    rootElement.add( new HTML( "panel1" ), leftId );
    rootElement.add( new HTML( "panel2" ), rightId );

}
   }

XML 描述：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             >
    <g:HTMLPanel ui:field="htmlPanel">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="40%" id="boxLeft" class="boxContextLeft">

                </td>

                <td width="60%" id="boxRight" class="boxContextRight">

                </td>
            </tr>
        </table>
    </g:HTMLPanel>
</ui:UiBinder>

【问题讨论】：

我无法重现您所描述的行为。您的 UiBinder 小部件似乎是正确的。您如何将小部件添加到父小部件（RootPanel 或子小部件）？
哦，我知道你可能有什么问题。如果您再次将小部件添加到 DOM，则您的 id 的 boxLeft 和 boxRight 不是唯一的。

标签： gwt uibinder

【解决方案1】：

不要在小部件中使用id="myid"，因为它们将是全局的（这会搞砸你）而不是每个小部件实例化的范围；使用ui:field="myid"，然后在java类中创建对应的UiField变量。这将允许 gwt 编译器混淆 id，这样您就不会在同一小部件的实例之间发生冲突。

DashboardLayout.java

public class DashboardLayout extends Composite {

    interface DashboardLayoutUiBinder extends
            UiBinder<HTMLPanel, DashboardLayout> {
    }

    private static DashboardLayoutUiBinder ourUiBinder = GWT
            .create(DashboardLayoutUiBinder.class);

    @UiField
    HTMLPanel htmlPanel;

    @UiField
    HTML panel1;

    @UiField
    HTML panel2;

    public DashboardLayout() {
        HTMLPanel rootElement = ourUiBinder.createAndBindUi(this);
        this.initWidget(rootElement);

        // do stuff with panel1
        panel1.setHTML("<blink>blink</blink>");

        // do stuff with panel2
        panel2.setHTML("<marquee>marquee</marquee>");
    }
}

DashboardLayout.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:HTMLPanel ui:field="htmlPanel">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="40%" class="boxContextLeft">
                    <g:HTML ui:field="panel1"></g:HTML>
                </td>

                <td width="60%" class="boxContextRight">
                    <g:HTML ui:field="panel2"></g:HTML>
                </td>
            </tr>
        </table>
    </g:HTMLPanel>
</ui:UiBinder>

【讨论】：