Time for action – using TabView with dynamic tabs and event listeners support

Let us look at how we can create a TabView component with dynamic number of tabs that are loaded lazily and handle tabChange and tabClose events:

1. Create a TabView component backed by server-side data and register tabChange and tabClose event listeners:

   <p:tabView value="#{tagController.tags}" var="tag" dynamic="true" cache="false" activeIndex="2">
     <p:ajax event="tabChange" listener="#{sampleController.onTabChange}"/> 
     <p:ajax event="tabClose" listener="#{sampleController.onTabClose}"/>
     
     <p:tab title="#{tag.label}" closable="true" disabled="#{empty tag.posts}">
       <h:outputText value="#{tag.description}" />
     </p:tab>  
   </p:tabView>

What just happened?

We have created a TabView component backed by the List<Tag> collection. We have specified disabled="#{empty tag.posts}" to disable the tab if there are no posts associated with that tag. Also, we have specified...