Color picker

Changes an <input type="text"> tag into a field with a button next to it that can be used to open a palette used to pick a color. The component supports selection only, that means that a user can not type a color name but instead must choose a color from a list of colors.

The JSFColorPicker component adds a helper button to an <input> field which can be used to pop up the display of a color palette which in turn can be used to choose a color. The content of the input field is shown as a color swatch (optionally with the name of the selected color shown in the swatch.)

The JSFColorPicker is a select only component (you can not type in a color). This means that it has a previously defined list of allowable choices. The list of allowed colors is specified as an attribute of the component. A color is specified as a hex value, with an optional name that matches the hex value. This is analogous to an HTML <select> tag containing <option> child tags which specify a value and a label for the value.

The helper button is added to the right of the input field. The input field retains all of its original characteristics adding the helper button within the constraints of the original characteristics. For example, if the input field is defined to be 120px wide, when the helper button is added the combined component is now 120px wide. The button assumes style properties that match the input field, for example the button borders match the borders of the input field. Applicable attributes applied to the input field, such as disabled, are also reflected to the button.

The popup containing the color palette behaves like a Windows® popup. If you click on a swatch in the popup, the popup disappears. If you click anywhere in the page outside of the popup, the popup disappears. The popup typically displays below the input field, left edges aligned. If the popup does not fit below the input field (for example the input field is near the bottom of the window), it displays above the input field. It can be styled via the CSS classes.

JSF tags that emit the component

<hx:selectOneColor>

Base HTML

<input type="text">

The value of the color picker is passed as the value of the input field. The value should be one of the hex color values specified in the component constructor. If no value is initially passed to the page, the picker has no initial value.

All attributes associated with an input of type text are supported.

All event handlers associated with an input of type text are supported.

JavaScript constructor

hX_5.addComponent("id", new hX_5.JSFColorPicker(attributes)); where

id

The ID of the HTML tag to which the component is attached.

attributes

Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel".

Table 1. JSF color picker attributes

Attribute name

Description

button-border

Controls how the popup button is drawn relative to the input field.

button-color

Specifies the background-color of the button. By default the background color matches the border color of the input field.

css-prefix

The base class of a set of CSS classes that describe the visual appearance.

colors

A semi-colon separated list of hex color values which represent the palette of colors which a user may choose from.

color-names

A parallel list of user-friendly names for each color in the list.

show-labels

If specified, the name of the currently selected color is displayed in the input field on top of the color swatch. If omitted, the name is not displayed and the input field displays only a color swatch showing the currently selected color. Note that the color name is in the input field in all cases (for accessibility reasons), this option makes the name visible.

The default color palette is comprised of the following colors:
"#FDDDCE";"#FFD990";"#FFF799";"#C4DF9B";"#B3FFB2";"#7FCBAE";"#81D3EB";"#ADCDEC";"#D3B6D7";"#FCDEE0";
"#CC6666";"#FF9900";"#D3BD2A";"#8FB73E";"#6DB286";"#4F9BAA";"#6D9AB4";"#6F85C2";"#897AB9";"#B7798E";
"#ED1C24";"#FF6600";"#FFFF00";"#9ACA3C";"#00FF00";"#00FFFF";"#0000FF";"#4F57A6";"#800080";"#FF00FF";
"#FFFFFF";"#F2F2F2";"#E5E5E5";"#D9D9D9";"#CCCCCC";"#B3B3B3";"#999999";"#808080";"#666666";"#000000";

CSS classes

The CSS for the picker is complex. The class(es) applied to the input tag style the input field and by extension, the popup button next to it. A second, independent, set of classes style the popup. This set of classes applies to all popups in the page unless the css-prefix attribute is used to override the display of an individual popup. The set of classes used to style the popup follow the usual hxclient naming convention where there is a single base class name and all other classes used to style the popup use that base name with a suffix.

By default, the popup is styled using the base class inputColor_ColorPicker. The css-prefix attribute can be used to specify a different base class.

To restate, the class specified on the input field styles the input field and associated button. All of the color popups in the page are styled by the class inputColor_ColorPicker (and associated sub classes) unless a css-prefix attribute is specified on an indivdual component.

Table 2. JSF color picker CSS classes

Attribute name

Description

base_ColorPicker

Styles the outermost div that contains the popup. As a rule, the height and width properties should not be explicitly set in this class, instead, specify the size of a grid cell and the popup will size itself based on the size of a grid cell.

<base>_ColorPicker-Body

Styles the outermost table that organizes the popup into a grid.

<base>_ColorPicker-GridCell

Styles an individual grid (table) cell in the table.

<base>_ColorPicker-GridSwatch

Styles an individual swatch of color in a grid cell.

<base>_ColorPicker-GridCell-Selected

Specifies the style of the (one) grid cell that represents the currently selected color.

<base>_ColorPicker-GridCell-Hover

Specifies the style of a grid cell that has either keyboard or mouse focus.

<base>_ColorPicker-GridCell-Hover-Selected

Specifies the style of a grid cell that has BOTH keyboard or mouse focus and selection.

Note: The base class that styles the popup supports three kinds of effects that apply to the popup div in some browsers. Not all browsers support these effects. If the browser does not support the effect the effect is not drawn.

API calls

Table 3. JSF color picker API calls

API call

Description

redraw()

Redraw the component taking into account any changes made to the attributes/properties of the base tag.

uirelease()

Releases any active UI associated with the component.

setValue(string)

Sets the value of the component and ensures that the value provided is valid.

object = getValue(boolean)

Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScriptâ„¢ date/time object instead of as a string.

object = setAttribute(attribute)

Sets an attribute or changes its value (if it was set previously).

string = getAttribute(attribute-name)

Retrieves the current value of an attribute.

Accessibility

The color picker is fully keyboard accessible. As with a combo box, the input area and the picker button are treated as a single entity in the tab order. When the component has focus, pressing either the Up or Down arrow keys will open the popup (and move focus to it). While the popup has focus, pressing spacebar or newline selects the currently selected color (closing the popup and returning focus to the component). Pressing ESC closes the popup, returning focus to the component and leaves the value unchanged. Pressing the left, right, up and down arrows changes the which swatch has focus. Pressing Home, PgUp, End, PgDn moves focus to the first/last color in the palette.

The color picker currently does not report XML roles/states (it is however XHTML compliant). This will be added as soon as possible.

Example code

Add a color picker with 32 colors in it to the page. Initially, white is the selected color.

<input type="text" id="form1:text01" class="inputColor" size="20" value="#FFFFFF" />
<script>
hX.addComponent("form1:text01", new hX.JSFColorPicker(
    "colors:#FDDDCE;#FFD990;#FFF799;#C4DF9B;#B3FFB2;#7FCBAE;#81D3EB;#ADCDEC;#D3B6D7;#FCDEE0;#CC6666;#FF9900;#D3BD2A;#8FB73E;#6DB286;#4F9BAA;#6D9AB4;#6F85C2;#897AB9;#B7798E;#ED1C24;#FF6600;#FFFF00;#9ACA3C;#00FF00;#00FFFF;#0000FF;#4F57A6;#800080;#FF00FF;#FFFFFF;#F2F2F2;#E5E5E5;#D9D9D9;#CCCCCC;#B3B3B3;#999999;#808080;#666666;#000000",
    "color-names:pale red;pale orange;pale yellow;pale avocado;pale green;pale cyan;pale blue;pale cerulean;pale purple;pale magenta;dull red;dull orange;dull yellow;dull avocado;dull green;dull cyan;dull blue;dull cerulean;dull purple;dull magenta;red;orange;yellow;avocado;green;cyan;blue;cerulean;purple;magenta;white;very pale gray;pale gray;very light gray;light gray;gray;medium gray;dark gray;very dark gray;black"));
</script>

Feedback