• cdi
  • components
  • contexts
  • converters
  • eventlisteners
  • exceptionhandlers
  • facesviews
  • filters
  • functions
  • managedbeans
  • push
  • renderkits
  • resourcehandlers
  • scripts
  • servlets
  • taghandlers
  • utils
  • validators
  • viewhandlers
- Html5RenderKit

Deprecated.

This HTML5 render kit adds support for HTML5 specific attributes which are unsupported by the JSF UIForm, UIInput and UICommand components. So far in JSF 2.0 and 2.1 only the autocomplete attribute is supported in UIInput components. All other attributes are by design ignored by the JSF standard HTML render kit. This HTML5 render kit supports the following HTML5 specific attributes:

Note: the list attribute expects a <datalist> element which needs to be coded in "plain vanilla" HTML (and is currently, July 2014, only supported in IE 10, Firefox 4, Chrome 20 and Opera 11). See also HTML5 tutorial.

Installation

To use the HTML5 render kit, register it as follows in faces-config.xml:

<factory>
    <render-kit-factory>org.omnifaces.renderkit.Html5RenderKitFactory</render-kit-factory>
</factory>

Configuration

You can also configure additional passthrough attributes via the "org.omnifaces.HTML5_RENDER_KIT_PASSTHROUGH_ATTRIBUTES" context parameter in web.xml, wherein the passthrough attributes are been specified in semicolon-separated com.example.SomeComponent=attr1,attr2,attr3 key=value pairs. The key represents the fully qualified name of a class whose Class.isInstance(Object) must return true for the particular component and the value represents the commaseparated string of names of passthrough attributes. Here's an example:

<context-param>
    <param-name>org.omnifaces.HTML5_RENDER_KIT_PASSTHROUGH_ATTRIBUTES</param-name>
    <param-value>
        javax.faces.component.UIInput=x-webkit-speech,x-webkit-grammar;
        javax.faces.component.UIComponent=contenteditable,draggable
      </param-value>
</context-param>

Mojarra f:ajax bug

Note that <f:ajax> of Mojarra 2.0.0-2.1.13 explicitly checks for <input type="text"> and ignores other types while preparing request parameters for ajax submit, resulting in null values in managed bean after an ajax submit. This has been reported as Mojarra issue 2532 and is fixed in Mojarra 2.1.14. This problem is thus completely unrelated to Html5RenderKit.

JSF 2.2 notice

Noted should be that JSF 2.2 will support defining custom attributes directly in the view via the new http://xmlns.jcp.org/jsf/passthrough namespace or the <f:passThroughAttribute> tag.

<html ... xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText ... p:autofocus="true" />
(you may want to use a instead of p as namespace prefix to avoid clash with PrimeFaces default namespace)

Or:

<h:inputText ...>
    <f:passThroughAttribute name="autofocus" value="true" />
</h:inputText>

Deprecation

As per OmniFaces 2.2 (actually technically already since OmniFaces 2.0), this HTML5 render kit is deprecated. Users are encouraged to migrate to new JSF 2.2 support for passthrough attributes as described above. The HTML5 render kit is scheduled to be removed in a future OmniFaces 3.0 (for JSF 2.3).

Demo

This HTML5 render kit is enabled in this showcase web application. The below demo shows that the HTML5 attributes on JSF components are actually been rendered instead of ignored. Note that this page should have scrolled down to the demo when you opened it, this is because of the autofocus field :)

Supported in all browsers
Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10
Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10
Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10
Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 9
Since Firefox 4, Chrome 6, Opera 10.6 and IE 10
Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10
Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10
Since Safari 4, Chrome 6, Opera 11 and IE 10
Since Safari 4, Chrome 9 and Opera 11
Since Safari 5, Chrome 6 and Opera 10.6
Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10
Since Firefox 4, Safari 5, Chrome 10, Opera 11.50 and IE 10
Since Firefox 4, Safari 4, Chrome 10, Opera 11 and IE 10
Demo source code
<p>
    This HTML5 render kit is enabled in this showcase web application. The below demo shows that the HTML5 
    attributes on JSF components are actually been rendered instead of ignored. Note that this page should have
    scrolled down to the demo when you opened it, this is because of the <code>autofocus</code> field :)
</p>
 <h:form>
    <h:panelGrid columns="3">
        <h:outputLabel for="text" value="Normal text" />
        <h:inputText id="text" value="#{html5Bean.text1}" />
        <h:outputText value="Supported in all browsers" />

        <h:outputLabel for="autofocus" value="With autofocus" />
        <h:inputText id="autofocus" value="#{html5Bean.text2}" autofocus="true" />
        <h:outputLink value="http://www.wufoo.com/html5/attributes/02-autofocus.html">Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10</h:outputLink>

        <h:outputLabel for="placeholder" value="With placeholder" />
        <h:inputText id="placeholder" value="#{html5Bean.text3}" placeholder="username" />
        <h:outputLink value="http://www.wufoo.com/html5/attributes/01-placeholder.html">Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10</h:outputLink>

        <h:outputLabel for="passwordPlaceholder" value="Password with placeholder" />
        <h:inputSecret id="passwordPlaceholder" value="#{html5Bean.secret}" placeholder="password" />
        <h:outputLink value="http://www.wufoo.com/html5/attributes/01-placeholder.html">Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10</h:outputLink>

        <h:outputLabel for="search" value="Search" />
        <h:inputText id="search" type="search" value="#{html5Bean.search}" />
        <h:outputLink value="http://www.wufoo.com/html5/types/5-search.html">Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 9</h:outputLink>

        <h:outputLabel for="email" value="Email" />
        <h:inputText id="email" type="email" value="#{html5Bean.email}" />
        <h:outputLink value="http://www.wufoo.com/html5/types/1-email.html">Since Firefox 4, Chrome 6, Opera 10.6 and IE 10</h:outputLink>

        <h:outputLabel for="url" value="URL" />
        <h:inputText id="url" type="url" value="#{html5Bean.url}" />
        <h:outputLink value="http://www.wufoo.com/html5/types/3-url.html">Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10</h:outputLink>

        <h:outputLabel for="phone" value="Phone (tel)" />
        <h:inputText id="phone" type="tel" value="#{html5Bean.phone}" />
        <h:outputLink value="http://www.wufoo.com/html5/types/2-tel.html">Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10</h:outputLink>

        <h:outputLabel for="range" value="Range (between 1 and 10)" />
        <h:inputText id="range" type="range" value="#{html5Bean.range}" min="1" max="10" />
        <h:panelGroup>
            <h:outputLink value="http://www.wufoo.com/html5/types/8-range.html" rendered="#{not facesContext.validationFailed}">Since Safari 4, Chrome 6, Opera 11 and IE 10</h:outputLink>
            <h:message for="range" />
        </h:panelGroup>

        <h:outputLabel for="number" value="Number (between 7 and 13)" />
        <h:inputText id="number" type="number" value="#{html5Bean.number}" min="7" max="13" />
        <h:panelGroup>
            <h:outputLink value="http://www.wufoo.com/html5/types/7-number.html" rendered="#{not facesContext.validationFailed}">Since Safari 4, Chrome 9 and Opera 11</h:outputLink>
            <h:message for="number" />
        </h:panelGroup>

        <h:outputLabel for="date" value="Date" />
        <h:inputText id="date" type="date" value="#{html5Bean.date}" converterMessage="Format must be yyyy-MM-dd">
            <f:convertDateTime pattern="yyyy-MM-dd" />
        </h:inputText>
        <h:panelGroup>
            <h:outputLink value="http://www.wufoo.com/html5/types/4-date.html" rendered="#{not facesContext.validationFailed}">Since Safari 5, Chrome 6 and Opera 10.6</h:outputLink>
            <h:message for="date" />
        </h:panelGroup>

        <h:outputLabel for="textarea1" value="Textarea with maxlength of 20" />
        <h:inputTextarea id="textarea1" value="#{html5Bean.text4}" maxlength="20" cols="22" />
        <h:outputLink value="http://www.wufoo.com/html5/attributes/03-maxlength.html">Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10</h:outputLink>

        <h:outputLabel for="textarea2" value="Textarea with placeholder" />
        <h:inputTextarea id="textarea2" value="#{html5Bean.text5}" placeholder="some text" cols="22" />
        <h:outputLink value="http://www.wufoo.com/html5/attributes/01-placeholder.html">Since Firefox 4, Safari 5, Chrome 10, Opera 11.50 and IE 10</h:outputLink>

        <h:outputLabel for="textarea3" value="Textarea with spellcheck" />
        <h:inputTextarea id="textarea3" value="#{html5Bean.text6}" spellcheck="true" cols="22" />
        <h:outputLink value="http://www.wufoo.com/html5/attributes/17-spellcheck.html">Since Firefox 4, Safari 4, Chrome 10, Opera 11 and IE 10</h:outputLink>

        <h:panelGroup />
        <h:commandButton value="submit" />
        <h:panelGroup>
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>
Documentation & Sources