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.

 
    
 
  
 
  
    org.omnifaces.renderkit.Html5RenderKitFactory 
  


 

 

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.

 
    
 
  
 
  
    Text: 
 
  
 
   
    
    
  
    
 
  
 
  

    Url: 
 
  
 
   
    
  
 
  
 
  

    Email: 
 
  
 
  
 
  
 
  

    Number: 
 
  
 
   
    
   
 
  
 
  

    Range: 
 
  
 
   
    
    
    
  
 
  
 
  

    Date: 
 
  
 
   
    
  
 
  
 
  

    
 
  
 
   
    
  


 

 



 

 
  
 
  
 
    Text:  
 
  
 
  
 
  
 
  

    Url:  
 
  
 
  
 
  
 
  

    Email:  
 
  
 
  
 
  
 
  

    Number:  
 
  
 
  
 
  
 
  

    Range:  
 
  
 
  
 
  
 
  

    Date:  
 
  
 
  
 
  
 
  



 

 

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

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

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

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.

This is equivalent to the above version.

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

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

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

In backend bean, a Map is declared.

private Map

 

 
  
 
  
  attrs = new HashMap
 
  
 
  
    (); @PostConstruct public void init() { log.info(" call init@"); this.attrs.put("type", "range"); this.attrs.put("min", "1"); this.attrs.put("max", "10"); this.attrs.put("step", "2"); } 
  

 

 

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.

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