Added a screenshot showing an example of what the rendered color picker could look like.

looking at jquery plugin colorpickers:-
https://bgrins.github.io/spectrum/ -> nice as it supports all browsers/mobile devices and could be backported to IF3.3 maintenance .has small footprint and easily customizable with css. (last checkin 4 months ago).

http://www.eyecon.ro/colorpicker/ -. this most closely matches the image Carlo added to this jira. (last checking for code was in 2009 though..)

http://www.dematte.at/tinyColorPicker/ (really small footprint, basic color picker).

ICEfaces4 trunk r.49164/ IE11, Chrome52, FF47:
1) On all demos, a browser console error occurs if opening, then clicking the "Choose" button without selecting a color in the colorEntry component:
SCRIPT5007: Unable to get property 'toHex' of undefined or null reference
File: eval code (24), Line: 21, Column: 17

2) TLD Documentation links still return 404 page errors.

3) Overview demo: in "Entered data" panel, the third line is "Color Selected from allowEmpty example", however there is no "allowEmpty" example above; instead, the name of the example is "Required and Show Pallette only".

4) Customize demo: the word "how" is missing from the description:
This example shows how to render, customize, and position a label for the colorEntry component.

5) Customize demo: the demo does not entirely reflects the description, as example there is no possibility to change labelPosition.

ICEfaces4 trunk r.49171/ IE11, Chrome53, FF47: issues 1), 3), 4) from previous comment have been resolved.

Added colorEntry JS resources to the list of files that need to be compressed at build time.

rev 49304 now has support for styleClass as well as clear and reset functionality. QA can now begin testing and review can be done on this component.

Testing showcase > colorEntry with ICEfaces4 trunk r.49306/ IE11, FF47, Chrome53 found the following issues:

All demos:
The TLD Documentation links still return 404 page errors.

Overview demo:

• In Chrome browser, a warning is written in browser console when landing first time on the colorEntry demo.
  Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
• no values are rendered for "Color Selected from No Palette and Show Input:" under "Entered data" (all browsers).

Customize demo:

• When selecting format of value="None", the selected values rendered are actually the same as for the default "HEX". Is this correct?

Color Palette demo:

• The Input Maximum Selection Size" drop-down does not appear to be functional, as it does not render more than 2 color choices, including the current choice (maxSelectionSize.png attached).
• Occasionally in IE11 and Chrome, after enabling "Show Palette Only" and "Toggle Palette Only", when clicking the "More" button, the colorEntry component renders in the upper left side of the window. After choosing a color, the colorEntry returns to the correct position on page. This issue was not seen on Firefox.

the spectrum plugin does not support effects/animation, so with that being a new requirement, taking a look at http://vanderlee.github.io/colorpicker/ which uses jquery-ui/dialog so supports animation as well as being styled similar to the other popup components. It also has MIT license.

Tested showcase app with ICEfaces 4 trunk r49614, Tomcat 8.
Tested demo with javax.faces.PROJECT_STAGE = Production. There is a console error and the color picker is not rendered.

TypeError: this.jq.colorpicker is not a function
http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=hffoxu
Line 14444

This is not an issue when ProjectStage=Development

ICEfaces 4 trunk r49617. Verified console error is no longer seen when testing application with PROJECT_STAGE = Production set in web.xml

ICEfaces 4 trunk r49707.
Some other issues noted:
Options and Customize demos -
1.) Labels need to be standardised for capital and lower case letters.
":-" should be removed from Duration label.
Show NoneButton could be written as "Enable showNoneButton".

2.) When using Show Input for Alpha the transparency does not persist when reopening the palette.

3.) When in popup mode, clicking a color on the palette updates the text value in the input, but does not update the color swatch on the left. The swatch is not updated until pressing OK button

ICEfaces 4 trunk r49718
Issues remain

• on Options demo > RGB and HSL color format, and on Customize demo > HSLPERCENT color format returns false on every second selection.
• The Customize demo still has several color format selections that were removed from the Options demo. Should the Customize demo have those selections removed as well?
• As per Ken change the label for Show NoneButton to Show 'None' Button

re:

that's the way the underlying component works. HSL requires a transparency/alpha value and it is looking for an alpha value to calculate the HSL. so if you choose a transparent value and then a color, you receive a new HSL value.

We can document this behaviour in the Wiki page.

rev 50372 includes the locale and swatches support with examples in showcase. Note that the locale example in showcase just shows the included locales. Will update the wiki page to show how to create further locale support using standard JSF message-bundle.

Review notes:

In general things are looking very good!

1. We should show the actual selected colour at top of demos, in addition to the value.
2. When selecting a colour the first time, if you Cancel the dialog, the value in the input field is blank (correct), but the colour bar on the left side keeps the cancelled colour (bad).
3. The popup fonts are too large. They should roughly match those present on the ace:dateTimeEntry popup using the same theme, etc. I've uploaded a comparison snapshot (popupFonts.png).
4. Can the popup dialog position itself intelligently, to avoid popping up in a direction where it won't fit on the page?
5. Slider bars are too tall still, should center inside the slider buttons.
6. Put the Locale demo at the bottom of the list on the left side menu.

TLD Doc Review Notes

Let's change the following attribute names for clarity and consistency with other components:

• alpha -> showAlpha
• buttonColorize -> colorizePopupIcon
• limit -> palette
• Why do we have both “locale” and “regional” attributes?

Note that I noticed that when you use the "none" button to select no color, it doesn't reset/remove the last selected color from the input field border.

Showcase Demo Review Notes

ace:colorEntry

• For all demos:
  • Let’s put the “Selected Color” region below the ColorEntry panel, and also have it change the background color of the “Selected Color” panel to match the selected color. The “Selected Color” label and it’s associated text value can keep its usual background color (doesn’t change).
  • “None” color button in popup is not the same size/font as the “Cancel/Okay” buttons, but should be.

• Overview
  • Change desc. text to: “The <ace:colorEntry> component allows the user to input a color value via either an input field or a highly customizable popup color selection dialog. It supports features such as multiple color value formats, limiting selections to pre-defined color swatches, configurable color swatches, and localization.

• Popup
  • Let’s use the label attribute to put a label on the left side of the input “Select a Color:”
• PopupIconOnly
  • Change demo title to “Popup Icon”

• Options
  • Let’s put the labels on the left side of the option inputs, and use “:” to be consistent with other demos (eg. “Effect: “).
  • Change “Choose Format of Color” label to “Color Value Format:”
  • “Duration” to “Effect Duration”
  • Add a “Label Position:” config selectmenu.

• Customize
  • Move the “Custom Parts and Layout” panel below the “Options” panel.
  • Add a label to the “ColorEntry - Customizable” input field “Select a Color:”

• Swatches
  • Let’s put each sub-demo into a tab in a tabpane to keep things clean.
  • Change the title for “Dynamically Choose Four Colours to Create a Swatch” to “Choose Four Colors to Create a Swatch”
  • Make it so the swatch will still create using however many colors they selected, don’t force them to enter all four.
  • Add labels to all color entry fields (left side).

• Locale
  • “Other locale support may be added…” -> “Support for additional locales may be added…”

rvn 50771- tweaked demo labels, label alignment, and selected color styling.

To support the different Theme Roller themes that might use dark or light backgrounds, ideally the background color used on the "select color" box label and value should use an appropriate themeRoller theme for the background and text colors.

rvn:50777 Locale: “Other locale support may be added…” -> “Support for additional locales may be added…” fixed.

rvn: 50921 - Updated styling for "Selected Color:" box in all demos.

The Options demo fails to show the Selected Color background color if the type isn't HEX.

rvn 50923 fixed Options demo

need to fix tabindex so that commit does not happen if value does not change.

ICEfaces 4.2 Jenkins Build 4
Server warning when navigating to ace:colorEntry > Swatches in any browser.
WARNING: Unable to find component with ID SelSwatchName in view.
Mar 08, 2017 11:45:35 AM com.sun.faces.renderkit.html_basic.HtmlBasicRenderer ge
tForComponent

rev 51136 fixed label for attribute on swatches example

ICEfaces 4 trunk r 51140
QA Test page /colorEntryAttribute1.jsf, all browsers

At the bottom of the page there is a test:
3. Testing attributes: buttonText='ClickHere'; showOn=all;

When using this test the colorEntry is rendered at the very top of the page instead of at the bottom right of the Click Here button as seen in other examples.
Not sure if this is an issue.

ICEfaces 4 trunk r51140
Verified WARNING: Unable to find component with ID SelSwatchName in view. is no longer seen when navigating ace:colorEntry > Swatches demo. Tomcat 8, FF 47, IE 11, Chrome 56.

...the followings have not been changed, as they can still be found in the TLDDOC:

buttonColorize -> colorizePopupIcon
limit -> palette

Upon review we've decided against changing those two attribute names, so it's fine as-is.

Verified corrected demo ICEfaces 4.2 Jenkins Build 6, Tomcat 8, FF 47, Chrome 56, IE 11, 10.