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 Code中，我将像往常一样访问和绑定Label小部件：

@UiField Label testlabel;

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

非常感谢提前

Answer 1

抱歉，没有办法，UiBinder不支持这种语法。想一想 - 这个Widget会去哪里？它应该添加到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 name，因为我们不打算使用它。就我们而言，有效的根小部件是“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 
  }
}

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

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

3 个答案: