What does this error "SEVERE: Server sent Vaadin 6 style updates for Connector...but this is not a Vaadin 6 Paintable" mean in Vaadin 7?

Question

I am learning Vaadin 7, I am reading the Vaadin 7 CookBook. Actually I am at chapter 4. I would like to ask if someone has ever encountered such a problem:

I get the following error in the browser console:

SEVERE: Server sent Vaadin 6 style updates for ChromaHashPasswordFieldConnector (3) but this is not a Vaadin 6 Paintable

when I render this UI:

public class ChromaHashUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = ChromaHashUI.class, widgetset = "com.example.chromahash.widget.Chapter_4___custom_widgets___creating_a_chroma_hash_password_fieldWidgetset")
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        layout.setSpacing(true);
        setContent(layout);

        layout.addComponents(new ChromaHashPasswordField(), new ChromaHashPasswordField());
    }

}

The two ChromaHashPasswordField components are custom GWT based widgets, here is the code:

ChromaHashPasswordField server side component:

public class ChromaHashPasswordField extends com.vaadin.ui.PasswordField {

    public ChromaHashPasswordField() {
    }

    @Override
    public ChromaHashPasswordFieldState getState() {
        return (ChromaHashPasswordFieldState) super.getState();
    }

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

    @Override
    public void setValue(String value) {
        getState().text = value;
    }
}

ChromaHashPasswordFieldWidget client side component:

public class ChromaHashPasswordFieldWidget extends Composite {

    public static final String CLASSNAME = "chromahashpasswordfield";

    private PasswordTextBox textBox = new PasswordTextBox();
    private HTML chromaHashStripes = new HTML();
    private HorizontalPanel panel = new HorizontalPanel();
    private int numberStripes = 3;

    public ChromaHashPasswordFieldWidget() {
        initWidget(panel);
        setStyleName(CLASSNAME);
        panel.add(textBox);
        panel.add(chromaHashStripes);
    }

    private String[] getChromaHash(String text, int numberStripes) {
        String salt = "du467e4aSdfe";
        text += salt;
        String[] colors = new String[numberStripes];

        int hash;
        int part = text.length() / numberStripes;
        for (int i = 0; i < numberStripes; i++) {
            hash = text.substring(part * i, 
                                 (part * i) + part).hashCode();
            colors[i] = "#" + intToRGB(hash);
        }
        return colors;
    }

    public String intToRGB(int i) {
        String RGB = Integer.toHexString(((i >> 16) & 0xFF))
                   + Integer.toHexString(((i >> 8) & 0xFF))
                   + Integer.toHexString((i & 0xFF));
        while (RGB.length() < 6) {
            RGB += "0";
        }       
        return RGB;
    }

    public void updateChromaHashStripes() {
        String[] chromaHash = getChromaHash(getText(), numberStripes);
        int height = 18;
        int width = 6;

        String htmlStripes = "<div style=\"margin: 3px;\">";
        for (int i = 0; i < numberStripes; i++) {
            htmlStripes += "<div style=\"background-color: "+ chromaHash[i] + ";"
                                      + " float: left; height: "+ height + "px;"
                                      + " width: "+ width +"px;\">" 
                          +"</div>";
        }
        htmlStripes += "</div>";
        chromaHashStripes.setPixelSize(height * 2, width * numberStripes);
        chromaHashStripes.setHTML(htmlStripes);
    }

    public String getText() {
        return textBox.getText();
    }

    public void setText(String text) {
        textBox.setText(text);
    }

    public HandlerRegistration addKeyUpHandler(KeyUpHandler handler) {
        return textBox.addKeyUpHandler(handler);
    }

}

The ChromaHashPasswordFieldState component's shared state:

public class ChromaHashPasswordFieldState extends com.vaadin.shared.ui.textfield.AbstractTextFieldState {
    // initializer block, overrides AbstractTextFieldState's ones       
    {
        primaryStyleName = null;
    }

}

And the ChromaHashPasswordFieldConnector connector:

@Connect(ChromaHashPasswordField.class)
public class ChromaHashPasswordFieldConnector extends AbstractComponentConnector {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public ChromaHashPasswordFieldConnector() {
        getWidget().addKeyUpHandler(new KeyUpHandler() {
            @Override
             public void onKeyUp(KeyUpEvent event) {
               getWidget().updateChromaHashStripes();
             }
        });
    }

    @Override
    protected Widget createWidget() {
        return GWT.create(ChromaHashPasswordFieldWidget.class);
    }

    @Override
    public ChromaHashPasswordFieldWidget getWidget() {
        return (ChromaHashPasswordFieldWidget) super.getWidget();
    }

    @Override
    public ChromaHashPasswordFieldState getState() {
        return (ChromaHashPasswordFieldState) super.getState();
    }

    @Override
    public void onStateChanged(StateChangeEvent stateChangeEvent) {
        super.onStateChanged(stateChangeEvent);
        final String text = getState().text;
        getWidget().setText(text);
        getWidget().updateChromaHashStripes();
    }

}

When I compile and run the project, everything works as expected as you can see from this screenshot:

But there's that error I mentioned above in the console. Does it have to do with different Vaadin versions? Can I fix this error or is it something Vaadin/GWT related?

Thanks for the attention!

Answer 1

You extend on the server side the PasswordField class, which extends AbstractTextField and AbstractTextField implements the com.vaadin.ui.LegacyComponent interface. LegacyComponent makes easier to convert Vaadin components from Vaadin 6 to Vaadin 7 and most of the core components are converted that way.

When server-side class implements the LegacyComponent interface, the connector for that class must implement the com.vaadin.client.Paintable interface. You see the error message because, your connector doesn't implement the interface. In Paintable.updateFromUIDL you should handle changes from LegacyComponent.paintContent.