HTML and CSS Reference
In-Depth Information
HTML5-Friendly Markup
HTML5 has to be one of the hottest topics at the moment. The trend did not pass by the JSF Reference Group, who
prioritized the implementation of features supporting HTML5-friendly markup in JSF 2.2.
Truth be told, the implemented HTML5 support features can also be used in a different context than HTML5. For
many years, web designers have used JavaScript frameworks to store application-specific data in custom attributes.
For example, a web designer may have chosen to include additional information about an image that is extracted and
displayed when the image is clicked (see Listing 5-1).
Listing 5-1.
Custom Attribute Containing Data that Could Be Extracted by JavaScript Frameworks
<img src="product/1234.png"
title="Click to see more information"
data-popup-title="The product is available for shipping within 24 hours"
/>
Until HTML5, custom attributes were nonstandard, and the output was often unpredictable as browsers interpreted
them differently. The HTML5 standard introduced a set of new global attributes and elements ensuring browser
uniformity in interpreting custom attributes. The majority of the new attributes and elements do not have a JSF
equivalent, as the values they carry are not relevant on the server side. JSF 2.2 introduces support for HTML5 markup
by providing the ability to
Pass Through
attributes and elements from Facelet views to the rendered HTML code.
■
pass through of attributes and elements is supported only in views written in Facelets and is not available to
views written in JSp.
Note
Prior to JSF 2.2, the only way to create custom attributes and elements was to wrap the output in a composite
component where the custom attributes and elements were introduced in plain HTML. Listings 5-2 and 5-3 show
composite component wrapping custom HTML attributes. The problem with this workaround is that it introduces
excessive code, and the outputted code is not stored in the JSF component tree as a component.
Listing 5-2.
Composite Component Wrapping Custom Attributes (resources/jsf22/img2.xhtml)
<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:cc="
http://java.sun.com/jsf/composite
"
>
<cc:interface>
<cc:attribute name="src" type="java.lang.String" required="true" />
<cc:attribute name="title" type="java.lang.String" default="" />
<cc:attribute name="popupTitle" type="java.lang.String" default="" />
</cc:interface>
<cc:implementation>
<img src="#{cc.attrs.src}"
title="#{cc.attrs.title}"s
data-popup-title="#{cc.attrs.popupTitle}" />
</cc:implementation>
</html>
