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}" />
Listing 5-6. ViewScoped Managed Bean Exposing a Map of Product Attributes that Can Be Consumed by
<f:PassThroughAttributes />
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 . 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=" "
xmlns:h=" "
xmlns:p=" " >
<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" />
Search WWH ::

Custom Search