package com.company.ratingsample.web.toolkit.ui.client.ratingfield;

import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.SpanElement;
import com.google.gwt.dom.client.Style.Display;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.FocusWidget;

import java.util.ArrayList;
import java.util.List;

public class RatingFieldWidget extends FocusWidget {

    private static final String CLASSNAME = "ratingfield";

    // API for handle clicks
    public interface StarClickListener {
        void starClicked(int value);
    }

    protected List<SpanElement> stars = new ArrayList<SpanElement>(5);
    protected StarClickListener listener;
    protected int value = 0;

    public RatingFieldWidget() {
        DivElement container = DOM.createDiv().cast();
        container.getStyle().setDisplay(Display.INLINE_BLOCK);
        for (int i = 0; i < 5; i++) {
            SpanElement star = DOM.createSpan().cast();

            // add star element to the container
            DOM.insertChild(container, star, i);
            // subscribe on ONCLICK event
            DOM.sinkEvents(star, Event.ONCLICK);

            stars.add(star);
        }
        setElement(container);

        setStylePrimaryName(CLASSNAME);
    }

    // main method for handling events in GWT widgets
    @Override
    public void onBrowserEvent(Event event) {
        super.onBrowserEvent(event);

        switch (event.getTypeInt()) {
            // react on ONCLICK event
            case Event.ONCLICK:
                SpanElement element = event.getEventTarget().cast();
                // if click was on the star
                int index = stars.indexOf(element);
                if (index >= 0) {
                    int value = index + 1;
                    // set internal value
                    setValue(value);

                    // notify listeners
                    if (listener != null) {
                        listener.starClicked(value);
                    }
                }
                break;
        }
    }

    @Override
    public void setStylePrimaryName(String style) {
        super.setStylePrimaryName(style);

        for (SpanElement star : stars) {
            star.setClassName(style + "-star");
        }

        updateStarsStyle(this.value);
    }

    // let application code change the state
    public void setValue(int value) {
        this.value = value;
        updateStarsStyle(value);
    }

    // refresh visual representation
    private void updateStarsStyle(int value) {
        for (SpanElement star : stars) {
            star.removeClassName(getStylePrimaryName() + "-star-selected");
        }

        for (int i = 0; i < value; i++) {
            stars.get(i).addClassName(getStylePrimaryName() + "-star-selected");
        }
    }
}

package com.company.ratingsample.web.toolkit.ui;

import com.company.ratingsample.web.toolkit.ui.client.ratingfield.RatingFieldServerRpc;
import com.company.ratingsample.web.toolkit.ui.client.ratingfield.RatingFieldState;
import com.vaadin.ui.AbstractField;

// the field will have a value with integer type
public class RatingFieldServerComponent extends AbstractField<Integer> {

    public RatingFieldServerComponent() {
        // register an interface implementation that will be invoked on a request from the client
        registerRpc((RatingFieldServerRpc) value -> setValue(value, true));
    }

    // field value type
    @Override
    public Class<? extends Integer> getType() {
        return Integer.class;
    }

    // define own state class
    @Override
    protected RatingFieldState getState() {
        return (RatingFieldState) super.getState();
    }

    @Override
    protected RatingFieldState getState(boolean markAsDirty) {
        return (RatingFieldState) super.getState(markAsDirty);
    }

    // we need to refresh the state when setValue is invoked from the application code
    @Override
    protected void setInternalValue(Integer newValue) {
        super.setInternalValue(newValue);
        if (newValue == null) {
            newValue = 0;
        }
        getState().value = newValue;
    }
}

package com.company.ratingsample.web.toolkit.ui.client.ratingfield;

import com.vaadin.shared.AbstractFieldState;

public class RatingFieldState extends AbstractFieldState {
    {   // change the main style name of the component
        primaryStyleName = "ratingfield";
    }
    // define a field for the value
    public int value = 0;
}

package com.company.ratingsample.web.toolkit.ui.client.ratingfield;

import com.vaadin.shared.communication.ServerRpc;

public interface RatingFieldServerRpc extends ServerRpc {
    //method will be invoked in the client code
    void starClicked(int value);
}

package com.company.ratingsample.web.toolkit.ui.client.ratingfield;

import com.company.ratingsample.web.toolkit.ui.RatingFieldServerComponent;
import com.company.ratingsample.web.toolkit.ui.client.ratingfield.RatingFieldServerRpc;
import com.company.ratingsample.web.toolkit.ui.client.ratingfield.RatingFieldState;
import com.vaadin.client.communication.StateChangeEvent;
import com.vaadin.client.ui.AbstractFieldConnector;
import com.vaadin.shared.ui.Connect;

// link the connector with the server implementation of RatingField
// extend AbstractField connector
@Connect(RatingFieldServerComponent.class)
public class RatingFieldConnector extends AbstractFieldConnector {

    // we will use a RatingFieldWidget widget
    @Override
    public RatingFieldWidget getWidget() {
        RatingFieldWidget widget = (RatingFieldWidget) super.getWidget();

        if (widget.listener == null) {
            widget.listener = new RatingFieldWidget.StarClickListener() {
                @Override
                public void starClicked(int value) {
                    getRpcProxy(RatingFieldServerRpc.class).starClicked(value);
                }
            };
        }
        return widget;
    }

    // our state class is RatingFieldState
    @Override
    public RatingFieldState getState() {
        return (RatingFieldState) super.getState();
    }

    // react on server state change
    @Override
    public void onStateChanged(StateChangeEvent stateChangeEvent) {
        super.onStateChanged(stateChangeEvent);

        // refresh the widget if the value on server has changed
        if (stateChangeEvent.hasPropertyChanged("value")) {
            getWidget().setValue(getState().value);
        }
    }
}