Through the use of pass-through elements, we can develop our pages using HTML5 and also treat them as JSF components. To do this, we need to specify at least one element attributes using http://xmlns.jcp.org/jsf namespace. The following example demonstrates this approach in action:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<head jsf:id="head">
<title>JSF Page with HTML5 Markup</title>
<link jsf:library="css" jsf:name="styles.css" rel="stylesheet"
type="text/css" href="resources/css/styles.css"/>
</head>
<body jsf:id="body">
<form jsf:prependId="false">
<table style="border-spacing: 0; border-collapse:
collapse">
<tr>
<td class="rightAlign">
<label jsf:for="firstName">First
Name</label>
</td>
<td class="leftAlign">
<input type="text" jsf:id="firstName"
jsf:value="#{customer.firstName}"/>
</td>
</tr>
<tr>
<td class="rightAlign">
<label jsf:for="lastName">
Last Name</label>
</td>
<td class="leftAlign">
<input type="text" jsf:id="lastName"
jsf:value="#{customer.lastName}"/>
</td>
</tr>
<tr>
<td class="rightAlign">
<label jsf:for="email">Email
Address</label>
</td>
<td class="leftAlign">
<input type="email" jsf:id="email"
jsf:value="#{customer.email}"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit"
jsf:action="confirmation"
value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
The first thing we should notice about the preceding example is the XML namespace prefixed by jsf near the top of the page. This namespace allows us to add JSF-specific attributes to HTML5 pages. When the JSF runtime encounters attributes prefixed by jsf in any of the tags on the page, it automatically converts the HTML5 tag to the equivalent JSF component. JSF-specific attributes are the same as in regular JSF pages, except they are prefixed with jsf therefore, at this point, they should be self-explanatory and will not be discussed in detail.
The preceding example will render and behave just like the first example in this chapter.
The technique described in this section is useful if we have experienced HTML web designers in our team who prefer to have full control over the look of the page. The pages are developed using standard HTML5 with JSF-specific attributes so that the JSF runtime can manage user input.
If our team consists primarily of Java developers with limited CSS/HTML knowledge, then it is preferable to develop the web pages for our web application using JSF components. HTML5 introduced several new attributes that didn't exist in previous versions of HTML. For this reason, JSF 2.2 introduced the ability to add arbitrary attributes to JSF components; this JSF/HTML5 integration technique is discussed in the next section.