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:
  • Method Details

    • getActionWhileValueChange

      JsFunctionCall getActionWhileValueChange()
      See Also:
    • 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:
    • 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

      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