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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
>
<h:head>
<title>HTML5-Friendly-markup</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="username" value="User Name "/>
<h:inputText value="#{user.name}"/><br/>
<h:outputLabel for="email" value="Email ID "/>
<input type="email" jsf:id="email" name="email" value="#{user.email}"/><br/><br/>
<h:commandButton action="response.xhtml" value="submit"/>
</h:form>
</h:body>
</html>

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}

// response.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1>
<h:outputText value="Hello #{user.name}"/>
</h1>
<h4><h:outputText value="Your email is: #{user.email}" /></h4>
</h:body>
</html>

Output:

// index page

// response page

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 attributes through to the HTML5 input component.

Pass-Through Attributes Example

// index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Pass-Through Attributes</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="username" value="User Name "/>
<h:inputText value="#{user.name}">
<f:passThroughAttribute name="type" value="text" />
</h:inputText><br/>
<h:outputLabel for="email" value="Email ID "/>
<h:inputText value="#{user.email}">
<f:passThroughAttribute name="type" value="email" />
</h:inputText><br/><br/>
<h:commandButton action="response.xhtml" value="submit"/>
</h:form>
</h:body>
</html>

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}

// response.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1>
<h:outputText value="Hello #{user.name}"/>
</h1>
<h4><h:outputText value="Your email is: #{user.email}" /></h4>
</h:body>
</html>

Output:

Index page