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

时间:2013-04-17 21:57:27

标签: gwt uibinder

我正在尝试在我的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?

3 个答案:

答案 0 :(得分: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>
    
  • 从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());
    

答案 1 :(得分: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>

答案 2 :(得分:0)

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