I'm trying to declare these elements in my UiBinder XML:
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" ui:field="lastNameField" maxlength="150" />
Simply put, a label that is associated with a text input.
When I try to compile, however, I get this error:
[ERROR] Cannot declare id="lastName" and ui:field="lastNameField" on the same element Element (:23)
This seems like an idiotic restriction, especially since ui:field
doesn't generate an ID. The only solution I've found so far is to assign the ID in the Java code itself like this:
@UiElement InputElement lastNameField;
...
lastNameField.setId("lastName");
This adds needless clutter to my Java. It also adds the complication that if this ID gets updated somewhere down the line, the <label>
declaration in the XML will also need to be updated (and there's no @UiElement for the label, so it's pretty much completely invisible from the Java side.)
Is there a way to add an ID to an element with a ui:field declaration from within the UiBinder XML itself?
UiBinder uses the ID to implement its ui:field
magic, so no you can't set it from the XML.
The way to do it is to have a Java constant with the ID and use it from both sides:
@UiField(provided = true)
final String lastNameId = Document.get().createUniqueId();
@UiField InputElement lastNameField;
…
lastNameField.setId(LAST_NAME_ID);
and in the XML:
<ui:with field="lastNameId" type="java.lang.String"/>
…
<label for="{lastNameId}">Last Name:</label>
<input ui:field="lastNameField" maxlength="150"/>
Note that I haven't tested the above code with type="java.lang.String"
, I've always used
a class containing various identifiers instead (or rather, an interface with a generator)
Alternatives are:
if you can, use the alternate syntax for <label>
:
<label>Last Name: <input ui:field="lastNameField" maxlength="150"/></label>
read the for=""
value from Java to use it in setId()
, that way at least you remove duplication, but you'll still have the issue that your IDs possibly won't be unique (as soon as you use your UiBinder-widget more than once)
<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());