HTML and CSS Reference
In-Depth Information
Listing 5-3.
Facelets View Using the img2 Composite Component (img2example.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/
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:h="
http://java.sun.com/jsf/html
"
xmlns:jsf22="
http://java.sun.com/jsf/composite/jsf22
"
>
<h:head>
<title>Example of using img2</title>
</h:head>
<h:body>
<jsf22:img2 src="product/1234.png"
title="Click to see more information"
popupTitle="The product is available for shipping within 24 hours" />
</h:body>
</html>
In the following sections, you will see how JSF 2.2 has made it easier to output HTML5-friendly markup by
introducing the ability to pass through HTML elements and attributes.
Passing Through Attributes
Custom attributes can be outputted in three different ways. The outputs of all three methods are the same, but each
method has its own level of greatest convenience as demonstrated in the following.
Method 1: Adding custom attributes one at a time using
<f:passThroughAttribute />
JSF 2.2 introduces a new tag similar to
<f:param />
called
<f:passThroughAttribute />
. The tag can be nested
inside any UIComponent and has two attributes:
name
and
value
. Name contains the name of the custom attribute
you want to add to the parent UIComponent, and value contains the value that should be stored in the custom
attribute with the given name. An example can be seen in Listing 5-4.
Listing 5-4.
Adding Two Custom Attributes to a UIComponent Using <f:PassThroughAttribute />
<h:graphicImage value="product/1234.png"
title="Click to see more information">
<f:passThroughAttribute name="data-popup-title"
value="The product is available for shipping within 24 hours" />
<f:passThroughAttribute name="data-product-id"
value="1234" />
</h:graphicImage>
Method 2: Adding custom attributes contained in a map using
<f:passThroughAttributes />
Method 1 is good for adding a few attributes, but if you have many attributes that you must add to a component and the
values are determined on the server side, you can use
<f:passThroughAttributes />
and provide a map of attributes
using the value attribute. Listing 5-5 and 5-6 show how to reference a map of attributes from a managed bean.
