Author: Jindrich Dinga
1. Introduction
This document is the user experience specification for the JavaFX ColorPicker control.
2. Overview
ColorPicker is a control that consists from a Color Chooser and Color Palette and allows users to select a color according to their needs. For overview of ColorPicker control, see the following picture.
Figure 1 Overview of ColorPicker control
3. Interaction Design
3.1 Color Chooser
Appearance of the Color Chooser varies based on which use case it is going to be used in.
For graphic applications it is common to use a button-like appearance of the Color Chooser. On the other hand, text editors use a split-menu-button-like appearance of the Color Chooser in order to allow users to reapply colors easily. Other programs may use a menu-button-like appearance of the Color Chooser instead. Giving that, it is responsibility of application developers to choose the right appearance of the Color Chooser based on their use case.
Even though the appearance of the Color Chooser may differ, all versions of the Color Chooser must show a preview of selected color. Next to the preview area, there is a space for showing label of the color. If it is a predefined color, such as Yellow/Black/Magenta/etc., its name appears there. Otherwise, its code appears there instead. Please note that application developers must be allowed to choose whether the label of the color will display or not. For more information, see the following picture.
Figure 2 Appearance of Color Chooser
The following paragraph describes interaction models for various appearances of the Color Chooser mentioned above:
- Button-like or Menu-Button-like appearance
- If the Color Chooser is represented by a button or menu button, users can click the button to open the Color Palette.
- Split-menu-button-like appearance
- If the Color Chooser is represented by a split-menu-button, users can click the pop-up button to open the Color Palette. Clicking the main button reapplies already chosen color on a selected object.
For behavior and keyboard navigation of the split menu button, menu button or button, see the MenuButtons UE Spec or CommandButton UE Spec.
Note that the menu-button-like appearance of the Color Chooser is the default.
3.2 Color Palette
The Color Palette opens with predefined set of colors. If there is already a custom color defined, this color is displayed in Custom Colors area in the Color Palette too (for more information, see Figure 1). Note that application developers must be allowed to add their set of custom colors to the Color Palette.
Color that is displayed in the preview area of the Color Chooser is always selected when the Color Palette opens. If there is no such color in the palette, nothing is selected. Every time a color is focused or a mouse cursor hovers over it, a tooltip, which shows the name/code of the color, appears.
Figure 3 Color Palette with tooltip
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
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.
If users cannot choose any color from the predefined set, they can navigate to the Custom Color... link and press SPACE or simply click it to open a modal dialog that allows them to define their own color. Once a new color is defined, users can choose whether they want to save it or just use it. If users decide to save the color, this color appears in Custom Colors area. If all fields in Custom Colors area are taken, another row of fields appears.
To remove a color from Custom Colors area, users can right click the color and choose Delete action from the pop-up menu or simply press DELETE key when the color is focused.
Please note that in 2.2 release, it is responsibility of application developers to save Custom Colors every time the application is closed so these colors can be loaded when the application starts again. In 3.0 release, this should not be responsibility of application developers any more, but the ColorPicker control instead.
3.3 Custom Color Dialog
This modal dialog allows users to define their own color.
Figure 5 Overview of Custom Color dialog
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:
- clicking a place within the Color Field and/or Hue Bar and/or by dragging the cursors to the new position,
- changing values in the text input fields (RGB, HSB, Web) and/or Alpha (aka transparency),
- using LEFT/RIGHT keys to change position of sliders, or by
- combination of the three approaches above.
Every time there is a change to the color, whether it is by changing position of the cursors or sliders or by entering a new value into text input fields, the dialog updates accordingly. The following picture shows Color Settings in HSB, RGB, and Web panes.
Figure 6 Settings Overview
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.
Please note that the HSB tab is selected when the Custom Color dialog opens for the first time. If another tab is selected, this selection is preserved so the same tab is selected when the Custom Color dialog opens next time.
4 Navigation
Mouse Support
Color Palette: The following table describes actions that are performed when users click on:
| Action | |
|---|---|
| Left click on a color in the Color Field/Custom Colors area | Update the color in the Color Chooser. Close the Color Palette. Apply the color. |
| Right click on a color in Custom Colors area | Show the contextual menu if applicable. |
| Custom Color... | Open Custom Color dialog. |
| Outside the pop-up | [Pop-up is open] Close the pop-up. |
Custom Color Dialog: The following table describes actions that are performed when users click on:
| Action | |
|---|---|
| Any place in the Color Field | Update values in RGB, HSB, and Web panes. Update New Color in the Color Preview. |
| Any place in the Hue Bar | Update values in RGB, HSB, and Web panes. Update New Color in the Color Preview. |
| Any place on the slider or drag the sliders's knob to the left/right | Decrease/Increase the value in associated text input field. Update values in rest of text input fields as needed. Update the cursor in the Color Field, Hue Bar, and New Color in the Color Preview. |
| CANCEL/CLOSE | Dismiss the dialog. |
| SAVE | Dismiss the dialog. Save the new color to the Custom Colors area in the Color Palette. Close the Color Palette. Update the Color Chooser. Apply the color. |
| USE | Dismiss the dialog. Close the Color Palette. Update the Color Chooser. Apply the color. |
Touch Support
Color Palette: The following table describes actions that are performed when users tap on:
| Action | |
|---|---|
| Short tap on a color in the Color Field/Custom Colors area | Update the color in the Color Chooser. Close the Color Palette. Apply the color. |
| Long tap on a color in the Custom Colors area | Show the contextual menu if applicable. |
| Custom Color... | Open Custom Color dialog. |
| Outside the pop-up | [Pop-up is open] Close the pop-up. |
Custom Color Dialog: The following table describes actions that are performed when users tap on:
| Action | |
|---|---|
| Any place in the Color Field | Update values in RGB, HSB, and Web panes. Update New Color in the Color Preview. |
| Any place in the Hue Bar | Update values in RGB, HSB, and Web panes. Update New Color in the Color Preview. |
| Any place on the slider or drag the sliders's knob to the left/right | Decrease/Increase the value in associated text input field. Update values in rest of text input fields as needed. Update the cursor in the Color Field, Hue Bar, and New Color in the Color Preview. |
| CANCEL/CLOSE | Dismiss the dialog. |
| SAVE | Dismiss the dialog. Save the new color to the Custom Colors area in the Color Palette. Close the Color Palette. Update the Color Chooser. Apply the color. |
| USE | Dismiss the dialog. Close the Color Palette. Update the Color Chooser. Apply the color. |
Directional Keys + OK/Select Support
Color Palette: The following table describes actions that are performed when users press the following keys:
| Key | Action |
|---|---|
| UP/DOWN/LEFT/RIGHT | Move focus up/down/left/right. |
| OK/SELECT | [A color is focused] Close the pop-up. Update the Color Chooser. Apply the color. [A link is focused] Fire the action associated with the link. |
Custom Color Dialog: The following table describes actions that are performed when users press the following keys:
| Key | Action |
|---|---|
| UP | Move focus up. Note that Color Field and Hue Bar are not focusable. |
| DOWN | Move focus down. Note that Color Field and Hue Bar are not focusable. |
| LEFT | Move focus left. [A slider is focused] Move the slider's knob left by one step. If the knob is on the most left position, move focus to the previous focusable component. [A text input field is focused] Move the caret left by one character. If the caret is on the most left position, move focus to the previous focusable component. Note that Color Field and Hue Bar are not focusable. |
| RIGHT | Move focus right. [A slider is focused] Move the slider's knob right by one step. If the knob is on the most right position, move focus to the next focusable component. [A text input field is focused] Move the caret right by one character. If the caret is on the most right position, move focus to the next focusable component. Note that Color Field and Hue Bar are not focusable. |
| OK/SELECT | [A button is focused] Fire the action associated with the button. |
Keyboard Support
Color Palette: The following table describes actions that are performed when users press the following keys:
| Key | Action |
|---|---|
| UP/DOWN/LEFT/RIGHT | Move focus up/down/left/right. |
| TAB | Move focus to the next focusable component. |
| SHIFT-TAB | Move focus to the previous focusable component. |
| DELETE | [A custom color is focused] Remove the color from Custom Colors area. |
| SPACE | [Custom Color... link is focused] Open Custom Color dialog. |
| ENTER | [A Color is focused] Close the pop-up. Update the Color Chooser. Apply the color. |
| ESC | [Pop-up is open] Close the pop-up. |
Custom Color Dialog: The following table describes actions that are performed when users press the following keys:
| Key | Action |
|---|---|
| LEFT | [A slider is focused] Move the slider's knob left by one step. |
| RIGHT | [A slider is focused] Move the slider's knob right by one step. |
| TAB | Move focus to the next focusable component. |
| SHIFT-TAB | Move focus to the previous focusable component. |
| SPACE | [A button is focused] Fire the action associated with the button. |
| ENTER | Dismiss the dialog. Save the new color to the Custom Colors area in the Color Palette. Close the Color Palette. Update the Color Chooser. Apply the color. |
| ESC | Dismiss the dialog. |
Overview
Content Tools
ThemeBuilder