GWT Editor with Custom Composites

[harshyadav]

Hi,

I am trying to use the GWT editor framework to support data binding in my application. While implementing it I ran into a few issues and have a couple of questions regarding the same:

1) Some of these components don't use 

com.google.gwt.user.*

  rather they use 

com.google.gwt.dom.client.*

 For e.g. InputElement as opposed to TextBox. Is it possible to use editor framework with dom elements?

2) Is it possible to bind POJO's with different field types (int, float, String, etc.) to a single Composite implementing IsEditor?

For e.g. if there is an Input composite (wrapping TextBox), is it possible to use the same composite for POJO fields of different types int, float, etc. ?

public class Test
 implements Serializable {

 private Integer id;

 private String name;

 private float area;
}

Here name and area are of different type. Is it possible to bind these to the same widget implementing Editor (without editor I would just parse the values to and from String to their respective types before saving the data)?

Also, if is it not possible to the above, is there a good alternative to support 2 way data binding in modern GWT applications?

Thanks,
Harsh

[Rogelio Flores]

1. Sure, you will just need to implement an Editor interface in your component using your *Element.

2. I can think of one way of doing this; you would still bind an input element to each type, and then display only the one you want to use/handle (if you can live with that). Not sure I see the use case for this.

I think an alternative would be to use Errai: http://erraiframework.org/

[harshyadav]

Thanks Rogelio. That's helpful.

Can you share an example or code sample? The documentation on Editor framework is very limited and hard to follow.

Also, I would love to use Errai data binding. But for declarative data binding using Errai, I would have to use Errai IOC, and it doesn't integrate well with Guice/Gin. 

Has anyone tried implementing it without Errai IOC?

Thanks,

Harsh

[Thomas Broyer]

On Wednesday, April 19, 2017 at 8:19:52 PM UTC+2, harshyadav wrote:

Hi,

I am trying to use the GWT editor framework to support data binding in my application. While implementing it I ran into a few issues and have a couple of questions regarding the same:

1) Some of these components don't use 

com.google.gwt.user.*

  rather they use 

com.google.gwt.dom.client.*

 For e.g. InputElement as opposed to TextBox. Is it possible to use editor framework with dom elements?

Yes.

There are several ways.

Either your "composite editor" implements ValueAwareEditor; in setValue extracts values from object properties and put them into the elements, on flush() do the reverse.

@Override public void setValue(MyObj value) {

  this.value = value;

  myInputElement.setValue(value.getProp());

}

@Override public void flush() {

  this.value.setProp(myInputElement.getValue());

}

Or use "child" editors for each element, implement a LeafValueEditor that delegates to the element in setValue/getValue.

final LeafValueEditor<String> myInputElementEditor = new LeafValueEditor<String>() {

  @Override public String getValue() { return myInputElement.getValue(); }

  @Override public void setValue(String value) { myInputElement.setValue(value); }

};

2) Is it possible to bind POJO's with different field types (int, float, String, etc.) to a single Composite implementing IsEditor?

For e.g. if there is an Input composite (wrapping TextBox), is it possible to use the same composite for POJO fields of different types int, float, etc. ?

public class Test
 implements Serializable {

 private Integer id;

 private String name;

 private float area;
}

Here name and area are of different type. Is it possible to bind these to the same widget implementing Editor (without editor I would just parse the values to and from String to their respective types before saving the data)?

The editor would have to have a generic type parameter (class MyEditor<T> implements LeafValueEditor<T>) and a way to convert the value it receives to/from String (e.g. passing converters to the constructor?)

Have a look at how ValueBox works.

[harshyadav]

Thanks Thomas, that was really helpful.

I was able to get it working using generics.

Here is a sample code if anyone else is interested (here Input is a Composite encapsulating an input element):

public class InputEditor<T>
 extends Input
 implements LeafValueEditor<T> {

 @UiConstructor
 public InputEditor(String label, InputSize size, InputType type) {
    super(label, size, type);
 }

 private T value;

 @Override
 public T getValue() {
    String theTextValue = getText();

    Object theGenericValue = theTextValue;

    if (value instanceof Integer) {
       theGenericValue = Integer.parseInt(theTextValue);
    } else if (value instanceof Float) {
       theGenericValue = Float.parseFloat(theTextValue);
    }

    this.value = (T) theGenericValue;

    return this.value;
 }

 @Override
 public void setValue(T value) {
    this.value = value;

    String theTextValue = value == null ? "" : value.toString();

    setText(theTextValue);
 }
}

And simply use it (along with editor driver) like:

@UiField InputEditor<String> name;
@UiField InputEditor<Float> area;

All works well now, only word of caution: the SDM cache and the generated code sometimes would make it appear that the editor implementation doesn't flush correctly.

A mvn clean/sdm cache clean resolves this issue.

Thanks,

Harsh

[Thomas Broyer]

Your getValue will break if value is null (because the instanceof will all be false). You should probably use an explicit typing to drive conversions. Maybe just even an enum that you could pass to the UiConstructor, or specialized subclasses (similar to IntegerBox, DoubleBox, etc.)

[harshyadav]

Yes, that makes sense. Will make the change.

Thanks!