GWT IsEditor Example

NumberField.java

package net.nabilh.gwtsandbox.client.widgets.form;

import com.google.gwt.core.client.GWT;
import com.google.gwt.editor.client.IsEditor;
import com.google.gwt.editor.ui.client.adapters.ValueBoxEditor;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiConstructor;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.*;

/**
 * A simple composite widget UI binder example which implements HasValue<String>.
 * Consists of a label and an IntegerBox for data entry purposes.
 *
 * Author: Nabil Hassan
 * Date: 12/07/2015 17:42
 */
public class NumberField extends Composite implements HasValue<Integer>, IsEditor<ValueBoxEditor<Integer>> {

    interface Binder extends UiBinder<Widget, NumberField> {}
    private static Binder uiBinder = GWT.create(Binder.class);
    private ValueBoxEditor<Integer> editor;

    @UiField Label label;
    @UiField IntegerBox box;

    @UiConstructor
    public NumberField(String label) {
        initWidget(uiBinder.createAndBindUi(this));
        this.label.setText(label);
    }

    @Override
    public Integer getValue() {
        return box.getValue();
    }

    @Override
    public void setValue(Integer value, boolean fireEvents) {
        box.setValue(value);
    }

    @Override
    public void setValue(Integer value) {
        setValue(value, false);
    }

    @Override
    public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Integer> handler) {
        return box.addValueChangeHandler(handler);
    }

    @Override
    public ValueBoxEditor<Integer> asEditor() {
        if (editor == null)
            editor = ValueBoxEditor.of(this.box);
        return editor;
    }

    public void clear() {
        box.setValue(null);
    }

}

NumberField.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style>
        .formFieldLabel {width: 7em; display: block; word-break:break-all;}
    </ui:style>

    <g:HorizontalPanel>
        <g:Label ui:field="label" addStyleNames="{style.formFieldLabel}"/>
        <g:IntegerBox ui:field="box"/>
    </g:HorizontalPanel>

</ui:UiBinder>