Native JSF color input widget

Question

According to Mozilla's Developer Network, there is an HTML input element with type="color" since HTML 4.01. It can be used in a form like this:

<form>
  <input type="color"/>
</form>

I tested this with recent browsers (Firefox 52, Chromium 65 and Opera 49) and all were working well with plain HTML. They provide a button and on click a popup-window is opened to select a color.

Now the question: how can I use this color input with JSF without a third-party library?

I couldn't find any suitable component for neither JSF 2.2 nor 2.3. I know there is PrimeFaces <p:colorPicker> and there are probably other third-party components as well. But I need/want plain JSF/Mojarra.

Do you need this on mobile devices too? On at least FF mobile the selection you can make is limited... Chrome mobile has more options — Kukeltje, Apr 16 '18 at 13:24

Martin Höller · Accepted Answer · 2018-04-17T06:40:41.967

I found this answer, which describes the use of passthrough attributes. With this, it is actually quite simple to create a basic composite-component which does exactly what I need:

<ui:component xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
              xmlns:h="http://xmlns.jcp.org/jsf/html"
              xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
              xmlns:cc="http://xmlns.jcp.org/jsf/composite">
  <cc:interface>
    <cc:attribute name="value" type="java.lang.String" required="true" />
    <cc:clientBehavior name="clientEvent" targets="colorInput" event="change" />
  </cc:interface>

  <cc:implementation>
    <h:inputText id="colorInput" a:type="color" value="#{cc.attrs.value}" />
  </cc:implementation>
</ui:component>

(See also BalusC's answer on details about <cc:clientBehavior>.)

Native JSF color input widget

1 Answers1