Working with a tabbed panel

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.

How to do it...

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