Color Picker

Color Picker based on spectrum.js

<t:form-element label="Pick a color">
    <t:colorpicker value="#{controller.color}" >
        <f:ajax listener="#{controller.colorChanged}" render="notification"/>

<t:form-element label="Just the picker">
    <t:colorpicker value="#{controller.color}" showTextField="false" />

Color Picker based on spectrum.js

Tag name colorpicker
Component type io.tornadofaces.component.Colorpicker
Renderer type io.tornadofaces.component.ColorpickerRenderer
widgetVar Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar.false
valueThe color valuefalse
renderedShould this component be rendered?false
flatFlat means that it will always show up at full size, and be positioned as an inline-block element.false
showTextFieldShow the text input field next to the color picker dropdown. Defaults to true.false
showInputYou can add an input to allow free form typing inside the popup. Defaults to true.false
showAlphaAllow alpha transparency selection. Defaults to false.false
disabledDisable input/color change. Defaults to false.false
showPaletteSpectrum can show a palette below the colorpicker to make it convenient for users to choose from frequently or recently used colors. When the colorpicker is closed, the current color will be added to the palette if it isn't there already. Add list of colors representing each row via the palette attribute. Defaults to false.false
showPaletteOnlyShow the palettes you specify, and nothing else. Defaults to false.false
togglePaletteOnlySpectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette. The default value for togglePaletteOnly is false. Set it to true to enable the Toggle button. You can also change the text on the Toggle Button with the options togglePaletteMoreText (default is "more") and togglePaletteLessText (default is "less").false
showSelectionPaletteSpectrum can keep track of what has been selected by the user with the showSelectionPalette option. If the localStorageKey option is defined, the selection will be saved in the browser's localStorage object. Defaults to true.false
selectionPaletteThe default values inside of the selection palette, as a list of Strings. Make sure that showSelectionPalette and showPalette are both enabled. If a localStorageKey is defined, then this value will be overwritten by it.false
maxSelectionSizeThe number of elements allowed in the selectionPalette at any given time. Elements will be removed from the palette in first in - first out order if this limit is reached.false
hideAfterPaletteSelectYou can have the colorpicker automatically hide after a palette color is selected. Defaults to false.false
clickoutFiresChangeWhen clicking outside of the colorpicker, you can force it to fire a change event rather than having it revert the change. Defaults to true.false
showInitialSpectrum can show the color that was initially set when opening. This provides an easy way to click back to what was set when opened. Defaults to false.false
allowEmptyAllows for selecting an empty color. Defaults to false.false
showButtonsShow buttons in selection dialog. Defaults to true.false
cancelTextCancel button text. Defaults to 'cancel'false
onChangeJavaScript callback on change. The callback gets the selected color as the sole argument.false
containerClassNameAdd an additional class name to the container element.false
replacerClassNameAdd an additional class name to the replacer element.false
preferredFormatYou can set the format that is displayed in the text box. Valid options are 'hex', 'hex3', 'hsl', 'rgb', 'name'. Defaults to 'hex'false
chooseTextChoose button text. Defaults to 'choose'false
Client Side Callbacks

onChange is called as a color is selected.

function onChange(color) {
Ajax Behavior Events

change will be called when a color is changed

    <f:ajax event="change" listener="#{controller.colorChanged}">
public void colorChanged(AjaxBehaviorEvent event) {
Client Side API

Widget: TornadoFaces.widget.Colorpicker

Method Params Return type Description
show() void Show the picker.
hide() void Hide the picker.
toggle() void Toggle show/hide of the picker.

Se more documentation on Spectrum Website.