| Package | ardisia.components.colorPicker |
| Class | public class ColorPicker |
| Inheritance | ColorPicker  spark.components.supportClasses.SkinnableComponent |
| Implements | mx.managers.IFocusManagerComponent |
Transparency is represented by a value of "NaN" for the "selectedColor" property.
View the technical documentation on the Ardisia Labs website for more information.
DESIGN NOTES
Popup will not garbage collect when a spark TextInput exists. It may be a hidden event listener in SkinnableTextBase or the FocusManager. Tried to sever all links to FocusManager but the problem persists.| Property | Defined By | ||
|---|---|---|---|
| colorField : String
Name of the field in the dataProvider that specifies the hex color
values to display in the palette. | ColorPicker | ||
| colorSpacePickerIsOpen : Boolean [read-only]
True when the color space picker is open. | ColorPicker | ||
| dataProvider : Array
Accepts an array of hex or uint colors to be displayed by the picker. | ColorPicker | ||
| editable : Boolean
If true, the user can edit the hex value in the text input via the
keyboard. | ColorPicker | ||
| enableOutsideHoverColorSelect : Boolean = false
True to allow users to select colors based on pixels clicked while
hovering outside the picker.. | ColorPicker | ||
| focusedColor : Number [read-only]
The color focused in the palette in the open picker. | ColorPicker | ||
| hovered : Boolean [read-only]
True if the component is currently hovered over. | ColorPicker | ||
| isDown : Boolean [read-only]
True if the mouse is down over the component. | ColorPicker | ||
| isOpen : Boolean [read-only]
True if the component is currently open. | ColorPicker | ||
| labelField : String
Name of the field on the objects in the dataProvider that specifies the
the name of the color to display in the text input field rather than a
hex based color. | ColorPicker | ||
| selectedColor : Number
The selected color. | ColorPicker | ||
| showColorSpacePicker : Boolean
True to display the button to open that opens the color space picker
control. | ColorPicker | ||
| showTextField : Boolean
True to display the text input skin part in the popup palette that
allows the user to enter the color hex value and displays custom names
for the colors. | ColorPicker | ||
| showTransparency : Boolean
True to display the transparency button. | ColorPicker | ||
| Method | Defined By | ||
|---|---|---|---|
close():void
Called when the popup should be closed. | ColorPicker | ||
displayColorSpacePicker():void
Create and display the color space picker. | ColorPicker | ||
dispose():void
Removes the picker from the stage and cleans up some listeners. | ColorPicker | ||
open():void
Called when the popup should be opened. | ColorPicker | ||
setSelectedColor(value:Number, dispatch:Boolean = true):void
Update the "selectedColor" property without invalidating properties and
optionally dispatching the "change" event. | ColorPicker | ||
| Method | Defined By | ||
|---|---|---|---|
addTriggers():void
Listeners added when the popup is opened. | ColorPicker | ||
colorSpacePickerButtonPartHandler(event:Event):void
Handles events on the colorSpacePickerButtonPart. | ColorPicker | ||
colorSpacePickerPartHandler(event:Event):void
Handles events on the colorSpacePickerPart. | ColorPicker | ||
getPointColor(x:Number, y:Number):uint
Return the color at the passed xy coordinate. | ColorPicker | ||
hexValuePartHandler(event:Event):void
Handles changes to the hexValue part. | ColorPicker | ||
loseHexFocus():void
Called after the popup is closed. | ColorPicker | ||
mouseHandler(event:MouseEvent):void
Handles events over the picker button. | ColorPicker | ||
palettePartHandler(event:Event):void
Handles events dispatched via the color palette part. | ColorPicker | ||
popupPartHandler(event:Event):void
Handles events dispatched by the popup part. | ColorPicker | ||
removeCursor():void
Remove the custom cursor. | ColorPicker | ||
removeTriggers():void
Remove popup trigger listeners. | ColorPicker | ||
setCursor():void
Apply a custom cursor when mousing over the palette. | ColorPicker | ||
setFocusedColor(value:Number):void
Update the "focusedColor" property without invalidating properties. | ColorPicker | ||
setHexFocus():void
Called after the popup is displayed and positioned. | ColorPicker | ||
skinHandler(event:Event):void
Handles state change events on the skin. | ColorPicker | ||
transparentButtonPartHandler(event:Event):void
Handles events on the transparentButtonPart. | ColorPicker | ||
updateFocusColorFillPart():void
Update the focusColorFillPart. | ColorPicker | ||
updateHexValuePart():void
Update the hexValuePart. | ColorPicker | ||
updatePalettePart():void
Update the palettePart. | ColorPicker | ||
updateSelectedColorFillPart():void
Update the selectedColorFillPart. | ColorPicker | ||
| Event | Summary | Defined By | ||
|---|---|---|---|---|
| Dispatched when the "selectedColor" property changes due to user interaction. | ColorPicker | |||
| Dispatched when the popup part is closed. | ColorPicker | |||
| Dispatched when a focused color is committed to the selectedColor. | ColorPicker | |||
| Dispatched when the focused color in the picker changes on mouse over. | ColorPicker | |||
| Dispatched when the popup is open and a click occurs outside the popup. | ColorPicker | |||
| Dispatched when the popup part is opened and displayed. | ColorPicker | |||
| Dispatched when the "selectedColor" property changes. | ColorPicker | |||
This component uses skins made up of skin parts. Do not set the skin parts directly. The component's skin sets the skin parts.
| Skin Part | Description | Defined By | ||
|---|---|---|---|---|
colorSpacePickerButtonPart:mx.core.IVisualElement | Required: false Part Type: Static Used to open the ColorSpacePicker. | ColorPicker | ||
colorSpacePickerFactoryPart:mx.core.IFactory | Required: false Part Type: Dynamic The factory for the ColorSpacePicker control. The IFactory must return an object of type DataPane | ColorPicker | ||
focusColorFillPart:ColorPickerSelectedFill | Required: false Part Type: Static Displays the focused color in the popup color selector. | ColorPicker | ||
hexValuePart:mx.controls.TextInput | Required: false Part Type: Static Displays the color value of the focused/selected color in hex or text, and accepts user input. Could not get Spark TextInput to garbage collect, so reverted to halo TextInput and now it garbage collects. | ColorPicker | ||
palettePart:ColorPickerRenderer | Required: true Part Type: Static Skin part that holds the color palette. Programmatically drawn. | ColorPicker | ||
popupPart:spark.components.SkinnableContainer | Required: true Part Type: Static Skin part that wraps the popup picker. Must implement IFocusManagerComponent. | ColorPicker | ||
selectedColorFillPart:ColorPickerSelectedFill | Required: true Part Type: Static Skin part that displays the selectedColor in the picker button. | ColorPicker | ||
transparentButtonPart:mx.core.IVisualElement | Required: false Part Type: Static Used to select transparency as the selected color. | ColorPicker | ||
To skin the component, implement a skin that defines the following states. Although you must implement all skin states, a skin state can be empty. An empty skin state specifies no changes to the default skin state.
| Skin State | Description | Defined By | ||
|---|---|---|---|---|
disabled | ColorPicker | |||
down | ColorPicker | |||
open | ColorPicker | |||
over | ColorPicker | |||
up | ColorPicker | |||
| colorField | property |
colorField:StringName of the field in the dataProvider that specifies the hex color values to display in the palette.
The default value is null.
public function get colorField():String public function set colorField(value:String):void| colorSpacePickerIsOpen | property |
colorSpacePickerIsOpen:Boolean [read-only] True when the color space picker is open.
The default value is false.
public function get colorSpacePickerIsOpen():Boolean| dataProvider | property |
dataProvider:ArrayAccepts an array of hex or uint colors to be displayed by the picker. If null, a web safe color list will be used, retrieved from the ColorUtils.getWebSafeArray() method.
The default value is null.
public function get dataProvider():Array public function set dataProvider(value:Array):void| editable | property |
editable:BooleanIf true, the user can edit the hex value in the text input via the keyboard. If false, the user can only view the text in the text field.
Only relevant if the "showTextField" property is true.
The default value is true.
public function get editable():Boolean public function set editable(value:Boolean):void| enableOutsideHoverColorSelect | property |
public var enableOutsideHoverColorSelect:Boolean = falseTrue to allow users to select colors based on pixels clicked while hovering outside the picker..
The default value is false.
| focusedColor | property |
focusedColor:Number [read-only] The color focused in the palette in the open picker. A value of NaN represents transparency. On commit by closing the popup, this value is set to the "selectedColor" property.
Bindable event. Bound to "focusedColorChanged" events.
The default value is 0xFFFFFF.
This property can be used as the source for data binding.
public function get focusedColor():Number| hovered | property |
hovered:Boolean [read-only] True if the component is currently hovered over. Refers to the button used to open the picker.
The default value is false.
public function get hovered():Boolean| isDown | property |
isDown:Boolean [read-only] True if the mouse is down over the component.
The default value is false.
public function get isDown():Boolean| isOpen | property |
isOpen:Boolean [read-only] True if the component is currently open.
The default value is false.
public function get isOpen():Boolean| labelField | property |
labelField:StringName of the field on the objects in the dataProvider that specifies the the name of the color to display in the text input field rather than a hex based color.
If this property is defined, the "colorField" property must also be set.
The default value is null.
public function get labelField():String public function set labelField(value:String):void| selectedColor | property |
selectedColor:NumberThe selected color. A value of NaN represents transparency.
Bindable property. Bound to "valueCommit" events.
The default value is 0xFFFFFF.
This property can be used as the source for data binding.
public function get selectedColor():Number public function set selectedColor(value:Number):void| showColorSpacePicker | property |
showColorSpacePicker:BooleanTrue to display the button to open that opens the color space picker control.
The default value is false.
public function get showColorSpacePicker():Boolean public function set showColorSpacePicker(value:Boolean):void| showTextField | property |
showTextField:BooleanTrue to display the text input skin part in the popup palette that allows the user to enter the color hex value and displays custom names for the colors.
The default value is true.
public function get showTextField():Boolean public function set showTextField(value:Boolean):void| showTransparency | property |
showTransparency:BooleanTrue to display the transparency button.
The default value is false.
public function get showTransparency():Boolean public function set showTransparency(value:Boolean):void| addTriggers | () | method |
protected function addTriggers():voidListeners added when the popup is opened.
| close | () | method |
public function close():voidCalled when the popup should be closed.
| colorSpacePickerButtonPartHandler | () | method |
protected function colorSpacePickerButtonPartHandler(event:Event):voidHandles events on the colorSpacePickerButtonPart.
Parameters
event:Event — the Event that triggered the handler
|
| colorSpacePickerPartHandler | () | method |
protected function colorSpacePickerPartHandler(event:Event):voidHandles events on the colorSpacePickerPart.
Parameters
event:Event — the Event that triggered the handler
|
| displayColorSpacePicker | () | method |
public function displayColorSpacePicker():voidCreate and display the color space picker. Modal.
The currently selected color is fed to its data property. The picker must close itself and is expected to dispatch a PopUpEvent with the new color.
| dispose | () | method |
public function dispose():voidRemoves the picker from the stage and cleans up some listeners.
| getPointColor | () | method |
protected function getPointColor(x:Number, y:Number):uintReturn the color at the passed xy coordinate.
Parameters
x:Number — Number
| |
y:Number — Number
|
uint |
| hexValuePartHandler | () | method |
protected function hexValuePartHandler(event:Event):voidHandles changes to the hexValue part. Tries to detect if the user is entering a hex value with a # or "0x", and adjust the color and max chars accordingly.
Commits the focused value on the ENTER key.
Parameters
event:Event — the Event that triggered the handler
|
| loseHexFocus | () | method |
protected function loseHexFocus():voidCalled after the popup is closed. Puts focus back on the ColorPicker button and dispatches the "close" event.
| mouseHandler | () | method |
protected function mouseHandler(event:MouseEvent):voidHandles events over the picker button.
Parameters
event:MouseEvent — the MouseEvent that triggered the handler
|
| open | () | method |
public function open():voidCalled when the popup should be opened.
| palettePartHandler | () | method |
protected function palettePartHandler(event:Event):voidHandles events dispatched via the color palette part. Handles focusIndex changes and selected color changes.
Parameters
event:Event — the Event that triggered the handler
|
| popupPartHandler | () | method |
protected function popupPartHandler(event:Event):voidHandles events dispatched by the popup part.
Hides the popup if a mouse down occurs outside the popup, and dispatches a FlexMouseEvent event.
Also hides the popup part if the window is resized while it is popped up.
Parameters
event:Event — the Event that triggered the handler
|
| removeCursor | () | method |
protected function removeCursor():voidRemove the custom cursor.
| removeTriggers | () | method |
protected function removeTriggers():voidRemove popup trigger listeners.
| setCursor | () | method |
protected function setCursor():voidApply a custom cursor when mousing over the palette.
| setFocusedColor | () | method |
protected function setFocusedColor(value:Number):voidUpdate the "focusedColor" property without invalidating properties.
Parameters
value:Number — the Number color to apply
|
| setHexFocus | () | method |
protected function setHexFocus():voidCalled after the popup is displayed and positioned. Sets focus and dispatches the "open" event.
| setSelectedColor | () | method |
public function setSelectedColor(value:Number, dispatch:Boolean = true):voidUpdate the "selectedColor" property without invalidating properties and optionally dispatching the "change" event.
Parameters
value:Number — the uint color to apply
| |
dispatch:Boolean (default = true) |
| skinHandler | () | method |
protected function skinHandler(event:Event):voidHandles state change events on the skin. Useful to change focus because once it is called, the popup part has been displayed.
Parameters
event:Event — the Event that triggered the handler
|
| transparentButtonPartHandler | () | method |
protected function transparentButtonPartHandler(event:Event):voidHandles events on the transparentButtonPart.
Parameters
event:Event — the Event that triggered the handler
|
| updateFocusColorFillPart | () | method |
protected function updateFocusColorFillPart():voidUpdate the focusColorFillPart.
| updateHexValuePart | () | method |
protected function updateHexValuePart():voidUpdate the hexValuePart.
| updatePalettePart | () | method |
protected function updatePalettePart():voidUpdate the palettePart.
| updateSelectedColorFillPart | () | method |
protected function updateSelectedColorFillPart():voidUpdate the selectedColorFillPart.
| change | Event |
ardisia.components.colorPicker.events.ColorPickerEventardisia.components.colorPicker.events.ColorPickerEventDispatched when the "selectedColor" property changes due to user interaction.
| close | Event |
ardisia.components.colorPicker.events.ColorPickerEventardisia.components.colorPicker.events.ColorPickerEventDispatched when the popup part is closed.
| commitFocusIndex | Event |
ardisia.components.colorPicker.events.ColorPickerEventardisia.components.colorPicker.events.ColorPickerEventDispatched when a focused color is committed to the selectedColor.
| focusIndexChange | Event |
ardisia.components.colorPicker.events.ColorPickerEventardisia.components.colorPicker.events.ColorPickerEventDispatched when the focused color in the picker changes on mouse over.
| mouseDownOutside | Event |
mx.events.FlexMouseEventmx.events.FlexMouseEventDispatched when the popup is open and a click occurs outside the popup.
| open | Event |
ardisia.components.colorPicker.events.ColorPickerEventardisia.components.colorPicker.events.ColorPickerEventDispatched when the popup part is opened and displayed.
| valueCommit | Event |
mx.events.FlexEventmx.events.FlexEventDispatched when the "selectedColor" property changes.