PrimeFaces TabView

It is a container component which is used to group content in tabs at the same web page. The <p:tabView> component is used to create container. The <p:tab> is a sub component of <p:tabView> which is used to create tab individually. It is useful when we want to show more information at the same web page.

TabView Attributes

Attribute	Default value	Type	Description
rendered	true	Boolean	It takes boolean value to specify the rendering of the component.
activeIndex	0	Integer	It is used to set index of the active tab.
effect	null	String	It is used to set name of the transition effect.
effectDuration	null	String	It is used to set duration of the transition effect.
dynamic	false	Boolean	It enables lazy loading of inactive tabs.
cache	true	Boolean	It is used to set cache.
onTabChange	null	String	It executes when a tab is clicked.
onTabShow	null	String	It executes when a tab is shown.
onTabClose	null	String	It executes on tab close.
style	null	String	It is used to set inline style of the main container.
var	null	String	It is a name of iterator to refer an item in collection.
value	null	Object	It is a collection model to display dynamic tabs.
orientation	top	String	It is used to set orientation of tab headers.
dir	ltr	String	It 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	It is used to prepend id.
tabindex	0	String	It specify position of the element in the tabbing order.

Example

Here, in the following example, we are implementing <p:tabView> component. This example contains the following files.

JSF File

// tabView.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>TabView</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<h3 style="margin-top:0">Course Description</h3>
<p:tabView>
<p:tab title="Java">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/java.png" />
<h:outputText
value="Java is a programming language and a platform.
Java is a high level, robust, secured and object-oriented programming language.
Platform: Any hardware or software environment in which a program runs, is known as a platform. 
Since Java has its own runtime environment (JRE) and API, it is called platform." />
</h:panelGrid>
</p:tab>
<p:tab title="Spring">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/spring.png" />
<h:outputText value="Spring is a lightweight framework. It can be thought of as a framework 
of frameworks because it provides support to various frameworks such as Struts, Hibernate, Tapestry, EJB, JSF etc. 
The framework, in broader sense, can be defined as a structure where we find solution of the various technical problems. " />
</h:panelGrid>
</p:tab>
<p:tab title="Python">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/python.png" />
<h:outputText value="Python is a simple, easy to learn, powerful, high level and object-oriented 
programming language. Guido Van Rossum is known as the founder of python programming." />
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>

Output: