Package com.orchestranetworks.ui.form.widget

# Interface UIColorPicker

All Superinterfaces:
  `UIAtomicWidget`, `UIWidget`

public interface UIColorPicker extends UIAtomicWidget
This interface represents a color picker which is composed of a preview box, an input and a button. The input allows to type a color based on its hexadecimal code (e.g. #FFFFFF for white). The button, when clicked opens a floating panel to directly choose the color by picking it. The preview shows the result of both previous actions.

### JavaScript type

The JavaScript type for this widget is `String` with the hexadecimal HTML color format, that is a `#` followed by 6 hexadecimal digits from `0` to `F`. If the input is empty, the value will be an empty `String`, that is, `""`.

If an `afterValueChanged action` has been set on this widget, the JavaScript type of the value will be the same.

Since:
  5.7.1
See Also:
  - `UIFormWriter.newColorPicker(com.orchestranetworks.schema.Path)`
  - `UIResponseContext.newColorPicker(com.orchestranetworks.schema.Path)`

- ## Method Summary

  Modifier and Type
  Method
  Description
  `JsFunctionCall`
  `getActionWhileValueChange()`
  `String`
  `getPanelContext()`
  `void`
  `setActionWhileValueChange(JsFunctionCall aFunctionToBeCalled)`
  Sets an action on the client-side that is triggered when the value is edited in the input text (on each keyboard press), or while the user changes the cursor position in the color picker panel.
  `void`
  `setPanelContext(String htmlElementId)`
  Sets an HTML element in the page that will be the context of display of the color picker panel.

  ### Methods inherited from interface com.orchestranetworks.ui.form.widget.UIAtomicWidget

  `getActionOnAfterValueChanged, isAjaxPrevalidationEnabled, isAjaxValueSynchEnabled, setActionOnAfterValueChanged, setAjaxPrevalidationEnabled, setAjaxValueSynchEnabled`

  ### Methods inherited from interface com.orchestranetworks.ui.form.widget.UIWidget

  `isEditorDisabled, setEditorDisabled`

- ## Method Details

  - ### getActionWhileValueChange

    JsFunctionCall getActionWhileValueChange()
    See Also:
      - `setActionWhileValueChange(JsFunctionCall)`

  - ### setActionWhileValueChange

    void setActionWhileValueChange(JsFunctionCall aFunctionToBeCalled)
    Sets an action on the client-side that is triggered when the value is edited in the input text (on each keyboard press), or while the user changes the cursor position in the color picker panel.

    It is very useful to update the color of a third-party preview, event if the color is not the final chosen color (in addition to the `UIAtomicWidget.setActionOnAfterValueChanged(JsFunctionCall)`).

    When the action is triggered, the JavaScript function is called as follows:

    > `<myFunction>(<val> [, <myArg>]);`

    , where `<myFunction>` is the name of `aFunctionToBeCalled` and `<val>` is the value of the field; the type of the value is `String` with the hexadecimal HTML color format, that is a `#` followed by 6 hexadecimal digits from `0` to `F`. The second argument `<myArg>` is optional and is passed as a parameter, only if specified by `aFunctionToBeCalled`.

    Parameters:
      `aFunctionToBeCalled` - the JavaScript function to be called while the user changes the cursor position in the color picker.
    See Also:
      - `UIAtomicWidget.setActionOnAfterValueChanged(JsFunctionCall)`

  - ### getPanelContext

    String getPanelContext()
    Returns:
      the HTML id of the element to set as the context of the color picker panel or `null` if no context has been set.
    See Also:
      - `setPanelContext(String)`

  - ### setPanelContext

    void setPanelContext(String htmlElementId)
    Sets an HTML element in the page that will be the context of display of the color picker panel.

    The color picker panel will be aligned with the context so that the top left corner of the color picker panel will stick to the bottom left corner of the context element.

    If no context element is set, the color picker panel will be stuck to the widget itself.

    Parameters:
      `htmlElementId` - the HTML id of the element to set as the context of the color picker panel