JournalDev

Java, Java EE, Android, Python, Web Development Tutorials

You are here: Home » PrimeFaces » Primefaces Tab, TabMenu, TabView, TagCloud

Primefaces Tab, TabMenu, TabView, TagCloud

2 Comments

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.

TagTab
Component Classorg.primefaces.component.TabView.Tab
Component Typeorg.primefaces.component.Tab
Component Familyorg.primefaces.component

Tab Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component.
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean.
titlenullBooleanTitle text of the tab
titleStylenullStringInline style of the tab.
titleStyleClassnullStringStyle class of the tab.
disabledfalseBooleanDisables tab element.
closablefalseBooleanMakes the tab closable when enabled.
titletipnullStringTooltip 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.

TagTabMenu
Component Classorg.primefaces.component.tabmenu.TabMenu
Component Typeorg.primefaces.component.TabMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.TabMenuRenderer
Renderer Classorg.primefaces.component.tabmenu.TabMenuRenderer

TabMenu Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
modelnullMenuModelMenuModel instance to build menu dynamically.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
activeIndex0IntegerIndex of the active tab.
widgetVarnullStringName 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

Copy

<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

Copy

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.

TagTabView
Component Classorg.primefaces.component. tabview.TabView
Component Typeorg.primefaces.component.TabView
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.TabViewRenderer
Renderer Classorg.primefaces.component.tabview.TabViewRenderer

TabView Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component.
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean.
widgetVarnullStringVariable name of the client side widget.
activeIndex0IntegerIndex of the active tab.
effectnullStringName of the transition effect.
effectDurationnullStringDuration of the transition effect.
dynamicfalseBooleanEnables lazy loading of inactive tabs.
cachetrueBooleanWhen 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.
onTabChangenullStringClient side callback to execute when a tab is clicked.
onTabShownullStringClient side callback to execute when a tab is shown.
onTabClosenullStringClient side callback to execute on tab close.
stylenullStringInline style of the main container.
styleClassnullStringStyle class of the main container.
varnullStringName of iterator to refer an item in collection.
valuenullObjectCollection model to display dynamic tabs.
orientationtopStringOrientation of tab headers.
dirltrStringDefines text direction, valid values are ltr and rtl.
scrollablefalseBooleanWhen enabled, tab headers can be scrolled horizontally instead of wrapping.
prependIdtrueBooleanTabView 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

Copy

<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

Copy

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

Copy

<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

Copy

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

Copy

<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

Copy

<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

Copy

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.

MethodParamsReturn TypeDescription
select(index)index: Index of tab to displayvoidActivates tab with given index
selectTab(index)index: Index of tab to displayvoid(Deprecated, use select instead) Activates tab with given index
disable(index)index: Index of tab to disablevoidDisables tab with given index
enable(index)index: Index of tab to enablevoidEnables tab with given index
remove(index)index: Index of tab to removevoidRemoves tab with given index
getLength()–NumberReturns the number of tabs
getActiveIndex()–NumberReturns index of current tab

tabViewClientSideAPI.xhtml

Copy

<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

Copy

<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

Copy

<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.

TagTagCloud
Component Classorg.primefaces.component.tagcloud.TagCloud
Component Typeorg.primefaces.component.TagCloud
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.TagCloudRenderer
Renderer Classorg.primefaces.component.tagcloud.TagCloudRenderer

TagCloud Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
widgetVarnullStringName of the client side widget.
modelnullTagCloudModelBacking tag cloud model.
stylenullStringInline style of the container element.
styleClassnullStringStyle 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

Copy

<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

Copy

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

Copy

<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

Copy

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.

MethodDescription
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

Copy

<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

Copy

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.

Download PrimeFaces TabMenu TabView TagCloud Project
WhatsAppRedditLinkedin

Comments

  2. 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

    Reply

Comment Policy:Please submit comments to add value to the post. Comments like "Thank You" and "Awesome Post" will be not published. If you want to post code then wrap them inside <pre> tags. For example <pre>class Foo { }</pre>.
If you want to post XML content, then please escape < with &lt; and > with &gt; otherwise they will not be shown properly.

Leave a Reply

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