添加ID与用户界面现场:现场申报(Add id to field with ui:field dec

2019-08-31 10:08发布

我想声明我UiBinder的XML这些因素:

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

简单地说,就是用一个文本输入相关联的标签。

当我尝试编译,但是,我得到这个错误:

[错误]无法声明ID =“姓氏”和UI:字段=“lastNameField”在相同的元素元素(23)

这似乎是一个愚蠢的限制,尤其是ui:field不生成ID。 到目前为止,我已经找到了唯一的解决办法就是在Java代码本身是这样分配ID:

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

这增加了不必要的混乱给我的Java。 这也增加了复杂性,如果这个ID被某个更新的路线,在<label>在XML声明中也需要更新(而且也没有@UiElement的标签,所以它几乎是从Java侧完全看不见。)

有没有一种方法,以一个ID为一个元素添加了UI:从UiBinder的XML本身领域内申报?

Answer 1:

UiBinder的使用ID来实现它的ui:field魔法,所以没有你不能从XML设置。

做到这一点的方法是有一个Java不变的ID,并从两侧使用它:

@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()); 


Answer 2:

您可以在这样UiBinder的访问ID简化托马斯的回答(略):

<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引导有一个方便的功能,它可以让你线了只在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部件。



文章来源: Add id to field with ui:field declaration
标签: gwt uibinder