Time for action – creating the TabMenu component

Let us see how to create a TabMenu component, by performing the following step:

1. Create the TabMenu component with four Menu options to show the Home, Post Buzz, Search, and My Account screens:

   <p:tabMenu activeIndex="0">
       <p:menuitem value="Home" url="home.jsf" icon="ui-icon-home"/>  
       <p:menuitem value="Post Buzz" outcome="newPost"   icon="ui-icon-document"/>  
       <p:menuitem value="Search" action="#{menuController.showSearchPage}" ajax="false" icon="ui-icon-search" />  
       <p:menuitem value="My Account" actionListener="#{menuController.showMyAccount()}" icon="ui-icon-person" />  
   </p:tabMenu>

What just happened?

The preceding code renders a TabMenu component as shown in the following screenshot:

Here, we have associated various types of requests for each...