JSF 2.2: HTML 5 Support

Hüseyin Akdoğan

CORE ·

Aug. 21, 13 · Interview

Like (1)

Save

20.66K Views

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.

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

HTML Attribute (computing) JavaServer Faces

Opinions expressed by DZone contributors are their own.

Comments

Trending

Trending

JSF 2.2: HTML 5 Support

Trending

Partner Resources