Server-side components provide the API for user applications to build their user interface. Many applications do not ever need to bother with the client-side implementation of the standard components, but those that use their own GWT widgets need to have corresponding server-side components.

If you are using the Vaadin Plugin for Eclipse, the wizard for creating new widgets will also create a stub of the server-side component for you. See Section 11.2.1, “Creating a Widget” for detailed instructions.

A server-side component has two basic tasks: it has to be able to serialize its state variables to the corresponding client-side component, and deserialize any user input received from the client. Many of these tasks are taken care of by the component framework.

The following example provides the complete server-side ColorPicker component for the Color Picker example. It has only one state variable: the currently selected color, which is stored as the property of the component. Implementation of the Property interface is provided in the AbstractField superclass of the component. The UIDL tag name for the component is colorpicker and the state is communicated through the colorname variable.

package com.vaadin.demo.colorpicker;

import com.vaadin.demo.colorpicker.widgetset.client.ui.VColorPicker;
...

/**
 * Color picker for selecting a color from a palette.
 * 
 * @author magi
 */
@ClientWidget(VColorPicker.class)
public class ColorPicker extends AbstractField {
    public ColorPicker() {
        super();
        setValue(new String("white"));
    }

    /** The property value of the field is a String. */
    @Override
    public Class<?> getType() {
        return String.class;
    }

    /** Set the currently selected color. */
    public void setColor(String newcolor) {
        // Sets the color name as the property of the component.
        // Setting the property will automatically cause
        // repainting of the component with paintContent().
        setValue(newcolor);
    }

    /** Retrieve the currently selected color. */
    public String getColor() {
        return (String) getValue();
    }

    /** Paint (serialize) the component for the client. */
    @Override
    public void paintContent(PaintTarget target)
    throws PaintException {
        // Superclass writes any common attributes in the
        // paint target.
        super.paintContent(target);

        // Add the currently selected color as a variable in
        // the paint target.  
        target.addVariable(this, "colorname", getColor());
    }

    /** Deserialize changes received from the client. */
    @Override
    public void changeVariables(Object source, Map variables) {
        // Sets the currently selected color
        if (variables.containsKey("colorname") &&
                !isReadOnly()) {
            // Changing the property of the component will
            // trigger a ValueChangeEvent
            setValue((String) variables.get("colorname"), true);
        }
    }
}