HTML5-Friendly Markup

JSF Facelets HTML5 Friendly Markup example for beginners and professionals with examples on life cycle, managed beans, ui components, ui tags, validation, bean validation, datatable, converters, facelets etc.

HTML5-Friendly Markup

HTML5-Friendly Markup

JavaServer Faces supports HTML5 for allowing you to use HTML5 markup directly in your web page. It also allows you to use JavaServer Faces attributes within HTML5 elements. JavaServer Faces supports for HTML5 falls into two categories:

  • Pass-through elements
  • Pass-through attributes

The HTML5-friendly markup feature offers the complete control of Facelets page over the rendered page output rather than having to pass this control to the component. You can mix and match JavaServer Faces and HTML5 components and elements.


Using Pass-Through Elements

It allows you to use HTML5 tags and attributes in your application. JSF treats it as equivalent to JavaServer Faces components associated with a server-side UIComponent instance.

You must specify namespace http://xmlns.jcp.org/jsfTo make an element that is not a JavaServer Faces element a pass-through element. In the following example, code declares the namespace with the short name jsf:

// index.xhtml

Here, we are using HTML5 email type in JSF form and it is working friendly. The jsf prefix is placed on the id attribute so that the HTML5 input tag's attributes are treated as part of the Facelets page.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"  
  3. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  4. xmlns:jsf="http://xmlns.jcp.org/jsf"  
  5. >  
  6. <h:head>  
  7. <title>HTML5-Friendly-markup</title>  
  8. </h:head>  
  9. <h:body>  
  10. <h:form>  
  11. <h:outputLabel for="username" value="User Name "/>  
  12. <h:inputText value="#{user.name}"/><br/>  
  13. <h:outputLabel for="email" value="Email ID "/>  
  14. <input type="email" jsf:id="email" name="email" value="#{user.email}"/><br/><br/>  
  15. <h:commandButton action="response.xhtml" value="submit"/>  
  16. </h:form>  
  17. </h:body>  
  18. </html> 

// User.java

  1. import javax.faces.bean.ManagedBean;  
  2. import javax.faces.bean.RequestScoped;  
  3. @ManagedBean  
  4. @RequestScoped  
  5. public class User {  
  6. String name;  
  7. String email;  
  8. public String getName() {  
  9. return name;  
  10. }  
  11. public void setName(String name) {  
  12. this.name = name;  
  13. }  
  14. public String getEmail() {  
  15. return email;  
  16. }  
  17. public void setEmail(String email) {  
  18. this.email = email;  
  19. }  
  20. }  

// response.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"  
  3. xmlns:h="http://xmlns.jcp.org/jsf/html">  
  4. <h:head>  
  5. <title>Response Page</title>  
  6. </h:head>  
  7. <h:body>  
  8. <h1>  
  9. <h:outputText value="Hello #{user.name}"/>  
  10. </h1>  
  11. <h4><h:outputText value="Your email is: #{user.email}" /></h4>  
  12. </h:body>  
  13. </html> 

The following table shows how pass-through elements are rendered as Facelets tags.

HTML5 Element Name Identifying Attribute Facelets Tag
a jsf:action h:commandLink
a jsf:actionListener jsf:actionListener
a jsf:value h:outputLink
a jsf:outcome h:link
body   h:body
button   h:commandButton
button jsf:outcome h:button
form   h:form
head   h:head
img   h:graphicImage
input type="button" h:commandButton
input type="checkbox" h:selectBooleanCheckbox
input type="color" h:inputText
input type="date" h:inputText
input type="datetime" h:inputText
input type="datetime-local" h:inputText
input type="email" h:inputText
input type="month" h:inputText
input type="number" h:inputText
input type="range" h:inputText
input type="search" h:inputText
input type="time" h:inputText
input type="url" h:inputText
input type="week" h:inputText
input type="file" h:inputFile
input type="hidden" h:inputHidden
input type="password" h:inputSecret
input type="reset" h:commandButton
input type="submit" h:commandButton
input type="*" h:inputText
label   h:outputLabel
link   h:outputStylesheet
script   h:outputScript
select multiple="*" h:selectManyListbox
select   h:selectOneListbox
textarea   h:inputTextArea

Using Pass-Through Attributes

Pass-through attributes allow you to pass attributes that are not JavaServer Faces attributes to the browser. If you specify a pass-through attribute in a JavaServer Faces UIComponent, the attribute name and value are passed straight through to the browser without being interpreted by JavaServer Faces components or renderers.

You must use the JavaServer Faces namespace for pass-through attributes to prefix the attribute names within a JavaServer Faces component. In the following example, we are passing attributes through to the HTML5 input component.

Pass-Through Attributes Example

// index.xhtml

  1. <?xml version='1.0' encoding='UTF-8' ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  5. xmlns:f="http://xmlns.jcp.org/jsf/core">  
  6. <h:head>  
  7. <title>Pass-Through Attributes</title>  
  8. </h:head>  
  9. <h:body>  
  10. <h:form>  
  11. <h:outputLabel for="username" value="User Name "/>  
  12. <h:inputText value="#{user.name}">  
  13. <f:passThroughAttribute name="type" value="text" />  
  14. </h:inputText><br/>  
  15. <h:outputLabel for="email" value="Email ID "/>  
  16. <h:inputText value="#{user.email}">  
  17. <f:passThroughAttribute name="type" value="email" />  
  18. </h:inputText><br/><br/>  
  19. <h:commandButton action="response.xhtml" value="submit"/>  
  20. </h:form>  
  21. </h:body>  
  22. </html>  

// User.java

  1. import javax.faces.bean.ManagedBean;  
  2. import javax.faces.bean.RequestScoped;  
  3. @ManagedBean  
  4. @RequestScoped  
  5. public class User {  
  6. String name;  
  7. String email;  
  8. public String getName() {  
  9. return name;  
  10. }  
  11. public void setName(String name) {  
  12. this.name = name;  
  13. }  
  14. public String getEmail() {  
  15. return email;  
  16. }  
  17. public void setEmail(String email) {  
  18. this.email = email;  
  19. }  
  20. }  

// response.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"  
  3. xmlns:h="http://xmlns.jcp.org/jsf/html">  
  4. <h:head>  
  5. <title>Response Page</title>  
  6. </h:head>  
  7. <h:body>  
  8. <h1>  
  9. <h:outputText value="Hello #{user.name}"/>  
  10. </h1>  
  11. <h4><h:outputText value="Your email is: #{user.email}" /></h4>  
  12. </h:body>  
  13. </html>