PrimeFaces Extensions Showcase

Legend

Legend makes it easy to add a key to your UI.

Vertical	Vertical Title 0 - 20% 40% 60% 80% 100% Source: PrimeFaces

Horizontal	Horizontal Title Facet 0 - 20% 40% 60% 80% 100% Source: PrimeFaces Rocks!

Source

XHTML page
Managed bean


<p:panelGrid id="pnlLegend" columns="2" styleClass="ui-noborder" layout="tabular">
    
        <p:outputLabel value="Vertical" />
        <pe:legend layout="vertical" widgetVar="lgndVertical" values="#{legendController.values}" title="Vertical Title" footer="Source: PrimeFaces"/>
        
        <p:spacer/>
        <p:spacer/>
        
        <p:outputLabel value="Horizontal" />
        <pe:legend layout="horizontal" widgetVar="lgndHorizontal" values="#{legendController.values}">
            <f:facet name="title">
                    Horizontal Title Facet
            </f:facet>
            <f:facet name="footer">
                    Source: <a href="http://www.primefaces.org">PrimeFaces Rocks!</a>
            </f:facet>
        </pe:legend>
        
    </p:panelGrid>


@Named
@ViewScoped
public class LegendController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    private LinkedHashMap<String, String> values;

    @PostConstruct
    public void init() {
        values = new LinkedHashMap<String, String>();
        values.put("0 - 20%", "#F1EEF6");
        values.put("40%", "#BDC9E1");
        values.put("60%", "#74A9CF");
        values.put("80%", "#2B8CBE");
        values.put("100%", "#045A8D");
    }

    public LinkedHashMap<String, String> getValues() {
        return values;
    }

    public void setValues(final LinkedHashMap<String, String> values) {
        this.values = values;
    }

}