TagCloud

TagCloud displays a collection of tags with different strengths.

tagCloud.xhtml
TagCloudView.java

<h:form>
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
    <p:tagCloud model="#{tagCloudView.model}">
        <p:ajax event="select" update="msgs" listener="#{tagCloudView.onSelect}" />
    </p:tagCloud>
</h:form>

@Named
@RequestScoped
public class TagCloudView {
    
    private TagCloudModel model;
    
    @PostConstruct
    public void init() {
        model = new DefaultTagCloudModel();
        model.addTag(new DefaultTagCloudItem("Transformers", 1));
        model.addTag(new DefaultTagCloudItem("RIA", "#", 3));
        model.addTag(new DefaultTagCloudItem("AJAX", 2));
        model.addTag(new DefaultTagCloudItem("jQuery", "#", 5));
        model.addTag(new DefaultTagCloudItem("NextGen", 4));
        model.addTag(new DefaultTagCloudItem("JSF 2.0", "#", 2));
        model.addTag(new DefaultTagCloudItem("FCB", 5));
        model.addTag(new DefaultTagCloudItem("Mobile",  3));
        model.addTag(new DefaultTagCloudItem("Themes", "#", 4));
        model.addTag(new DefaultTagCloudItem("Rocks", "#", 1));
    }

    public TagCloudModel getModel() {
        return model;
    }
    
    public void onSelect(SelectEvent<TagCloudItem> event) {
        TagCloudItem item = event.getObject();
        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Selected", item.getLabel());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

Nova-Light

Nova-Dark

Nova-Colored

Luna-Blue

Luna-Amber

Luna-Green

Luna-Pink

Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.