使用ui:字段声明向字段添加id

Question

我想在我的UiBinder XML中声明这些元素:

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

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

当我尝试编译时，然而，我得到这个错误:

[ERROR]不能在同一个元素上声明id="lastName"和ui:field="lastNameField"

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

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

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

是否有一种方法来添加一个ID到一个元素与ui:字段声明从UiBinder XML本身?

Answer 1

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>
  

• 从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

你可以通过像这样访问ibinder中的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控件