A tabbed panel component, tabView
has powerful features such as dynamic content loading, orientations, and programmatically managing tabs. In this recipe, we will create tabs with the scrolling ability and with a different tab header orientation, along with the dynamic content generation and AJAX behaviors added.
A basic definition of a tabbed panel with two panels would be as follows:
<p:tabView id="tabView"> <p:tab title="Volkswagen CC"> <h:panelGrid columns="2" cellpadding="5"> <h:graphicImage library="images" name="autocomplete/CC.png" /> <h:outputText value="The Volkswagen CC (also known as the Volkswagen Passat CC) is a four-door coupé version of the Volkswagen Passat." /> </h:panelGrid> </p:tab> <p:tab title="Volkswagen Golf"> <h:panelGrid columns="2" cellpadding="5"> <h:graphicImage library="images" name="autocomplete/Golf.png" /> <h:outputText value="The Volkswagen Golf is a small family car manufactured by Volkswagen since 1974 and marketed worldwide across six generations, in various body configurations and under various nameplates" /> </h:panelGrid> </p:tab> </p:tabView>
This will render two tabs, with the first tab activated by default, as shown in the following image:
We can also enable or disable a tab within the tab view according to a business rule. If we set the disabled
attribute to true
in the tab, the tab will have a grayed-out caption that indicates that the tab is disabled, as seen in the image here:
If you have more tabs that could be seen in the title, setting the scrollable
attribute to true
will render arrows for navigation in the tab panel header, as shown in the following image.
By setting the dynamic
attribute to true
, it's also possible to lazily load the content of the tabs with an AJAX request when they get activated in order to save bandwidth and reduce the size of the page. And by also setting the cache
attribute to true
, consecutive invokes on the same tab will not invoke an AJAX request.
Orientation of the tabs can be set with four positions: top
, bottom
, left
, and right
. By default, the orientation for the tabs is top
.
Dynamic tab loading allows us to load the content of the tab view dynamically by providing a data model. The definition of the component for providing a data list of cars to the tabView
component would be as follows:
<p:tabView value="#{tabViewBean.cars}" var="car"> <p:tab title="#{car.name}"> <h:panelGrid columns="2" cellpadding="5"> <p:graphicImage value= "/resources/images/autocomplete/#{car.name}.png" /> </h:panelGrid> </p:tab> </p:tabView>
The data model here is the list of car objects that will be iterated through, to render each tab, along with the image and the name of the car.
With the effect
attribute, effects can be applied for content transition between the tabs. The possible values are as follows:
blind
clip
drop
explode
fade
fold
puff
scale
slide
The effect duration can also be set with the effectDuration
attribute. The possible values are slow
, normal
, and fast
.
The tabView
component provides the tabChange
and tabClose
AJAX behavior events that will be fired when a tab is changed or closed in a tab view. The definition of the event listeners for the tabView
component would be as follows:
<p:ajax event="tabChange" listener="#{tabViewBean.onTabChange}" update=":mainForm:growl" /> <p:ajax event="tabClose" listener="#{tabViewBean.onTabClose}" update=":mainForm:growl" />
The listener methods, onTabChange
and onTabClose
, receive an instance of org.primefaces.event.TabChangeEvent
and org.primefaces.event.TabCloseEvent
, respectively, as parameters:
public void onTabChange(TabChangeEvent event) { MessageUtil.addInfoMessage("tab.changed", "Title: " + event.getTab().getTitle()); } public void onTabClose(TabCloseEvent event) { MessageUtil.addInfoMessage("tab.closed", "Closed Tab: " + event.getTab().getTitle()); }
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter4/tabView.jsf
.
For details about the MessageUtil
class, see the Internationalization (i18n) and Localization (L10n) recipe in Chapter 1, Getting Started with PrimeFaces.