GWT - 如何在 uibinder xml 文件中定义布局层次结构之外的小部件

Question

这是我的第一篇文章。我希望有人可以帮助我。
我正在寻找一种在 UiBinder XML 布局文件中单独定义小部件的方法，而不是布局层次结构的一部分。 这是一个小例子：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">

<g:Label ui:field="testlabel" text="Hallo" />
<g:HTMLPanel>       
...
</g:HTMLPanel>

编译失败，因为 ui:UiBinder 元素只需要一个子元素。
在 Java 代码中，我将照常访问和绑定 Label 小部件：

@UiField Label testlabel;

例如，当您定义 Grid 或 FlexTable 时，这可能很有用 - 我想在 XML 布局文件中定义表头的标签，而不是在代码中以编程方式。

在此先感谢

Answer 1

抱歉，不能，UiBinder 只是不支持这种语法。想想看——这个小部件会去哪里？是否应该将其添加到 DOM 树中？这也使得编译器很难判断这段代码是否应该被修剪为未使用。

您必须等待 GWT 团队为 Grid 创建自定义标签（就像他们对 DockLayoutPanel 所做的那样）。我不希望 FlexTable 有这样的功能，因为它是为动态内容设计的，意味着无论如何都要以编程方式添加它。

Answer 2

了解UiBinder Dev Guide 是弄清楚如何清晰地构建 UiBinder 模板的关键。

因此，如果您只想创建一个小部件，并且最初没有将它放在 DOM 中，那么就不要在 UiBinder 模板中提及它。相反，在您的 UiBinder 模板附带的 Java 文件中，创建它并将其添加到您的模板中定义的面板中。

例如，把它放在你的模板中：

<g:HTMLPanel ui:field='container'>       
...

并将其放入您的 Java 文件中：

@UiField HTMLPanel container;
public MyWidget() {
  initWidget(uiBinder.createAndBindUi(this));
  Label testLabel = new Label("hallo");
  // Do whatever you want to testLabel
  container.add(testLabel);
}

Answer 3

我不确定你是否有同样的不寻常的动机在 uibinder 标记下放置两个以上的根小部件。不管怎样，我就是这样做的。

由于 uibinder 标签只允许一个根小部件，我放置一个 HTML ui 标签作为根小部件，然后在该标签内堆积我的多个伪根小部件。

在以下示例中，请注意实际的根小部件没有 ui:field 名称，因为我们不打算使用它。就我们而言，有效的根小部件是“tabLayout”和“content”。

文件 Hello.ui.xml：

<ui:UiBinder
  xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <g:HTML>
    <g:TabLayoutPanel ui:field="tabLayout"  ... >
      blah ... blah
    </g:TabLayoutPanel>
    <g:VerticalPanel ui:field="content">
      blah .. blah
    </g:VerticalPanel>
  </g:HTML>
</ui:UiBinder>

不要将复合扩展为模板后面的 java 代码。 创建由模块入口点导入的类或直接在模块上使用模板。

我需要多个根小部件的原因有很多。在此示例中，我有条件地附加了“有效根小部件”：

public class Hello
  implements EntryPoint{

  private static HelloUiBinder uiBinder = GWT.create(HelloUiBinder.class);

  interface HelloUiBinder
    extends UiBinder<Widget, Hello>{}

  @UiField TabLayoutPanel tabLayout;
  @UiField VerticalPanel content;

  @Override public void onModuleLoad() {
    uiBinder.createAndBindUi(this);

    if (condition1)
      RootPanel.get().add(tabLayout);
    else
      RootPanel.get().add(content);

    blah ... blah 
  }
}

所以，诀窍是根本不使用实际的根小部件。