GWT Sandbox

Demo
Browse Source

I have been working on and off for some time now, trying to create a color picker. I had stopped development on it for a bit when it was announced that GWT 1.4 would include a color picker of it's own. More recently it was noted due to some issues, GWT 1.4 would not be shipping with a color picker after all, so I got back to work on it. I ended up throwing out the original design for something more extensible, and this is what I have come up with. Adding the HSVColorPicker to your project is as easy as you would expect.

public void onModuleLoad ()
{
    HSVColorPicker hsv = new HSVColorPicker();
    RootPanel.get().add(hsv);
}

But this is a specific type of color picker, a composite of several parts. Sometimes you need something custom, or have your own idea of what a good color picker included. The color picker classes allow for this, allowing you to use the ColorPanel widget, either by itself or as part of a complex picker, like the HSVColorPicker. The ColorPanel is the grid of colored buttons that make up the palette.

public class MyProject implements EntryPoint, ColorSelectedHandler
{
    public void onModuleLoad ()
    {
        HSVPaletteDefinition colorPalleteGen = new HSVPaletteDefinition();
        ColorPanel colorPallete = new ColorPanel(colorPalleteGen);
        colorPallete.addColorSelectedHandler(this);
    }
 
    public void onColorSelected (ColorSelectedEvent e)
    {
        // handle color selected event
    }
}

The ColorPanel constructor here takes a single argument, a ColorPaletteDefinition, which implements the routines to render the colors in the panel. It includes methods to retrieve the width and height in squares, the default selected color, and two methods for getting the color values. The color picker will use the getHexColorValues() method first, and if null is returned will use getRGBVlues() instead. This allows the concrete ColorPaletteDefinition class to use the method that is more efficient.

public interface ColorPaletteDefinition
{
    int getWidth ();
    int getHeight ();
    int getDefaultSelected ();
    String[] getHexColorValues ();
    RGB[] getRGBVlues ();
}

I plan on shipping the ColorPicker and the HSVColorPicker with several concrete ColorPaletteDefinition implementations including:

• HSVPaletteDefinition - 16x16 grid, allowing you to lock in the hue, saturation, or value to a static value
• HSVBarDefinition - 1x30 grid, which is used on the right side of the HSVColorPicker, allowing you to lock in the hue/sat, hue/val, or sat/val pairs to a static value
• FilePaletteDefinition - 16x16 grid that loads the palette definition from an external file (like Gimp or ColorZilla)
• GenericPaletteDefinition - 16x16 grid that you can alter each individual color. Good for custom pallets, including user-created "favorites" palettes, or perhaps loaded via RPC.

I will post additional notes as the project progresses. It should eventually make its way into the GWT Widget Library.