Vaadin 7 compatible ColorPicker (#9201)

Change-Id: I44962ceedd5ef607e2fbe2af0d96808e0aef9cc5

9 files changed, 904 insertions, 0 deletions

diff --git a/client/src/com/vaadin/client/ui/VColorPicker.java b/client/src/com/vaadin/client/ui/VColorPicker.java
new file mode 100644
index 0000000000..7cd5fbfed7
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/VColorPicker.java
@@ -0,0 +1,73 @@
+package com.vaadin.client.ui;
+
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.ui.HTML;
+
+/**
+ * Client side implementation for ColorPicker.
+ * 
+ * @since 7.0.0
+ */
+public class VColorPicker extends VButton implements ClickHandler {
+
+    private String color = null;
+
+    private boolean isOpen = false;
+
+    private HTML colorIcon;
+
+    @Override
+    public void onClick(ClickEvent event) {
+        super.onClick(event);
+
+        setOpen(!isOpen);
+    }
+
+    /**
+     * Set the color of the component, e.g. #ffffff
+     * 
+     * @param color
+     */
+    public void setColor(String color) {
+        this.color = color;
+    }
+
+    /**
+     * Mark the popup opened/closed.
+     * 
+     * @param open
+     */
+    public void setOpen(boolean open) {
+        isOpen = open;
+    }
+
+    /**
+     * Check the popup's marked state.
+     * 
+     * @return true if the popup has been marked being open, false otherwise.
+     */
+    public boolean isOpen() {
+        return isOpen;
+    }
+
+    /**
+     * Update color icon to show the currently selected color.
+     */
+    public void refreshColor() {
+        if (color != null) {
+
+            if (colorIcon == null) {
+                colorIcon = new HTML();
+                colorIcon.setStylePrimaryName("v-colorpicker-button-color");
+                wrapper.insertBefore(colorIcon.getElement(), captionElement);
+            }
+
+            // Set the color
+            DOM.setStyleAttribute(colorIcon.getElement(), "background", color);
+
+        }
+    }
+
+}
diff --git a/client/src/com/vaadin/client/ui/VColorPickerArea.java b/client/src/com/vaadin/client/ui/VColorPickerArea.java
new file mode 100644
index 0000000000..2327b79f8a
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/VColorPickerArea.java
@@ -0,0 +1,181 @@
+package com.vaadin.client.ui;
+
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.HasClickHandlers;
+import com.google.gwt.event.shared.HandlerRegistration;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.HasHTML;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.Widget;
+
+/**
+ * Client side implementation for ColorPickerArea.
+ * 
+ * @since 7.0.0
+ */
+public class VColorPickerArea extends Widget implements ClickHandler, HasHTML,
+        HasClickHandlers {
+
+    private String color = null;
+
+    private boolean isOpen;
+
+    private HTML caption;
+    private HTML area;
+
+    /**
+     * Initializes an area-style color picker widget.
+     */
+    public VColorPickerArea() {
+        super();
+        setElement(DOM.createDiv());
+
+        caption = new HTML();
+        caption.addStyleName("v-caption");
+        caption.setWidth("");
+
+        area = new HTML();
+        area.setStylePrimaryName(getStylePrimaryName() + "-area");
+
+        getElement().appendChild(caption.getElement());
+        getElement().appendChild(area.getElement());
+
+        addClickHandler(this);
+    }
+
+    /**
+     * Adds a click handler to the widget and sinks the click event.
+     * 
+     * @param handler
+     * @return HandlerRegistration used to remove the handler
+     */
+    public HandlerRegistration addClickHandler(ClickHandler handler) {
+        return addDomHandler(handler, ClickEvent.getType());
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        setOpen(!isOpen);
+    }
+
+    @Override
+    public void onBrowserEvent(Event event) {
+        int type = DOM.eventGetType(event);
+        switch (type) {
+        case Event.ONCLICK:
+            if (DOM.isOrHasChild(area.getElement(), DOM.eventGetTarget(event))) {
+                super.onBrowserEvent(event);
+            }
+            break;
+        default:
+            super.onBrowserEvent(event);
+        }
+    }
+
+    /**
+     * Mark the popup opened/closed.
+     * 
+     * @param open
+     */
+    public void setOpen(boolean open) {
+        isOpen = open;
+    }
+
+    /**
+     * Check the popup's marked state.
+     * 
+     * @return true if the popup has been marked being open, false otherwise.
+     */
+    public boolean isOpen() {
+        return isOpen;
+    }
+
+    /**
+     * Sets the caption's content to the given text.
+     * 
+     * @param text
+     * 
+     * @see Label#setText(String)
+     */
+    @Override
+    public void setText(String text) {
+        caption.setText(text);
+    }
+
+    /**
+     * Gets the caption's contents as text.
+     * 
+     * @return the caption's text
+     */
+    @Override
+    public String getText() {
+        return caption.getText();
+    }
+
+    /**
+     * Sets the caption's content to the given HTML.
+     * 
+     * @param html
+     */
+    @Override
+    public void setHTML(String html) {
+        caption.setHTML(html);
+    }
+
+    /**
+     * Gets the caption's contents as HTML.
+     * 
+     * @return the caption's HTML
+     */
+    @Override
+    public String getHTML() {
+        return caption.getHTML();
+    }
+
+    /**
+     * Sets the color for the area.
+     * 
+     * @param color
+     */
+    public void setColor(String color) {
+        this.color = color;
+    }
+
+    /**
+     * Update the color area with the currently set color.
+     */
+    public void refreshColor() {
+        if (color != null) {
+            // Set the color
+            DOM.setStyleAttribute(area.getElement(), "background", color);
+        }
+    }
+
+    @Override
+    public void setStylePrimaryName(String style) {
+        super.setStylePrimaryName(style);
+        area.setStylePrimaryName(getStylePrimaryName() + "-area");
+    }
+
+    /**
+     * Sets the color area's height. This height does not include caption or
+     * decorations such as border, margin, and padding.
+     */
+    @Override
+    public void setHeight(String height) {
+        area.setHeight(height);
+    }
+
+    /**
+     * Sets the color area's width. This width does not include caption or
+     * decorations such as border, margin, and padding.
+     */
+    @Override
+    public void setWidth(String width) {
+        area.setWidth(width);
+    }
+
+}
diff --git a/client/src/com/vaadin/client/ui/colorpicker/AbstractColorPickerConnector.java b/client/src/com/vaadin/client/ui/colorpicker/AbstractColorPickerConnector.java
new file mode 100644
index 0000000000..27261b3812
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/AbstractColorPickerConnector.java
@@ -0,0 +1,86 @@
+package com.vaadin.client.ui.colorpicker;
+
+import java.util.Set;
+
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.HasClickHandlers;
+import com.vaadin.client.communication.StateChangeEvent;
+import com.vaadin.client.ui.AbstractComponentConnector;
+import com.vaadin.shared.ui.colorpicker.ColorPickerState;
+
+/**
+ * An abstract class that defines default implementation for a color picker
+ * connector.
+ * 
+ * @since 7.0.0
+ */
+public abstract class AbstractColorPickerConnector extends
+        AbstractComponentConnector implements ClickHandler {
+
+    @Override
+    public ColorPickerState getState() {
+        return (ColorPickerState) super.getState();
+    }
+
+    @Override
+    public boolean delegateCaptionHandling() {
+        return false;
+    }
+
+    @Override
+    public void onStateChanged(StateChangeEvent stateChangeEvent) {
+        // NOTE: this method is called after @DelegateToWidget
+        super.onStateChanged(stateChangeEvent);
+        Set<String> changedProperties = stateChangeEvent.getChangedProperties();
+        if (changedProperties.contains("color")) {
+            refreshColor();
+
+            if (getState().showDefaultCaption
+                    && (getState().caption == null || ""
+                            .equals(getState().caption))) {
+
+                setCaption(getState().color);
+            }
+        }
+        if (changedProperties.contains("caption")
+                || changedProperties.contains("htmlContentAllowed")
+                || changedProperties.contains("showDefaultCaption")) {
+
+            setCaption(getCaption());
+        }
+    }
+
+    @Override
+    public void init() {
+        super.init();
+        if (getWidget() instanceof HasClickHandlers) {
+            ((HasClickHandlers) getWidget()).addClickHandler(this);
+        }
+    }
+
+    /**
+     * Get caption for the color picker widget.
+     * 
+     * @return
+     */
+    protected String getCaption() {
+        if (getState().showDefaultCaption
+                && (getState().caption == null || "".equals(getState().caption))) {
+            return getState().color;
+        }
+        return getState().caption;
+    }
+
+    /**
+     * Set caption of the color picker widget.
+     * 
+     * @param caption
+     */
+    protected abstract void setCaption(String caption);
+
+    /**
+     * Update the widget to show the currently selected color.
+     */
+    protected abstract void refreshColor();
+
+}
diff --git a/client/src/com/vaadin/client/ui/colorpicker/ColorPickerAreaConnector.java b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerAreaConnector.java
new file mode 100644
index 0000000000..12bc23966f
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerAreaConnector.java
@@ -0,0 +1,53 @@
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.ui.VColorPickerArea;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.colorpicker.ColorPickerServerRpc;
+
+/**
+ * A class that defines an implementation for a color picker connector. Connects
+ * the server side {@link com.vaadin.ui.ColorPickerArea} with the client side
+ * counterpart {@link VColorPickerArea}
+ * 
+ * @since 7.0.0
+ */
+@Connect(com.vaadin.ui.ColorPickerArea.class)
+public class ColorPickerAreaConnector extends AbstractColorPickerConnector {
+
+    private ColorPickerServerRpc rpc = RpcProxy.create(
+            ColorPickerServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPickerArea.class);
+    }
+
+    @Override
+    public VColorPickerArea getWidget() {
+        return (VColorPickerArea) super.getWidget();
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        rpc.openPopup(getWidget().isOpen());
+    }
+
+    @Override
+    protected void setCaption(String caption) {
+        if (getState().htmlContentAllowed) {
+            getWidget().setHTML(caption);
+        } else {
+            getWidget().setText(caption);
+        }
+    }
+
+    @Override
+    protected void refreshColor() {
+        getWidget().refreshColor();
+    }
+
+}
diff --git a/client/src/com/vaadin/client/ui/colorpicker/ColorPickerConnector.java b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerConnector.java
new file mode 100644
index 0000000000..7329bffa09
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerConnector.java
@@ -0,0 +1,52 @@
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.ui.VColorPicker;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.colorpicker.ColorPickerServerRpc;
+
+/**
+ * A class that defines default implementation for a color picker connector.
+ * Connects the server side {@link com.vaadin.ui.ColorPicker} with the client
+ * side counterpart {@link VColorPicker}
+ * 
+ * @since 7.0.0
+ */
+@Connect(com.vaadin.ui.ColorPicker.class)
+public class ColorPickerConnector extends AbstractColorPickerConnector {
+
+    private ColorPickerServerRpc rpc = RpcProxy.create(
+            ColorPickerServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPicker.class);
+    }
+
+    @Override
+    public VColorPicker getWidget() {
+        return (VColorPicker) super.getWidget();
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        rpc.openPopup(getWidget().isOpen());
+    }
+
+    @Override
+    protected void setCaption(String caption) {
+        if (getState().htmlContentAllowed) {
+            getWidget().setHtml(caption);
+        } else {
+            getWidget().setText(caption);
+        }
+    }
+
+    @Override
+    protected void refreshColor() {
+        getWidget().refreshColor();
+    }
+}
diff --git a/client/src/com/vaadin/client/ui/colorpicker/ColorPickerGradientConnector.java b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerGradientConnector.java
new file mode 100644
index 0000000000..9a9dd09999
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerGradientConnector.java
@@ -0,0 +1,71 @@
+package com.vaadin.client.ui.colorpicker;
+
+import java.util.Set;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.MouseUpEvent;
+import com.google.gwt.event.dom.client.MouseUpHandler;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.communication.StateChangeEvent;
+import com.vaadin.client.ui.AbstractComponentConnector;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGradientServerRpc;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGradientState;
+
+/**
+ * A class that defines the default implementation for a color picker gradient
+ * connector. Connects the server side
+ * {@link com.vaadin.ui.components.colorpicker.ColorPickerGradient} with the
+ * client side counterpart {@link VColorPickerGradient}
+ * 
+ * @since 7.0.0
+ */
+@Connect(com.vaadin.ui.components.colorpicker.ColorPickerGradient.class)
+public class ColorPickerGradientConnector extends AbstractComponentConnector
+        implements MouseUpHandler {
+
+    private ColorPickerGradientServerRpc rpc = RpcProxy.create(
+            ColorPickerGradientServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPickerGradient.class);
+    }
+
+    @Override
+    public VColorPickerGradient getWidget() {
+        return (VColorPickerGradient) super.getWidget();
+    }
+
+    @Override
+    public ColorPickerGradientState getState() {
+        return (ColorPickerGradientState) super.getState();
+    }
+
+    @Override
+    public void onMouseUp(MouseUpEvent event) {
+        rpc.select(getWidget().getCursorX(), getWidget().getCursorY());
+    }
+
+    @Override
+    public void onStateChanged(StateChangeEvent stateChangeEvent) {
+        super.onStateChanged(stateChangeEvent);
+        Set<String> changedProperties = stateChangeEvent.getChangedProperties();
+        if (changedProperties.contains("cursorX")
+                || changedProperties.contains("cursorY")) {
+
+            getWidget().setCursor(getState().cursorX, getState().cursorY);
+        }
+        if (changedProperties.contains("bgColor")) {
+            getWidget().setBGColor(getState().bgColor);
+        }
+    }
+
+    @Override
+    protected void init() {
+        super.init();
+        getWidget().addMouseUpHandler(this);
+    }
+
+}
\ No newline at end of file
diff --git a/client/src/com/vaadin/client/ui/colorpicker/ColorPickerGridConnector.java b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerGridConnector.java
new file mode 100644
index 0000000000..dbce0dd925
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/ColorPickerGridConnector.java
@@ -0,0 +1,80 @@
+package com.vaadin.client.ui.colorpicker;
+
+import java.util.Set;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.communication.StateChangeEvent;
+import com.vaadin.client.ui.AbstractComponentConnector;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGridServerRpc;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGridState;
+
+/**
+ * A class that defines the default implementation for a color picker grid
+ * connector. Connects the server side
+ * {@link com.vaadin.ui.components.colorpicker.ColorPickerGrid} with the client
+ * side counterpart {@link VColorPickerGrid}
+ * 
+ * @since 7.0.0
+ */
+@Connect(com.vaadin.ui.components.colorpicker.ColorPickerGrid.class)
+public class ColorPickerGridConnector extends AbstractComponentConnector
+        implements ClickHandler {
+
+    private ColorPickerGridServerRpc rpc = RpcProxy.create(
+            ColorPickerGridServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPickerGrid.class);
+    }
+
+    @Override
+    public VColorPickerGrid getWidget() {
+        return (VColorPickerGrid) super.getWidget();
+    }
+
+    @Override
+    public ColorPickerGridState getState() {
+        return (ColorPickerGridState) super.getState();
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        rpc.select(getWidget().getSelectedX(), getWidget().getSelectedY());
+    }
+
+    @Override
+    public void onStateChanged(StateChangeEvent stateChangeEvent) {
+        super.onStateChanged(stateChangeEvent);
+        Set<String> changedProperties = stateChangeEvent.getChangedProperties();
+        if (changedProperties.contains("rowCount")
+                || changedProperties.contains("columnCount")
+                || changedProperties.contains("updateGrid")) {
+
+            getWidget().updateGrid(getState().rowCount, getState().columnCount);
+        }
+        if (changedProperties.contains("changedX")
+                || changedProperties.contains("changedY")
+                || changedProperties.contains("changedColor")
+                || changedProperties.contains("updateColor")) {
+
+            getWidget().updateColor(getState().changedColor,
+                    getState().changedX, getState().changedY);
+
+            if (!getWidget().isGridLoaded()) {
+                rpc.refresh();
+            }
+        }
+    }
+
+    @Override
+    protected void init() {
+        super.init();
+        getWidget().addClickHandler(this);
+    }
+}
diff --git a/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java b/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
new file mode 100644
index 0000000000..6defc57996
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
@@ -0,0 +1,176 @@
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.event.dom.client.MouseDownEvent;
+import com.google.gwt.event.dom.client.MouseDownHandler;
+import com.google.gwt.event.dom.client.MouseMoveEvent;
+import com.google.gwt.event.dom.client.MouseMoveHandler;
+import com.google.gwt.event.dom.client.MouseUpEvent;
+import com.google.gwt.event.dom.client.MouseUpHandler;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.ui.AbsolutePanel;
+import com.google.gwt.user.client.ui.FocusPanel;
+import com.google.gwt.user.client.ui.HTML;
+
+/**
+ * Client side implementation for ColorPickerGradient.
+ * 
+ * @since 7.0.0
+ * 
+ */
+public class VColorPickerGradient extends FocusPanel implements
+        MouseDownHandler, MouseUpHandler, MouseMoveHandler {
+
+    /** Set the CSS class name to allow styling. */
+    public static final String CLASSNAME = "v-colorpicker-gradient";
+    public static final String CLASSNAME_BACKGROUND = CLASSNAME + "-background";
+    public static final String CLASSNAME_FOREGROUND = CLASSNAME + "-foreground";
+    public static final String CLASSNAME_LOWERBOX = CLASSNAME + "-lowerbox";
+    public static final String CLASSNAME_HIGHERBOX = CLASSNAME + "-higherbox";
+    public static final String CLASSNAME_CONTAINER = CLASSNAME + "-container";
+    public static final String CLASSNAME_CLICKLAYER = CLASSNAME + "-clicklayer";
+
+    private final HTML background;
+    private final HTML foreground;
+    private final HTML lowercross;
+    private final HTML highercross;
+    private final HTML clicklayer;
+    private final AbsolutePanel container;
+
+    private boolean mouseIsDown = false;
+
+    private int cursorX;
+    private int cursorY;
+
+    /**
+     * Instantiates the client side component for a color picker gradient.
+     */
+    public VColorPickerGradient() {
+        super();
+
+        setStyleName(CLASSNAME);
+
+        int width = 220;
+        int height = 220;
+
+        background = new HTML();
+        background.setStyleName(CLASSNAME_BACKGROUND);
+        background.setPixelSize(width, height);
+
+        foreground = new HTML();
+        foreground.setStyleName(CLASSNAME_FOREGROUND);
+        foreground.setPixelSize(width, height);
+
+        clicklayer = new HTML();
+        clicklayer.setStyleName(CLASSNAME_CLICKLAYER);
+        clicklayer.setPixelSize(width, height);
+        clicklayer.addMouseDownHandler(this);
+        clicklayer.addMouseUpHandler(this);
+        clicklayer.addMouseMoveHandler(this);
+
+        lowercross = new HTML();
+        lowercross.setPixelSize(width / 2, height / 2);
+        lowercross.setStyleName(CLASSNAME_LOWERBOX);
+
+        highercross = new HTML();
+        highercross.setPixelSize(width / 2, height / 2);
+        highercross.setStyleName(CLASSNAME_HIGHERBOX);
+
+        container = new AbsolutePanel();
+        container.setStyleName(CLASSNAME_CONTAINER);
+        container.setPixelSize(width, height);
+        container.add(background, 0, 0);
+        container.add(foreground, 0, 0);
+        container.add(lowercross, 0, height / 2);
+        container.add(highercross, width / 2, 0);
+        container.add(clicklayer, 0, 0);
+
+        add(container);
+    }
+
+    /**
+     * Returns the latest x-coordinate for pressed-down mouse cursor.
+     */
+    protected int getCursorX() {
+        return cursorX;
+    }
+
+    /**
+     * Returns the latest y-coordinate for pressed-down mouse cursor.
+     */
+    protected int getCursorY() {
+        return cursorY;
+    }
+
+    /**
+     * Sets the given css color as the background.
+     * 
+     * @param bgColor
+     */
+    protected void setBGColor(String bgColor) {
+        background.getElement().getStyle().setProperty("background", bgColor);
+    }
+
+    @Override
+    public void onMouseDown(MouseDownEvent event) {
+        event.preventDefault();
+
+        mouseIsDown = true;
+        setCursor(event.getX(), event.getY());
+    }
+
+    @Override
+    public void onMouseUp(MouseUpEvent event) {
+        event.preventDefault();
+        mouseIsDown = false;
+        setCursor(event.getX(), event.getY());
+
+        cursorX = event.getX();
+        cursorY = event.getY();
+    }
+
+    @Override
+    public void onMouseMove(MouseMoveEvent event) {
+        event.preventDefault();
+
+        if (mouseIsDown) {
+            setCursor(event.getX(), event.getY());
+        }
+    }
+
+    /**
+     * Sets the latest coordinates for pressed-down mouse cursor and updates the
+     * cross elements.
+     * 
+     * @param x
+     * @param y
+     */
+    public void setCursor(int x, int y) {
+        cursorX = x;
+        cursorY = y;
+        if (x >= 0) {
+            DOM.setStyleAttribute(lowercross.getElement(), "width",
+                    String.valueOf(x) + "px");
+        }
+        if (y >= 0) {
+            DOM.setStyleAttribute(lowercross.getElement(), "top",
+                    String.valueOf(y) + "px");
+        }
+        if (y >= 0) {
+            DOM.setStyleAttribute(lowercross.getElement(), "height",
+                    String.valueOf((background.getOffsetHeight() - y)) + "px");
+        }
+
+        if (x >= 0) {
+            DOM.setStyleAttribute(highercross.getElement(), "width",
+                    String.valueOf((background.getOffsetWidth() - x)) + "px");
+        }
+        if (x >= 0) {
+            DOM.setStyleAttribute(highercross.getElement(), "left",
+                    String.valueOf(x) + "px");
+        }
+        if (y >= 0) {
+            DOM.setStyleAttribute(highercross.getElement(), "height",
+                    String.valueOf((y)) + "px");
+        }
+    }
+}
diff --git a/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGrid.java b/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGrid.java
new file mode 100644
index 0000000000..1af65733aa
--- /dev/null
+++ b/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGrid.java
@@ -0,0 +1,132 @@
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.HasClickHandlers;
+import com.google.gwt.event.shared.HandlerRegistration;
+import com.google.gwt.user.client.Element;
+import com.google.gwt.user.client.ui.AbsolutePanel;
+import com.google.gwt.user.client.ui.Grid;
+import com.google.gwt.user.client.ui.HTMLTable.Cell;
+
+/**
+ * Client side implementation for ColorPickerGrid.
+ * 
+ * @since 7.0.0
+ * 
+ */
+public class VColorPickerGrid extends AbsolutePanel implements ClickHandler,
+        HasClickHandlers {
+
+    private int rows = 1;
+    private int columns = 1;
+
+    private Grid grid;
+
+    private boolean gridLoaded = false;
+
+    private int selectedX;
+    private int selectedY;
+
+    /**
+     * Instantiates the client side component for a color picker grid.
+     */
+    public VColorPickerGrid() {
+        super();
+
+        this.add(createGrid(), 0, 0);
+    }
+
+    /**
+     * Creates a grid according to the current row and column count information.
+     * 
+     * @return grid
+     */
+    private Grid createGrid() {
+        grid = new Grid(rows, columns);
+        grid.setWidth("100%");
+        grid.setHeight("100%");
+        grid.addClickHandler(this);
+        return grid;
+    }
+
+    /**
+     * Updates the row and column count and creates a new grid based on them.
+     * The new grid replaces the old grid if one existed.
+     * 
+     * @param rowCount
+     * @param columnCount
+     */
+    protected void updateGrid(int rowCount, int columnCount) {
+        rows = rowCount;
+        columns = columnCount;
+        this.remove(grid);
+        this.add(createGrid(), 0, 0);
+    }
+
+    /**
+     * Updates the changed colors within the grid based on the given x- and
+     * y-coordinates. Nothing happens if any of the parameters is null or the
+     * parameter lengths don't match.
+     * 
+     * @param changedColor
+     * @param changedX
+     * @param changedY
+     */
+    protected void updateColor(String[] changedColor, String[] changedX,
+            String[] changedY) {
+        if (changedColor != null && changedX != null && changedY != null) {
+            if (changedColor.length == changedX.length
+                    && changedX.length == changedY.length) {
+                for (int c = 0; c < changedColor.length; c++) {
+                    Element element = grid.getCellFormatter().getElement(
+                            Integer.parseInt(changedX[c]),
+                            Integer.parseInt(changedY[c]));
+                    element.getStyle().setProperty("background",
+                            changedColor[c]);
+                }
+            }
+
+            gridLoaded = true;
+        }
+    }
+
+    /**
+     * Returns currently selected x-coordinate of the grid.
+     */
+    protected int getSelectedX() {
+        return selectedX;
+    }
+
+    /**
+     * Returns currently selected y-coordinate of the grid.
+     */
+    protected int getSelectedY() {
+        return selectedY;
+    }
+
+    /**
+     * Returns true if the colors have been successfully updated at least once,
+     * false otherwise.
+     */
+    protected boolean isGridLoaded() {
+        return gridLoaded;
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        Cell cell = grid.getCellForEvent(event);
+        if (cell == null) {
+            return;
+        }
+
+        selectedY = cell.getRowIndex();
+        selectedX = cell.getCellIndex();
+    }
+
+    @Override
+    public HandlerRegistration addClickHandler(ClickHandler handler) {
+        return addDomHandler(handler, ClickEvent.getType());
+    }
+
+}