What would be a better approach for displaying a dynamic required field indicator (in my case, display a '*' next to the field IF it is empty, hide it if the user type something, display it again if the user clears the input field) ? The indicator is called requiredFieldHighlight in the code below.
MyValueBoxEditorDecorator.java
public class MyValueBoxEditorDecorator<T> extends Composite implements HasEditorErrors<T>,
IsEditor<ValueBoxEditor<T>>
{
interface Binder extends UiBinder<Widget, MyValueBoxEditorDecorator<?>>
{
Binder BINDER = GWT.create(Binder.class);
}
@UiField
DivElement label;
@UiField
SimplePanel contents;
@UiField
DivElement requiredFieldHighlight;
@UiField
DivElement errorLabel;
private ValueBoxEditor<T> editor;
private ValueBoxBase<T> valueBox;
/**
* Constructs a ValueBoxEditorDecorator.
*/
@UiConstructor
public MyValueBoxEditorDecorator()
{
initWidget(Binder.BINDER.createAndBindUi(this));
}
public MyValueBoxEditorDecorator(int dummy)
{
this();
valueBox = (ValueBoxBase<T>) new TextBoxTest(requiredFieldHighlight);
this.editor = valueBox.asEditor();
valueBox.addValueChangeHandler(new ValueChangeHandler<T>()
{
@Override
public void onValueChange(ValueChangeEvent<T> event)
{
MyValueBoxEditorDecorator.this.onValueChange();
}
});
contents.add(valueBox);
MyValueBoxEditorDecorator.this.onValueChange();
}
private void onValueChange()
{
T value = editor.getValue();
if (value == null)
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.INLINE_BLOCK);
return;
}
else
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.NONE);
}
}
public ValueBoxEditor<T> asEditor()
{
return editor;
}
public void setEditor(ValueBoxEditor<T> editor)
{
this.editor = editor;
}
@UiChild(limit = 1, tagname = "valuebox")
public void setValueBox(ValueBoxBase<T> widget)
{
contents.add(widget);
setEditor(widget.asEditor());
}
@Override
public void showErrors(List<EditorError> errors)
{
// this manages the content of my errorLabel UiField
}
}
UiBinder file:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style src="common.css" />
<g:HTMLPanel width="100%">
<div ui:field="label" class="{style.label}"/>
<g:SimplePanel ui:field="contents" stylePrimaryName="{style.contents}" />
<div class="{style.errorLabel}" ui:field="errorLabel" />
<div class="{style.errorLabel} {style.requiredFieldHighlight}" ui:field="requiredFieldHighlight">*</div>
</g:HTMLPanel>
</ui:UiBinder>
The issue with my approach is that onValueChange() will not be called when my screen is initialized (before the user interacts with this widget), although I need the MyValueBoxEditorDecorator to update the status of its 'requiredFieldHighlight' ! This is why I created that TextBoxTest class. I simply pass it a reference to the indicator DivElement object and overload setText+setValue.
TextBoxTest.java
public class TextBoxTest extends TextBox
{
@Override
public void setText(String text)
{
super.setText(text);
updateRequiredFieldHighlight(text);
}
private final DivElement requiredFieldHighlight;
public TextBoxTest(DivElement requiredFieldHighlight)
{
super();
this.requiredFieldHighlight = requiredFieldHighlight;
}
private void updateRequiredFieldHighlight(String withValue)
{
if (withValue != null && !withValue.isEmpty())
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.NONE);
}
else
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.INLINE_BLOCK);
}
}
@Override
public void setValue(String value, boolean fireEvents)
{
super.setValue(value, fireEvents);
updateRequiredFieldHighlight(value);
}
}
I have several problems with that approach. First, it creates a dependency to another specific class of mine (TextBoxTest), and second, it does not really work properly because setText() is not automagically called by GWT when I clear the contents of the text field using the GUI ! In other words for the indicator to work properly, I need BOTH to overload setText+setValue in the TextBoxTest class and have to ValueChangeHandler added to my MyValueBoxEditorDecorator object. Why ? (and where would be the right event / place to handle a text change ?)
20150629 update: actually setValue() IS called when my screen is initialized. My valueChangeHandler is not triggered, 'though, due to GWT internals (I think due to setValue() provided without a fireEvents flag calling fireEvents overload with a False fireEvent flag).