Home » JSF HTML5 Friendly Markup

JSF HTML5 Friendly Markup

by Online Tutorials Library

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.

// User.java

// response.xhtml

Output:

// index page

JSF Html 5 friendly makeup 1

// response page

JSF Html 5 friendly makeup 2

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

// User.java

// response.xhtml

Output:

Index page

JSF Html 5 friendly makeup 3

Response page

JSF Html 5 friendly makeup 4

You may also like