Primefaces Tab, TabMenu, TabView, TagCloud

Filed Under: JSF

Primefaces implementation provides you a huge amount of components that used for different purposes. This tutorial will spotlight into these below components:

  • Tab: Is generic container component used by other Primefaces components such as tabView and AccordionPanel.
  • TabMenu: Is a navigation component that displays menuitems as tabs.
  • TabView: Is a container component to group content in a tabs.
  • TagCloud: Displays a collection of tag with different strengths.

Let’s get started depicts these components and see their featured aspects.

Tab Basic Info

As we’ve mentioned earlier, Tab isn’t a separate component that can be used individually. It’s used dependently with AccordionPanel and TabView.

Tag Tab
Component Class org.primefaces.component.TabView.Tab
Component Type org.primefaces.component.Tab
Component Family org.primefaces.component

Tab Attributes

Name Default Type Description
id null String Unique identifier of the component.
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean.
title null Boolean Title text of the tab
titleStyle null String Inline style of the tab.
titleStyleClass null String Style class of the tab.
disabled false Boolean Disables tab element.
closable false Boolean Makes the tab closable when enabled.
titletip null String Tooltip of the tab header.

You’ve already experienced using of AccordionPanel and TabView would be discussed in the next coming sections.

TabMenu Basic Info

TabMenu is a navigation component that displays menuitems as tabs.

Tag TabMenu
Component Class org.primefaces.component.tabmenu.TabMenu
Component Type org.primefaces.component.TabMenu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TabMenuRenderer
Renderer Class org.primefaces.component.tabmenu.TabMenuRenderer

TabMenu Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
model null MenuModel MenuModel instance to build menu dynamically.
style null String Inline style of the component.
styleClass null String Style class of the component.
activeIndex 0 Integer Index of the active tab.
widgetVar null String Name of the client side widget.

Getting Started With TabMenu

TabMenu requires menuitems as a children components, each menuitem is rendered as a tab. Menuitem can be used for initiating ajax, non-ajax and GET requests as it was been in a different types of Menu components had discussed.

index.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabMenu id="tabMenu" activeIndex="#{tabMenuManagedBean.index}">
		<p:menuitem value="GET Request" url="https://www.journaldev.com/dev/primefaces"></p:menuitem>
		<p:menuitem value="Ajax Request" action="#{tabMenuManagedBean.doSomeWork}" update="tabMenu message"></p:menuitem>
	</p:tabMenu>
</h:form>
</html>

TabMenuManagedBean.java


package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class TabMenuManagedBean {
	private int index = 0;

	public int getIndex() {
		return index;
	}

	public void setIndex(int index) {
		this.index = index;
	}

	public String doSomeWork(){
		// Do some work
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Some Work Achieved"));
		// Change the index that TabMenu refers as activated tab
		index = 1;
		return "";
	}
}

Primefaces TabMenu - Simple Example - Initial View Primefaces TabMenu - Simple Example - Ajax Request

Here’s a detailed explanation for the sample above:

  • Menuitems can be used for generating GET, Ajax, non-Ajax and internal application requests.
  • TabMenu uses activeIndex attribute for determining which tab should be rendered once the component got displayed.

TabView Basic Info

TabView is a container component to group content in tabs.

Tag TabView
Component Class org.primefaces.component. tabview.TabView
Component Type org.primefaces.component.TabView
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TabViewRenderer
Renderer Class org.primefaces.component.tabview.TabViewRenderer

TabView Attributes

Name Default Type Description
id null String Unique identifier of the component.
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean.
widgetVar null String Variable name of the client side widget.
activeIndex 0 Integer Index of the active tab.
effect null String Name of the transition effect.
effectDuration null String Duration of the transition effect.
dynamic false Boolean Enables lazy loading of inactive tabs.
cache true Boolean When tab contents are lazy loaded by ajax toggleMode, caching only retrieves the tab contents once and subsequent toggles of a cached tab does not communicate with server. If caching is turned off, tab contents are reloaded from server each time tab is clicked.
onTabChange null String Client side callback to execute when a tab is clicked.
onTabShow null String Client side callback to execute when a tab is shown.
onTabClose null String Client side callback to execute on tab close.
style null String Inline style of the main container.
styleClass null String Style class of the main container.
var null String Name of iterator to refer an item in collection.
value null Object Collection model to display dynamic tabs.
orientation top String Orientation of tab headers.
dir ltr String Defines text direction, valid values are ltr and rtl.
scrollable false Boolean When enabled, tab headers can be scrolled horizontally instead of wrapping.
prependId true Boolean TabView is a naming container thus prepends its id to its children by default, a false value turns this behavior off except for dynamic tabs.

Getting Started With TabView

TabView requires one more child tab components to display. Titles can also be defined by using “title” facet.

tabView.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabView activeIndex="#{tabViewManagedBean.index}">
		<p:tab title="Tab#1">
			<p:outputLabel value="Content goes here ! Message # 1"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#2">
			<p:outputLabel value="Content goes here ! Message # 2"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#3">
			<p:outputLabel value="Content goes here ! Message # 3"></p:outputLabel>
		</p:tab>
	</p:tabView>
</h:form>
</html>

TabViewManagedBean.java


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class TabViewManagedBean {
	private int index = 0;

	public int getIndex() {
		return index;
	}

	public void setIndex(int index) {
		this.index = index;
	}
}

Primefaces TabView - Simple Example - Tab1 Primefaces TabView - Simple Example - Tab2

TabView – Dynamic Tabs

By default, all tab contents are rendered to the client as dynamic attribute is set to false. If the value of this attribute is set to true only the active tab contents are rendered to the client and when an inactive tab header is selected, content is loaded with ajax.

Following example shows you impact of set dynamic attribute to false.

tabView.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabView activeIndex="#{tabViewManagedBean.index}" dynamic="false">
		<p:tab title="Tab#1">
			<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#2">
			<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
		</p:tab>
	</p:tabView>
</h:form>
</html>

TabViewManagedBean.java


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class TabViewManagedBean {
	private int index = 0;
	private String messageNum1 = "Tab#1 Content Is Loaded";
	private String messageNum2 = "Tab#2 Content Is Loaded";

	public String getMessageNum1() {
		System.out.println(messageNum1);
		return messageNum1;
	}

	public void setMessageNum1(String messageNum1) {
		this.messageNum1 = messageNum1;
	}

	public String getMessageNum2() {
		System.out.println(messageNum2);
		return messageNum2;
	}

	public void setMessageNum2(String messageNum2) {
		this.messageNum2 = messageNum2;
	}

	public int getIndex() {
		return index;
	}

	public void setIndex(int index) {
		this.index = index;
	}
}

Primefaces TabView - Dynamic Load - Loaded Tabs

But when the dynamic is set to true the result will be like below:

Primefaces TabView - Dynamic Load - Loaded Active Tab

As you’ve noticed, only the content of active tab has been loaded unlike what’s happened when the dynamic attribute is set to false. Dynamically loaded tabs cache their contents by default, by that, tab reactivating doesn’t result in an ajax request since contents are cached. If you want to reload content of tab each time tab is selected, turn off caching by set cache attribute into false.

TabView – Effects

Content displaying can be controlled to be effected by providing effect and effectDuration attributes. EffectDuration specifies the speed of the effect, slow, normal and fast are only applicable values for it.

tabViewEffects.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabView activeIndex="#{tabViewManagedBean.index}" dynamic="true" effect="fade" effectDuration="fast">
		<p:tab title="Tab#1">
			<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#2">
			<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
		</p:tab>
	</p:tabView>
</h:form>
</html>

TabView – Ajax Behavior Events

TabView component has supported two different type of events that can be triggered with ajax, tabChange and tabClose are executed when a tab is changed and closed respectively.

tabViewAjaxEvents.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form id="form" style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabView id="tabView" activeIndex="#{tabViewManagedBean.index}">
		<p:ajax event="tabChange" listener="#{tabViewManagedBean.onTabChanged}" update="@previous"></p:ajax>
		<p:ajax event="tabClose" listener="#{tabViewManagedBean.onTabClosed}" update="@form:message"></p:ajax>
		<p:tab title="Tab#1" closable="true">
			<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#2" closable="true">
			<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
		</p:tab>
	</p:tabView>
</h:form>
</html>

TabViewManagedBean.java


package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.TabChangeEvent;
import org.primefaces.event.TabCloseEvent;

@ManagedBean
@SessionScoped
public class TabViewManagedBean {
	private int index = 0;
	private String messageNum1 = "Tab#1 Content Is Loaded";
	private String messageNum2 = "Tab#2 Content Is Loaded";

	public String getMessageNum1() {
		System.out.println(messageNum1);
		return messageNum1;
	}

	public void setMessageNum1(String messageNum1) {
		this.messageNum1 = messageNum1;
	}

	public String getMessageNum2() {
		System.out.println(messageNum2);
		return messageNum2;
	}

	public void setMessageNum2(String messageNum2) {
		this.messageNum2 = messageNum2;
	}

	public int getIndex() {
		return index;
	}

	public void setIndex(int index) {
		this.index = index;
	}

	public void onTabChanged(TabChangeEvent e){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Tab With Index :: "+e.getTab().getTitle()+" Is Changed"));
	}

	public void onTabClosed(TabCloseEvent e){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Tab With Index :: "+e.getTab().getTitle()+" Is Closed"));
	}
}

Primefaces TabView - Ajax Event - Initial View Primefaces TabView - Ajax Event - Moving On Tab 2 Primefaces TabView - Ajax Event - Tab 1 Is Closed

Here’s detailed explanation for the above sample:

  • As because of TabView component is a container, it’s not applicable for you to update message component directly without referring its parent. That’s achieved by using Primefaces search expression just like using @previous and @form:message.
  • For enabling tab to be closed, closable attribute should be provided and its value should be true.
  • The onClose event will be fired once the closable tab is closed.
  • The onChange event will be fired once the inactive tab is activated.
  • Instance of TabChangeEvent is passed for the handler method while the ajax onChange event is processed.
  • Instance of TabCloseEvent is passed for the handler method while the ajax onClose event is processed.

TabView – Client Side API

TabView component can be controlled using the client side API. You can define JavaScript functions for invoking all below pre defined methods against TabView component.

Method Params Return Type Description
select(index) index: Index of tab to display void Activates tab with given index
selectTab(index) index: Index of tab to display void (Deprecated, use select instead) Activates tab with given index
disable(index) index: Index of tab to disable void Disables tab with given index
enable(index) index: Index of tab to enable void Enables tab with given index
remove(index) index: Index of tab to remove void Removes tab with given index
getLength() Number Returns the number of tabs
getActiveIndex() Number Returns index of current tab

tabViewClientSideAPI.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showTab(index){
			PF('tabView').select(index);
		}
	</script>
</h:head>
<h:form id="form" style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabView id="tabView" activeIndex="#{tabViewManagedBean.index}" widgetVar="tabView">
		<p:tab title="Tab#1" closable="true">
			<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#2" closable="true">
			<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
		</p:tab>
	</p:tabView>
	<p:commandButton value="Show Tab 1" type="button" onclick="showTab(0);"></p:commandButton>
	<p:commandButton value="Show Tab 2" type="button" onclick="showTab(1);"></p:commandButton>
</h:form>
</html>

Primefaces TabView - Client Side API - Initial View

Here’s the important points you have to notice:

  • Tabs inside TabView component has begun with index zero.
  • PF(‘WidgetVar’).<<Method-Name>>(<<Parameters If there>>) expression is used for invoking relevant methods.

TabView – Orientation & Scrollable Tabs

You can control the Tab orientation and the form of the tab header using both of orientation and scrollable attributes, respectively.

Four different orientations are available; top (default), left, right and bottom. At the same time, scrollable feature keeps your Tabs aligned horizontally and provide a navigation buttons to access those hidden tabs.

tabViewOrientationScrollable.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:outputLabel value="Orientation Example"></p:outputLabel>
	<p:tabView orientation="left">
		<p:tab title="Tab#1">
			Tab#1
		</p:tab>
		<p:tab title="Tab#2">
			Tab#2
		</p:tab>
		<p:tab title="Tab#3">
			Tab#3
		</p:tab>
		<p:tab title="Tab#4">
			Tab#4
		</p:tab>
	</p:tabView>
	<p:separator/>
	<p:outputLabel value="Scrollable Example"></p:outputLabel>
	<p:tabView scrollable="true">
		<p:tab title="Tab#1">
			Tab#1
		</p:tab>
		<p:tab title="Tab#2">
			Tab#2
		</p:tab>
		<p:tab title="Tab#3">
			Tab#3
		</p:tab>
		<p:tab title="Tab#4">
			Tab#4
		</p:tab>
		<p:tab title="Tab#5">
			Tab#5
		</p:tab>
		<p:tab title="Tab#6">
			Tab#6
		</p:tab>
		<p:tab title="Tab#7">
			Tab#7
		</p:tab>
		<p:tab title="Tab#8">
			Tab#8
		</p:tab>
	</p:tabView>
</h:form>
</html>

Primefaces TabView - Orientation And Scrollable

TabView – Client Side Callback

TabView has defined three callbacks for client side. onTabChange is executed when an inactive tab is clicked, onTabShow is executed when an inactive tab becomes active to be shown and onTabClose when a closable tab is closed. All of these callbacks receive index parameter as the index of tab.

tabViewClientSideCallbacks.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function onTabChange(){
			alert('Tab Is Changed');
		}

		function onTabShow(){
			alert('Tab Is Shown');
		}

		function onTabClose(){
			alert("Tab Is Closed");
		}
	</script>
</h:head>
<h:form id="form" style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tabView id="tabView" activeIndex="#{tabViewManagedBean.index}" onTabChange="onTabChange()" onTabClose="onTabClose()" onTabShow="onTabShow()">
		<p:tab title="Tab#1" closable="true">
			<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
		</p:tab>
		<p:tab title="Tab#2" closable="true">
			<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
		</p:tab>
	</p:tabView>
</h:form>
</html>

Primefaces TabView - Client Side Callbacks - OnChange Primefaces TabView - Client Side Callbacks - OnShow Primefaces TabView - Client Side Callbacks - OnClose

TagCloud Basic Info

TagCloud displays a collection of tag with different strengths.

Tag TagCloud
Component Class org.primefaces.component.tagcloud.TagCloud
Component Type org.primefaces.component.TagCloud
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TagCloudRenderer
Renderer Class org.primefaces.component.tagcloud.TagCloudRenderer

TagCloud Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar null String Name of the client side widget.
model null TagCloudModel Backing tag cloud model.
style null String Inline style of the container element.
styleClass null String Style class of the container element.

Getting Started With TagCloud

To get started use TagCloud component, TagCloud model should be provided within your own back-end. TagCloudModel has associated and binded into set of TagCloudItem, and for every TagCloudItem you binded the name and strength of the tag should be specified. Also, it’s applicable for you to provide a string represents the TagCloudItem’s url for a navigation purpose.

tagCloud.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:tagCloud model="#{tagCloudManagedBean.tagCloud}"></p:tagCloud>
</h:form>
</html>

TagCloudManagedBean.java


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.tagcloud.DefaultTagCloudItem;
import org.primefaces.model.tagcloud.DefaultTagCloudModel;
import org.primefaces.model.tagcloud.TagCloudItem;
import org.primefaces.model.tagcloud.TagCloudModel;

@ManagedBean
@SessionScoped
public class TagCloudManagedBean {
	private TagCloudModel tagCloud = new DefaultTagCloudModel();
	
	public TagCloudManagedBean(){
		// Create set of TagCloudItem (s)
		TagCloudItem primefaces = new DefaultTagCloudItem("Primefaces","https://www.journaldev.com/dev/primefaces", 10);
		TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.journaldev.com/dev/hibernate", 5);
		TagCloudItem apachePluto = new DefaultTagCloudItem("Apache Pluto", 3);
		TagCloudItem spring = new DefaultTagCloudItem("Spring", 4);
		TagCloudItem grails = new DefaultTagCloudItem("Grails", 5);
		TagCloudItem apacheLvy = new DefaultTagCloudItem("Apache lvy", 6);
		// Add created TagCloudItems into your TagCloudModel
		this.tagCloud.addTag(primefaces);
		this.tagCloud.addTag(hibernate);
		this.tagCloud.addTag(apachePluto);
		this.tagCloud.addTag(spring);
		this.tagCloud.addTag(grails);
		this.tagCloud.addTag(apacheLvy);
		
		
	}

	public TagCloudModel getTagCloud() {
		return tagCloud;
	}

	public void setTagCloud(TagCloudModel tagCloud) {
		this.tagCloud = tagCloud;
	}
}

Primefaces TagCloud - Simple Example

As you’ve noticed, Hibernate and Grails are the most strength Tags. Primefaces and Hibernate Tags are clickable and by doing so you’ll navigate into associated URL inside.

Selecting Tags

TagCloudItem can be selected using select ajax behavior with one important condition that those selected TagCloudItem should have null as url value. For those have not null as a url value, they will cause get url navigation done.

tagCloud.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message"></p:growl>
	<p:tagCloud model="#{tagCloudManagedBean.tagCloud}">
		<p:ajax event="select" listener="#{tagCloudManagedBean.selectListener}" update="message">
		</p:ajax>
	</p:tagCloud>
</h:form>
</html>

TagCloudManagedBean.java


package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.SelectEvent;
import org.primefaces.model.tagcloud.DefaultTagCloudItem;
import org.primefaces.model.tagcloud.DefaultTagCloudModel;
import org.primefaces.model.tagcloud.TagCloudItem;
import org.primefaces.model.tagcloud.TagCloudModel;

@ManagedBean
@SessionScoped
public class TagCloudManagedBean {
	private TagCloudModel tagCloud = new DefaultTagCloudModel();
	
	public TagCloudManagedBean(){
		// Create set of TagCloudItem (s)
		TagCloudItem primefaces = new DefaultTagCloudItem("Primefaces","https://www.journaldev.com/dev/primefaces", 10);
		TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.journaldev.com/dev/hibernate", 5);
		TagCloudItem apachePluto = new DefaultTagCloudItem("Apache Pluto", 3);
		TagCloudItem spring = new DefaultTagCloudItem("Spring", 4);
		TagCloudItem grails = new DefaultTagCloudItem("Grails", 5);
		TagCloudItem apacheLvy = new DefaultTagCloudItem("Apache lvy", 6);
		// Add created TagCloudItems into your TagCloudModel
		this.tagCloud.addTag(primefaces);
		this.tagCloud.addTag(hibernate);
		this.tagCloud.addTag(apachePluto);
		this.tagCloud.addTag(spring);
		this.tagCloud.addTag(grails);
		this.tagCloud.addTag(apacheLvy);
	}

	public TagCloudModel getTagCloud() {
		return tagCloud;
	}

	public void setTagCloud(TagCloudModel tagCloud) {
		this.tagCloud = tagCloud;
	}
	
	public void selectListener(SelectEvent e){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(((TagCloudItem)e.getObject()).getLabel() + " Is Selected"));
	}
}

Primefaces TagCloud - Selected TagCloudItem

TagCloud API

TagCloud model component can be controlled using the below API.

Method Description
List<TagCLoudItem> getTags() Returns all tags in model.
void addTag(TagCloudItem item) Adds a tag.
void removeTag(TagCloudItem item) Removes a tag.
void clear() Removes all tags.

You can list all of tags that are associated with your model through invoking of getTags() against your model like below:

tagCloud.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function printAllTags(){
			alert(PF('tagCloudModel').getTags());
		}
	</script>
</h:head>
<h:form style="width:500px;">
	<p:growl id="message" ></p:growl>
	<p:tagCloud widgetVar="tagCloudModel" model="#{tagCloudManagedBean.tagCloud}">
		<p:ajax event="select" listener="#{tagCloudManagedBean.selectListener}" update="message">
		</p:ajax>
	</p:tagCloud>
	<p:commandButton value="List All Tags"  action="#{tagCloudManagedBean.listAllTags}" update="message"></p:commandButton>
</h:form>
</html>

TagCloudManagedBean.java


package com.journaldev.prime.faces.beans;

import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.SelectEvent;
import org.primefaces.model.tagcloud.DefaultTagCloudItem;
import org.primefaces.model.tagcloud.DefaultTagCloudModel;
import org.primefaces.model.tagcloud.TagCloudItem;
import org.primefaces.model.tagcloud.TagCloudModel;

@ManagedBean
@SessionScoped
public class TagCloudManagedBean {
	private TagCloudModel tagCloud = new DefaultTagCloudModel();
	
	public TagCloudManagedBean(){
		// Create set of TagCloudItem (s)
		TagCloudItem primefaces = new DefaultTagCloudItem("Primefaces","https://www.journaldev.com/dev/primefaces", 10);
		TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.journaldev.com/dev/hibernate", 5);
		TagCloudItem apachePluto = new DefaultTagCloudItem("Apache Pluto", 3);
		TagCloudItem spring = new DefaultTagCloudItem("Spring", 4);
		TagCloudItem grails = new DefaultTagCloudItem("Grails", 5);
		TagCloudItem apacheLvy = new DefaultTagCloudItem("Apache lvy", 6);
		// Add created TagCloudItems into your TagCloudModel
		this.tagCloud.addTag(primefaces);
		this.tagCloud.addTag(hibernate);
		this.tagCloud.addTag(apachePluto);
		this.tagCloud.addTag(spring);
		this.tagCloud.addTag(grails);
		this.tagCloud.addTag(apacheLvy);
	}

	public TagCloudModel getTagCloud() {
		return tagCloud;
	}

	public void setTagCloud(TagCloudModel tagCloud) {
		this.tagCloud = tagCloud;
	}
	
	public void selectListener(SelectEvent e){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(((TagCloudItem)e.getObject()).getLabel() + " Is Selected"));
	}
	
	public String listAllTags(){
		List<TagCloudItem> tags = this.tagCloud.getTags();
		String message = "";
		for(TagCloudItem item : tags){
			message = message + ","+item.getLabel();
		}
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your Tags Are: "+message));
		return "";
	}
}

Primefaces TagCloud - Listing All Tags

Summary

TabMenu, TabView and TagCloud are used for generating navigation menus, providing different contents contained in a tab-manner view and displaying Custom-Strength Tags, respectively. This tutorial has focused on the most important things that these components are providing. Find attached source code and left your comments right below.

Comments

  1. ja says:

    By using @SessionScope cause additional coding in clearing some fields and data for tabs. Can you use @ViewScope with the default tab index?

  2. Daniel V says:

    Is there a way to make tabMenu scrollable too?

  3. Rashid CK says:

    Your tutorial really helped me to get started with jsf tabs. I want to know how to give styles for a jsf primeface tab? I want the color/design of tab to change when I select it. In simple, I want the selected tab to be highlighted. Please help me. Thanks in advance

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages