JSF 2.2: HTML5 Support

#JSF 2.2: HTML5 Support#

No doubt HTML 5 is the hottest topic in web application development.

JSF 2.0 is not ready for HTML 5 support. When you are using JSF 2.0/Java EE 6, you can use omnifaces to add HTML5 support.

omnifaces included a Html5RenderKitFactory to render HTML 5 elements.

<pre> &lt;factory> &lt;render-kit-factory>org.omnifaces.renderkit.Html5RenderKitFactory&lt;/render-kit-factory> &lt;/factory> </pre>

In Java EE 7, HTML 5 is the first class citizen. But refactoring all components in JSF is not a smart decision. JSF 2.2 provided a compromise solution to support HTML 5.

In HTML5, form input elements are improved, the type attribute can be text, email, number, range, url, date etc. Ideally, browser should provide client validation for these input elements.

An example for JSF 2.2 and HTML 5 support.

<pre> &lt;h:form> &lt;h:messages showDetail="false" showSummary="true"/> Text: &lt;h:inputText id="text" value="#{html5Bean.text}" required="true"> &lt;f:passThroughAttribute name="placeholder" value="Type text here..."/> &lt;f:passThroughAttribute name="required" value="true"/> &lt;/h:inputText> &lt;br/> Url: &lt;h:inputText id="url" value="#{html5Bean.url}"> &lt;f:passThroughAttribute name="type" value="url"/> &lt;/h:inputText>&lt;br/> Email: &lt;h:inputText id="email" p:type="email" value="#{html5Bean.email}" />&lt;br/> Number: &lt;h:inputText id="number" p:type="number" p:min="1" p:max="10" value="#{html5Bean.number}" > &lt;f:convertNumber minFractionDigits="0"/> &lt;/h:inputText> &lt;br/> Range: &lt;h:inputText id="range" value="#{html5Bean.range}"> &lt;!-- f:passThroughAttributes value="#{html5Bean.attrs}"/ --> &lt;f:passThroughAttributes value="#{{'type':'range', 'min':'0', 'max':'10', 'step':'2'}}"/> &lt;f:convertNumber minFractionDigits="0"/> &lt;/h:inputText>&lt;br/> Date: &lt;h:inputText id="date" p:type="date" value="#{html5Bean.date}" > &lt;f:convertDateTime pattern="yyyy-MM-dd"/> &lt;/h:inputText>&lt;br/> &lt;h:commandButton value="Save" action="#{html5Bean.submit()}"> &lt;f:ajax execute="@form" render="@all"/> &lt;/h:commandButton> &lt;/h:form> &lt;h:panelGroup id="out"> Text: &lt;h:outputText value="#{html5Bean.text}"/>&lt;br/> Url: &lt;h:outputText value="#{html5Bean.url}"/>&lt;br/> Email: &lt;h:outputText value="#{html5Bean.email}"/>&lt;br/> Number: &lt;h:outputText value="#{html5Bean.number}"/>&lt;br/> Range: &lt;h:outputText value="#{html5Bean.range}"/>&lt;br/> Date: &lt;h:outputText value="#{html5Bean.date}"/>&lt;br/> &lt;/h:panelGroup> </pre>

JSF 2.2 provides a new facelets taglib named passthrough to process the new attributes added in HTML 5.

<pre> xmlns:p="http://xmlns.jcp.org/jsf/passthrough" </pre>

For example, you want to add placeholder to input element, just added a p:placeholder attribute.

<pre> &lt;h:inputText p:placeholder="Type text here..."/> </pre>

This tell JSF HTMLRenderKit keep back the attribute placeholder directly, not like JSF 2.0, any none support attributes will be ate by HTML RenderKit.

The core taglib also added a new tag to support passthrough feature.

<pre> &lt;f:passThroughAttribute name="placeholder" value="Type text here..."/> </pre>

This is equivalent to the above version.

You can add more than one attributes at the same time.

<pre> &lt;h:inputText id="number" p:type="number" p:min="1" p:max="10" value="..."/> </pre>

Or use multi f:passThroughAttribute nested in the inputText component.

<pre> &lt;h:inputText id="text" value="#{html5Bean.text}" required="true"> &lt;f:passThroughAttribute name="placeholder" value="Type text here..."/> &lt;f:passThroughAttribute name="required" value="true"/> &lt;/h:inputText> </pre>

Or use a f:passThroughAttributes nested in the inputText component, it can accept a Map.

<pre> &lt;f:passThroughAttributes value="#{html5Bean.attrs}"/> </pre>

In backend bean, a Map is declared.

<pre> private Map&lt;String, String> attrs = new HashMap&lt;String, String>(); @PostConstruct public void init() { log.info(" call [email protected]"); this.attrs.put("type", "range"); this.attrs.put("min", "1"); this.attrs.put("max", "10"); this.attrs.put("step", "2"); } </pre>

You can also use a EL 3.0 Map expression as value. EL 3.0 is extracted from JSF specifcation as a standalone specification now, we will discuss it in further post.

<pre> &lt;f:passThroughAttributes value="#{{'type':'range', 'min':'0', 'max':'10', 'step':'2'}}"/> </pre>

Through the passthrough feature in JSF 2.2, you can add any custom attribute to input element, such as the data-XXX attribute in Bootstrap framework.

Currently only Opera supports all elements in this post.

The following is the result of HTML 5 required attribute valuation.

This is the the whole form displayed in Opera.

In Firefox, the range, number, date are not rendered, plain input text instead.

HTML 5 is beautiful, but the browser support is not good as expected.

Check out the complete codes from my github.com, and play it yourself.

https://github.com/hantsy/ee7-sandbox