Java Reference
In-Depth Information
HTML5-Friendly Markup
The JSF 2.2 release includes the ability to utilize HTML5 markup within JSF views. As a matter of fact, the markup
is not limited to HTML5; it can also include HTML4, and so on. The addition of a new tag URI makes this possible
because it allows existing HTML tags to be bound to the JSF life cycle via new namespace attributes. It is now possible
to develop entire JSF views without using any JSF tags at all.
To utilize the new namespace attributes, your JSF view must import the new taglib URI
jsf="
http://xmlns.jcp.org/jsf
"
. The new taglib can then be referenced as attributes within existing HTML tags,
setting the underlying JSF attributes that are referenced. For instance, to utilize an HTML input tag with JSF, you
would add the
jsf:id
attribute and set it equal to the JSF ID that you want to assign to that component. You would
then set an attribute of
jsf:value
equal to the managed bean value. The following source code demonstrates a
complete implementation of HTML5 code in a JSF view.
■
there is no need to import the
http://xmlns.jcp.org/jsf/html
taglib because you are no longer utilizing
JSF component tags in the view.
<?xml version="1.0" encoding="UTF-8"?>
Note
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:f="
http://xmlns.jcp.org/jsf/core
"
xmlns:jsf="
http://xmlns.jcp.org/jsf
"
>
<head jsf:id="head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body jsf:id="body">
<form jsf:id="form" jsf:prependId="false">
<input type="email" jsf:id="value1" jsf:value="#{ajaxBean.value1}">
<f:ajax execute="@this" render="status"/>
</input>
<br/><br/>
<input type="text" jsf:id="value2" jsf:value="#{ajaxBean.value2}">
<f:ajax execute="@this" render="status"/>
</input>
<br/>
<br/>
<label for="status">Message: </label>
<output jsf:id="status">#{ajaxBean.status}</output>
</form>
</body>
</html>
The new syntax provides several benefits for web developers. Although not all web developers are familiar with
JSF component tags, HTML tags are well known. Utilizing the new syntax, both JSF and HTML developers alike can
create web views that utilize the power of JSF along with the flexibility of HTML. The new syntax also makes it easier
to bind HTML tags with JavaScript, if needed. You no longer need to worry about JSF view IDs getting in the way when
working with HTML and JavaScript. With the addition of the new JSF taglib namespace for use with HTML tags, both
JSF and HTML alike have been improved.
