Vaadin Add-on migration to the platform 7.0

Community Guides
#1

Here are steps to migrate a Vaadin Component integrated into Generic UI from platform 6.10 to 7.0.

First of all, update the add-on version in build.gradle so that it’s compatible with Vaadin 8.

Go to Stepper - Vaadin Add-on Directory and find the suitable version by checking framework support.

image

In our case, it’s 2.4.0:

compile('org.vaadin.addons:stepper:2.4.0')

The new version of the add-on has a different widgetset name, so replace it in the AppWidgetSet.gwt.xml file of the web-toolkit module with the following:

<inherits name="org.vaadin.risto.stepper.StepperWidgetset"/>

Starting from platform 7.0, the com.haulmont.cuba.gui.components.Field interface has a type, therefore the Stepper interface has to extend Field<Integer> instead of Field, because we integrate IntStepper component.

public interface Stepper extends Field<Integer> {
...
}

The Web implementation of the component also has to be changed. Since we use Vaadin 8 compatible component, alter WebStepper so that it extends WebV8AbstractField and adds a value change listener to the Vaadin component.

public class WebStepper extends WebV8AbstractField<IntStepper, Integer, Integer> implements Stepper {

    public WebStepper() {
        this.component = new org.vaadin.risto.stepper.IntStepper();

        attachValueChangeListener(component);
    }
...
}

WebV8AbstractField has three types:

  • Type of underlying Vaadin component. In our case IntStepper.
  • Type of presentation value, i.e. Vaadin component value type, In our case Integer.
  • Type of model value, i.e. CUBA component value type. In our case Integer.

Hint: In case a Vaadin component extends com.vaadin.v7.ui.AbstractField (deprecated Vaadin 7 API), WebAbstractField must be used intead of WebV8AbstractField.

The last one change is required for StepperLoader. The factory variable now has a type of UiComponents instead of ComponentsFactory (which is deprecated), for that reason, the createComponent method must be changed as follows:

@Override
public void createComponent() {
    resultComponent = factory.create(Stepper.class);
    loadId(resultComponent, element);
}

If everything is done correctly, you’ll to see the following in the Customer Edit screen:

image

The complete project can be found on GitHub.

2 Likes