Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.11.2.  < rich:colorPicker > available since 3.3.1

The <rich:colorPicker> component lets you visually choose a color or define it in hex, RGB, or HSB input fields.


The <rich:colorPicker> component allows you easily select a color or define it in hex, RGB, or HSB input fields. There are two squares in the widget that help you to compare the currently selected color and the already selected color.

The "value" attribute stores the selected color.

The value of the <rich:colorPicker> component could be saved in hex or RGB color models. You can explicitly define a color model in the "colorMode" attribute.

Example:



...
<rich:colorPicker value="#{bean.color}" colorMode="rgb" />
...
        

This is the result:


The <rich:colorPicker> component has two representation states: flat and inline. With the help of the "flat" attribute you can define whether the component is rendered flat.

Example:



...
<rich:colorPicker value="#{bean.color}" flat="true" />
...
        

The component specific event handler "onbeforeshow" captures the event which occurs before the <rich:colorPicker> widget is opened. The "onbeforeshow" attribute could be used in order to cancel this event. See the example below:



...
<rich:colorPicker value="#{bean.color}" onbeforeshow="if (!confirm('Are you sure you want to change a color?')){return false;}" />
...
     

The "showEvent" attribute defines the event that shows <rich:colorPicker> widget. The default value is "onclick".

The <rich:colorPicker> component allows to use the "icon" facet.

You can also customize <rich:colorPicker> rainbow slider ( ) with the help of the "arrows" facet.



...
<rich:colorPicker value="#{bean.color}">
    <f:facet name="icon">
        <h:graphicImage value="/pages/colorPicker_ico.png" />
    </f:facet>
    <f:facet name="arrows">
        <f:verbatim>        
            <div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;" />
        </f:verbatim>
    </f:facet>
</rich:colorPicker>
...
        

This is the result:


Table of <rich:colorPicker> attributes.



Table 6.169. Style classes (selectors) with the corresponding skin parameters

Class (selector) nameDescriptionSkin ParameterCSS properties mapped
.rich-colorpicker-extDefines styles for the component widgetpanelBorderColorborder-color
generalBackgroundColorbackground-color
generalFamilyFontfont-family
.rich-color-picker-span inputDefines styles for the input field that contains selected colorpanelBorderColorborder-color
generalSizeFontfont-size
generalFamilyFontfont-family
.rich-color-picker-ext inputDefines styles for the input field within the component widgetcontrolTextColorcolor
controlBackgroundColorbackground-color
.rich-color-picker-ext labelDefines styles for the label within the component widgetgeneralTextColorcolor
generalSizeFontfont-size
generalFamilyFontfont-family
.rich-color-picker-iconDefines styles for the component iconpanelBorderColorborder-color
.rich-color-picker-colorDefines styles for the color palettepanelBorderColorborder-color
.rich-color-picker-new-colorDefines styles for the already selected colorpanelBorderColorborder-color
.rich-color-picker-current-colorDefines styles for the currently selected colorpanelBorderColorborder-color
.rich-color-picker-cancelDefines styles for the "Cancel" buttonbuttonFontSizefont-size
buttonFamilyFont, generalFamilyFontfont-family
headerTextColorcolor
headerBackgroundColor, panelBorderColorborder-color
headerBackgroundColorbackground-color
.rich-color-picker-submitDefines styles for the "Apply" buttonbuttonFontSize, panelBorderColorfont-size
buttonFamilyFont, generalFamilyFontfont-family
headerTextColorcolor
headerBackgroundColor, panelBorderColorborder-color
headerBackgroundColorbackground-color
.rich-color-picker-colors-inputDefines styles for the hex, RGB, and HSB input filedsgeneralSizeFontfont-size
generalFamilyFontfont-family
generalTextColorcolor
panelBorderColorborder-color
controlBackgroundColorbackground-color


You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

On the component LiveDemo page you can see the example of the <rich:colorPicker> component usage and sources for the given example.