HTML and CSS Reference
In-Depth Information
Listing 5-5.
Adding a Map of Attributes to a UIComponent Using <f:PassThroughAttributes />
<h:graphicImage value="product/1234.png"
title="Click to see more information">
<f:passThroughAttributes value="#{productDisplay.productAttributes}" />
</h:graphicImage>
Listing 5-6.
ViewScoped Managed Bean Exposing a Map of Product Attributes that Can Be Consumed by
<f:PassThroughAttributes />
@ManagedBean
@ViewScoped
public class ProductDisplay {
private Map<String, Object> attributes;
public Map<String, Object> getProductAttributes() {
if (this.attributes == null) {
this.attributes = new HashMap<>();
this.attributes.put("data-popup-title", "Click to see more information");
this.attributes.put("data-product-id", "1234");
this.attributes.put("data-product-name", "Blu-ray Player");
this.attributes.put("data-product-desc", "Complimment your entertainment...");
}
return this.attributes;
}
}
Method 3: Adding custom attributes to UIComponents directly using
prefixed attributes
As an alternative to method 1, you can add the custom attributes directly to a UIComponent using a prefixed attribute.
The prefix of the attribute is
p
, and the XML namespace URI is
http://xmlns.jcp.org/jsf/passthrough
.
This
method may seem more natural to some, as you are adding the attributes directly on the UIComponent without
including any nested tags, see Listing 5-7.
Listing 5-7.
Adding Custom Attributes Using Prefixed Attributes
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:h="
http://xmlns.jcp.org/jsf/html
"
xmlns:p="
http://xmlns.jcp.org/jsf/passthrough
"
>
<h:body>
<h:graphicImage value="product/1234.png"
title="Click to see more information"
p:data-popup-title="Available for shipping within 24 hours"
p:data-product-id="1234"
/>
</h:body>
</html>
