GXT UiBinder FieldLabel

Question

I am new to UiBinder and I try to use a FieldLabel.

I found this post : GXT: UiBinder new instance of a Widget

where the developer uses those markups

<form:FieldLabel text="Text">
  <form:Widget>
    <form:TextField ui:field="text"/>
  </form:Widget>
</form:FieldLabel>

When I do exactly the same, I get the following error :

ERROR: Illegal child <form:Widget> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <form:FieldLabel text='Text'> (:7)

It seems that my version of GXT (3.0.1) does not allow to have a non-text-only child for the FieldLabel markup.

Up to now, the only solution I found to include a FieldLabel is to use

@UiField(provided = true)

Is there a better way to use FieldLabel with UiBinder?

Answer 1

The problem is that you shouldn't capitalize form:widget:

<form:FieldLabel text="Text">
  <form:widget>
    <form:TextField ui:field="text"/>
  </form:widget>
</form:FieldLabel>

In UiBinder, elements with a capital letter represent a real Widget subclass, while lowercase elements are either a regular html dom element, or some modifier for the parent widget tag. We can see that this is not a dom element because of the form: namespace, the same as the parent widget tag (i.e. <form:FieldLabel>).

How this works: The FieldLabel class has a Java method to give it the widget to display - setWidget. This method is decorated with a @UiChild annotation (in its superclass):

@Override
@UiChild(limit = 1, tagname = "widget")
public void setWidget(Widget w) {
  //...

This enables you, the UiBinder user, to refer to a tag as widget, and have that method invoked with whatever contents you enter.