HTML5 Zone is brought to you in partnership with:

I started my software adventure with GWBasic programming language. I met with Visual Basic language after QuicBasic and I developed many applications with it until 2000. I stepped into the world of web with PHP. After that, my path crossed with Java! I have been developing enterprise applications with Java EE Technologies since 2005. JavaServer Faces and Spring frameworks are in my area of expertise. I’m trying to specialize in NoSQL Technologies. Hüseyin has posted 13 posts at DZone. You can read more from them at their website. View Full User Profile

JSF 2.2: HTML 5 Support

08.20.2013
| 8212 views |
  • submit to reddit
HTML 5 is the fifth version of the HTML markup Standard. HTML5 arose as a result of ideas and needs such as developing new generation web applications, providing standardization between browsers and using a single codebase. Back end and UI developers can benefit from a single codebase with HTML5. 

JavaServer Faces version 2.2 offers an easy way for including new attributes of HTML 5 to JSF components and provides HTML(5) friendly markup.

HTML5-App

Pass-through attributes

In order to ensure the higher level of flexibility, the logic of client-specific rendering must be avoided in JavaServer Faces component classes. Elements specific to the client or markup are defined in renderer classes. Renderer classes are responsible from encapsulation of the content that is client device-specific and then rendering to the client. For this reason, JSF does not support the new attributes of HTML5 automatically. In order to include HTML5 attributes to JSF components before JSF 2.2, writing custom render kits was an obligation. 

JSF 2.2 introduced pass-through attributions to solve this problem. These attributes are going to be processed in the run time and at the client-side. They enable to use a differing collection as well as using the current attribute collection of component. 

JSF 2.2 offers 4 ways to set in pass-through attributes:

  • By a name-spaced attribute on component tag
  • By f:passThroughAttribute TagHandler (a single attribute)
  • By f:passThroughAttributes TagHandler (more than one attribute)
  • By Programmatic way

Namespace 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    
    <head>
        <title>JSF 2.2 HTML5 Support</title>
   </head>
    <body>
        <h:form>
            <h:inputText value="#{myBean.value}" p:placeholder="Enter text" p:autofocus="true"/>
        </h:form>
    </body>
</html>

TagHandler 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    
    <head>
        <title>JSF 2.2 HTML5 Support</title>
   </head>
    
    <body>
        <h:form>
            <h:inputText value="#{myBean.value}">
               <f:passThroughAttribute name="placeholder" value="Enter text" />
            </h:inputText>
        </h:form>
    </body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    
    <head>
        <title>JSF 2.2 HTML5 Support</title>
   </head>
    
    <body>
        <h:form>
         <h:inputText value="#{myBean.value}">
            <f:passThroughAttributes value="#{myBean.html5Attributes}" />
         </h:inputText>
        </h:form>
    </body>
</html>

private Map<String, String> html5Attributes = new HashMap<String, String>();

public MyBean(){
   html5Attributes.put("autofocus", "true");
   html5Attributes.put("placeholder", "Enter text");   
}

Programmatic

HtmlInputText myInputText = new HtmlInputText();
Map passThrough = myInputText.getPassThroughAttributes();
passThrough.put("placeholder", "Enter text");

Write pure HTML

HTML support that comes with JSF 2.2 is not limited with including HTML5 attributes to JSF components easily. Similar to pass-through attribute, the new version offers a possibility to use pure HTML components as JSF components (binding components to managed beans, associate a convertor with component etc.) through a name-spaced attribute on component tag, and then to provide an interaction with server.  

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    
    <head>
        <title>HTML(5) Friendly Markup in JSF 2.2</title>
   </head>
   <body>
       <form jsf:id="myForm" jsf:prependId="false">
           <h:messages/>
           <table border="0">
               <tr>
                   <td><label jsf:for="email">E-Mail</label></td>
                   <td>
                       <input jsf:id="email" type="text" jsf:value="#{myBean.email}" jsf:validator="myValidator" jsf:size="30" />
                   </td>
               </tr>
           </table>        
           <input type="submit" value="Submit"/>
       </form>
   </body>
</html>

Conclusion

With version 2.2, JavaServer Faces introduced an universal approach about including of HTML(5) attributes to JSF components and responded to one of the main criticisms toward itself by providing HTML(5) friendly markup.

Real content above, can be accessed at JSF 2.2: HTML 5 Support 
Published at DZone with permission of its author, Hüseyin Akdoğan.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: