Page History

Author: Jindrich Dinga

1. Introduction

This document is the user experience specification for the JavaFX ColorPicker control.

...

Figure 1 Overview of ColorPicker control
Image RemovedImage Added

3. Interaction Design

...

Figure 2 Appearance of Color Chooser
Image RemovedImage Added

The following paragraph describes interaction models for various appearances of the Color Chooser mentioned above:

...

Figure 3 Color Palette with tooltip
Image RemovedImage Added

Please note that every color in the grid should support the following states: selection, focus, and mouse over. Mouse over and focus states can have same appearance, e.g. a blue rectangle, but only one blue rectangle can be visible at one time. For example a user places the mouse cursor on a green color - a blue rectangle appears. After that, the user presses the DOWN arrow - the blue rectangle moves down one position to focus a color that is right below the green color.

Figure 4 States of colors
Image RemovedImage Added

To select a color, users can click it by mouse or navigate to it by keyboard and press ENTER. After that the Color Palette is closed and new color is applied. In addition to that, the new color appears in the preview area of the Color Chooser. Pressing ESC or clicking outside of the pop-up closes the Color Palette.

...

Figure 5 Overview of Custom Color dialog
Image RemovedImage Added

When the Custom Color Dialog opens, it displays values of the color that is currently displayed in the preview area of the Color Chooser. Please note that Old and New Color in the Color Preview are same initially. Users can define a new color by:

...

Figure 6 Settings Overview
Image RemovedImage Added

Once users are happy with the new color, they can press ENTER or click SAVE button to save the color to Custom Colors area and apply it. Another option is to just apply the color by clicking USE button. In both cases, the Custom Color Dialog and Color Palette are closed. To dismiss this dialog without preserving the new color, users can click CANCEL button, CLOSE icon, or just press ESC key. If this dialog is dismissed without applying a color the Color Palette stays open.

...