GWT LeafValueEditor Example

PhoneNumberField.java

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

import com.google.gwt.core.client.GWT;
import com.google.gwt.editor.client.*;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
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.*;
import net.nabilh.gwtsandbox.shared.utils.StringUtils;
import net.nabilh.gwtsandbox.shared.dto.PhoneNumberDTO;

import java.util.logging.Logger;

/**
 * Simple phone number field comprised of two text entry boxes. <br/> <br/>
 * Author: Nabil Hassan <br/>
 * Date: 13/07/2015 22:54 <br/>
 */
public class PhoneNumberField extends Composite implements HasValue<PhoneNumberDTO>, LeafValueEditor<PhoneNumberDTO>, HasEditorDelegate<PhoneNumberDTO> {

    public static final String NUMBER_PATTERN = "[0-9]+";

    public static final Logger LOG = Logger.getLogger(PhoneNumberField.class.getName());

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

    private EditorDelegate editorDelegate;

    @UiField
    @Ignore
    Label label;

    @UiField
    TextBox extension, number;

    public PhoneNumberField() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @Override
    public PhoneNumberDTO getValue() {
        LOG.finest("getValue() called on " + editorDelegate.getPath());
        resetErrorMarkings();

        LOG.finest("Validating extension and number values");
        if (!StringUtils.isNullOrEmptyString(extension.getValue()) && !extension.getValue().matches(NUMBER_PATTERN)) {
            LOG.warning("Extension not valid for phone number with path: " + editorDelegate.getPath());
            editorDelegate.recordError("Invalid extension: '" + extension.getValue() + "'", null, null);
            extension.getElement().getStyle().setBackgroundColor("red");
        }
        if (!StringUtils.isNullOrEmptyString(number.getValue()) && !number.getValue().matches(NUMBER_PATTERN)) {
            LOG.warning("Number not valid for phone number with path: " + editorDelegate.getPath());
            editorDelegate.recordError("Invalid number: '" + number.getValue() + "'", null, null);
            number.getElement().getStyle().setBackgroundColor("red");
        }

        LOG.finest("Validation completed");
        return new PhoneNumberDTO(extension.getValue(), number.getValue());
    }

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

    @Override
    public void setValue(PhoneNumberDTO value, boolean fireEvents) {
        String extension_old = extension.getValue();
        String number_old = number.getValue();
        String extension_new = value == null ? null : value.getExtension();
        String number_new = value == null ? null : value.getNumber();
        boolean changed = (!StringUtils.nullSafeEquals(extension_old, extension_new)
                || !(StringUtils.nullSafeEquals(number_old, number_new)));

        extension.setValue(extension_new);
        number.setValue(number_new);

        if (fireEvents && changed)
            ValueChangeEvent.fire(this, value);
    }

    @Override
    public HandlerRegistration addValueChangeHandler(ValueChangeHandler<PhoneNumberDTO> handler) {
        return null; // Not yet implemented
    }

    @Override
    public void setDelegate(EditorDelegate<PhoneNumberDTO> delegate) {
        this.editorDelegate = delegate;
    }

    public void setLabelText(String labelTxt) {
        label.setText(labelTxt);
    }

    @Override
    public String toString() {
        return new StringBuilder().append("PhoneNumberField {")
                .append("extension='").append(extension.getValue()).append("'")
                .append(", number='").append(number.getValue()).append("'")
                .append("}").toString();
    }

    private void resetErrorMarkings() {
        extension.getElement().getStyle().clearBackgroundColor();
        number.getElement().getStyle().clearBackgroundColor();
    }
}

PhoneNumberField.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;}
        .marginLeft {margin-left:0.5em;}
        .italicTxt {font-style: italic;}
    </ui:style>

    <g:HorizontalPanel>
        <g:Label ui:field="label" addStyleNames="{style.formFieldLabel}"/>
        <g:Label addStyleNames="{style.italicTxt}" text="ext."/>
        <g:TextBox ui:field="extension" addStyleNames="{style.marginLeft}"/>
        <g:Label addStyleNames="{style.italicTxt} {style.marginLeft}" text="no."/>
        <g:TextBox ui:field="number" addStyleNames="{style.marginLeft}"/>
    </g:HorizontalPanel>

</ui:UiBinder>