Creating a tabbed panel using a TabView component

A TabView component is a tabbed panel component, similar to AccordionPanel, providing features such as dynamic tabs, lazy loading of tabs, and server/client-side event listeners for tabChange, tabShow events. Usage of the TabView component is very similar to AccordionPanel.

In our TechBuzz application we will use a TabView component to show the User Account screen to display user-specific information in multiple tabs, such as My Profile, Change Password, and My Buzz.

Let us see how to create a User Account page using a TabView component:

<p:tabView>
  <p:tab title="My Profile">
    <p:panel header="Personal Info">
    <h:panelGrid columns="2" columnClasses="label">
      <h:outputLabel value="First Name:" />
      <h:outputText value=" #{userController.loginUser.firstName}"/>
      <h:outputLabel value="Last Name:" />
      <h:outputText value=" #{userController.loginUser.lastName}"/>
      <...