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.29.  < rich:colorPicker >

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


Table 6.88. rich : colorPicker attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
colorModeDefines a color mode for the component input. Possible values are hex, rgb.
converterId of Converter to be used or reference to a Converter
converterMessageA ValueExpression enabled attribute that, if present, will be used as the text of the converter message, replacing any message that comes from the converter
flatDefines whether the component will be rendered flat.
idEvery component may have a unique id that is automatically created if omitted
immediateA flag indicating that this component value must be converted and validated immediately (that is, during Apply Request Values phase), rather than waiting until a Process Validations phase
onclickHTML: a script expression; a pointer button is clicked
ondblclickHTML: a script expression; a pointer button is double-clicked
onkeydownHTML: a script expression; a key is pressed down
onkeypressHTML: a script expression; a key is pressed and released
onkeyupHTML: a script expression; a key is released
onmousedownHTML: script expression; a pointer button is pressed down
onmousemoveHTML: a script expression; a pointer is moved within
onmouseoutHTML: a script expression; a pointer is moved away
onmouseoverHTML: a script expression; a pointer is moved onto
onmouseupHTML: script expression; a pointer button is released
renderedIf "false", this component is not rendered
requiredIf "true", this component is checked for non-empty input
requiredMessageA ValueExpression enabled attribute that, if present, will be used as the text of the validation message for the "required" facility, if the "required" facility is used
showEventDefines the event that triggers the colorPicker. Default value is "onclick".
validatorMethodBinding pointing at a method that is called during Process Validations phase of the request processing lifecycle, to validate the current value of this component
validatorMessageA ValueExpression enabled attribute that, if present, will be used as the text of the validator message, replacing any message that comes from the validator
valueThe current value of this component
valueChangeListenerListener for value changes

Table 6.89. Component identification parameters

NameValue
component-typeorg.richfaces.ColorPicker
component-classorg.richfaces.component.html.HtmlColorPicker
component-familyorg.richfaces.ColorPicker
renderer-typeorg.richfaces.ColorPickerRenderer
tag-classorg.richfaces.taglib.ColorPickerTag

Here is a simple example of how the component can be used on a page:

Example:



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

Example:



import org.richfaces.component.html.colorPicker;
... 
HtmlColorPicker myColorPicker = new ColorPicker();
...
        

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 "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:


For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:colorPicker> components at once:






On the screenshot there are classes names that define styles for component elements.





In order to redefine styles for all <rich:colorPicker> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:


...
.rich-colorPicker-ext{
    
background-color: #ecf4fe;
}                     
...

This is the result:


In the shown example the background color for the widget is changed.

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