使用ui：field声明将id添加到字段

Question

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

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

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

但是，当我尝试编译时，我收到此错误：

[错误]无法在同一元素元素（：23）上声明id =“lastName”和ui：field =“lastNameField”

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

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

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

有没有办法在UiBinder XML本身中使用ui：field声明向元素添加ID？

Answer 1

UiBinder使用ID来实现其ui:field magic，因此不能从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> 

• 从Java读取for=""值以在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()); 

Answer 2

您可以通过访问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>

Answer 3

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