GWT 2.5.1: dynamic required field indicator

239 views Asked by At

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).

0

There are 0 answers