Primefaces Tab, TabMenu, TabView, TagCloud

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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 "";
	}
}

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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;
	}
}

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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;
	}
}

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

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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"));
	}
}

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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>

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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>

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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>

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

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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;
	}
}

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="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://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"));
	}
}

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.

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.

Download PrimeFaces TabMenu TabView TagCloud Project

Comments

Marcos says:
September 26, 2019 at 1:40 pm
Please see that it has a function for the previous tab and is not currently available?
ja says:
August 29, 2019 at 4:39 am
By using @SessionScope cause additional coding in clearing some fields and data for tabs. Can you use @ViewScope with the default tab index?
Daniel V says:
October 7, 2018 at 5:31 pm
Is there a way to make tabMenu scrollable too?
Rashid CK says:
January 17, 2018 at 3:46 am
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

Primefaces Tab, TabMenu, TabView, TagCloud

Tab Basic Info

Tab Attributes

TabMenu Basic Info

TabMenu Attributes

Getting Started With TabMenu

TabView Basic Info

TabView Attributes

Getting Started With TabView

TabView – Dynamic Tabs

TabView – Effects

TabView – Ajax Behavior Events

TabView – Client Side API

TabView – Orientation & Scrollable Tabs

TabView – Client Side Callback

TagCloud Basic Info

TagCloud Attributes

Getting Started With TagCloud

Selecting Tags

TagCloud API

Summary

Comments

Leave a Reply Cancel reply