12

我试图在我的 UiBinder XML 中声明这些元素：

<label for="lastName">Last Name:</label>
<input type="text" id="lastName" ui:field="lastNameField" maxlength="150" />

简单地说，与文本输入相关联的标签。

但是，当我尝试编译时，出现此错误：

[错误] 不能在同一元素 Element (:23) 上声明 id="lastName" 和 ui:field="lastNameField"

这似乎是一个愚蠢的限制，尤其是因为ui:field它不会生成 ID。到目前为止，我发现的唯一解决方案是在 Java 代码本身中分配 ID，如下所示：

@UiElement InputElement lastNameField;
...
lastNameField.setId("lastName");

这给我的 Java 添加了不必要的混乱。它还增加了复杂性，即如果此 ID 在某处更新，<label>则 XML 中的声明也需要更新（并且标签没有 @UiElement，因此从 Java 端几乎完全不可见。）

有没有办法从 UiBinder XML 本身中将 ID 添加到具有 ui:field 声明的元素？

4

3 回答 3

12

UiBinder 使用 ID 来实现它的ui:field魔力，所以你不能从 XML 中设置它。

这样做的方法是使用带有 ID 的 Java 常量并从双方使用它： 

@UiField(provided = true)
final String lastNameId = Document.get().createUniqueId();

@UiField InputElement lastNameField;

…

lastNameField.setId(LAST_NAME_ID);

在 XML 中： 

<ui:with field="lastNameId" type="java.lang.String"/>

…

<label for="{lastNameId}">Last Name:</label>
<input ui:field="lastNameField" maxlength="150"/>

请注意，我没有用 测试上面的代码type="java.lang.String"，我一直使用包含各种标识符的类（或者更确切地说，带有生成器的接口）

替代方案是：

  • 如果可以，请使用以下替代语法<label>： 

    <label>Last Name: <input ui:field="lastNameField" maxlength="150"/></label>

  • for=""从 Java 中读取值以在其中使用它setId()，这样至少可以删除重复项，但是您仍然会遇到 ID 可能不是唯一的问题（只要您多次使用 UiBinder-widget） 

    <label ui:field="lastNameLabel" for="lastName">Last Name:</label>
<input ui:field="lastNameField" maxlength="150" />

    @UiField LabelElement lastNameLabel;
@UiField InputElement lastNameField;

…

lastNameField.setIf(lastNameLabel.getHtmlFor());
于 2013-04-17T22:39:39.613 回答
4

您可以通过像这样访问 uibinder 中的 id 来简化 Thomas 的回答（有点）：

<b:ControlLabel for="{testTextBox.getId}">TextBox</b:ControlLabel>
<b:TextBox ui:field="testTextBox"></b:TextBox>

// In code behind:
@UiField(provided = true)
TextBox testTextBox = new TextBox();
...
testTextBox.setId("test");
this.initWidget(uiBinder.createAndBindUi(this));

如果您使用 GWT Bootstrap，那么有一个方便的功能可以让您仅在 xml 中连接所有内容：

<b:ControlLabel for="{testTextBox.getId}">TextBox</b:ControlLabel>
<b:TextBox ui:field="testTextBox" b:id="test"></b:TextBox>
于 2013-11-25T16:30:57.550 回答
0

b:id="test"适用于所有gwtbootstrap3小部件。

于 2015-02-06T20:35:02.850 回答