Color Picker

Color Picker based on spectrum.js

Example

Documentation

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

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

Color Picker based on spectrum.js

Info

Tag name	colorpicker
Component type	io.tornadofaces.component.Colorpicker
Renderer type	io.tornadofaces.component.ColorpickerRenderer

Attributes

Name	Description	Required
widgetVar	Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar.	false
value	The color value	false
rendered	Should this component be rendered?	false
flat	Flat means that it will always show up at full size, and be positioned as an inline-block element.	false
showTextField	Show the text input field next to the color picker dropdown. Defaults to true.	false
showInput	You can add an input to allow free form typing inside the popup. Defaults to true.	false
showAlpha	Allow alpha transparency selection. Defaults to false.	false
disabled	Disable input/color change. Defaults to false.	false
showPalette	Spectrum 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
showPaletteOnly	Show the palettes you specify, and nothing else. Defaults to false.	false
togglePaletteOnly	Spectrum 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
showSelectionPalette	Spectrum 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
selectionPalette	The 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
maxSelectionSize	The 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
hideAfterPaletteSelect	You can have the colorpicker automatically hide after a palette color is selected. Defaults to false.	false
clickoutFiresChange	When 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
showInitial	Spectrum 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
allowEmpty	Allows for selecting an empty color. Defaults to false.	false
showButtons	Show buttons in selection dialog. Defaults to true.	false
cancelText	Cancel button text. Defaults to 'cancel'	false
onChange	JavaScript callback on change. The callback gets the selected color as the sole argument.	false
containerClassName	Add an additional class name to the container element.	false
replacerClassName	Add an additional class name to the replacer element.	false
preferredFormat	You can set the format that is displayed in the text box. Valid options are 'hex', 'hex3', 'hsl', 'rgb', 'name'. Defaults to 'hex'	false
chooseText	Choose 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

<t:color-picker>
    <f:ajax event="change" listener="#{controller.colorChanged}">
</t:color-picker>

public void colorChanged(AjaxBehaviorEvent event) {
    //
}

Client Side API

Widget: TornadoFaces.widget.Colorpicker

Method	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.