Primefaces TabView example

by

The PrimeFaces tabView component offers an intuitive way to present multiple content sections, making it ideal for showcasing distinct product categories within an application. In this tutorial, we’ll leverage the tabView component to display three different product categories, each represented by a separate tab.

Firstly, if you are new to Primefaces, we recommend checking this article to get started: PrimeFaces Tutorial (2023)

Setting Up a TabView example

Step 1: Implementing the TabView

In general terms, implementing a TabView with Primefaces is straightforward: you just create a top tabView element and tab children for it:

 <p:tabView>
   
    <p:tab title="Tab 1">
        Content for Tab 1
    </p:tab>
    <p:tab title="Tab 2">
        Content for Tab 2
    </p:tab>
    
</p:tabView>

For example, the following index.xhtml page contains a TabView with three tabs. It also captures event such as Tab Change or Tab Close :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui">
   <h:head>
   </h:head>
   <h:body>
      <div class="card">
         <h:form id="form">
            <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>
            <div class="card">
               <h5 class="mt-0">Default</h5>
               <p:tabView>
                  <p:ajax event="tabChange" listener="#{itemView.onTabChange}" update=":form:msgs"/>
                  <p:ajax event="tabClose" listener="#{itemView.onTabClose}" update=":form:msgs"/>
                  <f:facet name="actions">
                     Global actions
                  </f:facet>
                  <p:tab title="Electronics">
                     <p class="m-0">
                        Displaying our latest collection of cutting-edge electronics including smartphones, laptops, and smart devices.
                        <!-- Insert detailed information about the Electronics category -->
                     </p>
                  </p:tab>
                  <p:tab title="Apparel">
                     <p class="m-0">
                        Explore our fashionable clothing line ranging from casual wear to formal attire for all occasions.
                        <!-- Insert detailed information about the Apparel category -->
                     </p>
                  </p:tab>
                  <p:tab title="Home and Furniture">
                     <p class="m-0">
                        Discover elegant home decor and versatile furniture pieces that complement your lifestyle.
                        <!-- Insert detailed information about the Home & Furniture category -->
                     </p>
                  </p:tab>
               </p:tabView>
            </div>
         </h:form>
      </div>
   </h:body>
</html>

Step 2: Adding the Backing Beans

A Backing Bean can help to intercept the events which are related to the TabView. Let’s add the following ItemView Bean which captures the events onTabChange and onTabClose displaying messages:

@Named
@RequestScoped
public class ItemView {

   
    public void onTabChange(TabChangeEvent event) {
        FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab().getTitle());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void onTabClose(TabCloseEvent event) {
        FacesMessage msg = new FacesMessage("Tab Closed", "Closed tab: " + event.getTab().getTitle());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

   

    private void showMessage(String clientId) {
        FacesContext.getCurrentInstance()
                .addMessage(null,
                        new FacesMessage(FacesMessage.SEVERITY_INFO, clientId + " multiview state has been cleared out", null));
    }
}

Step 3: Test the TabView

Here is our example TabView when we deploy the Web application:

primefaces tabview example

Conclusion

The PrimeFaces tabView component serves as an efficient and visually appealing solution for organizing and presenting various product categories within an application. Customize each tab to showcase detailed information about different product offerings, enhancing user engagement and navigation.

Source code: https://github.com/fmarchioni/mastertheboss/tree/master/web/primefaces/tabview

Found the article helpful? if so please follow us on Socials