PrimeFaces - TabView Example

In this example, we will learn how to build a tabView to display tabbed pages in PrimeFaces. We will provide the list of tabs from our managed bean instead of statically using tab tag in the jsf page.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>PrimeFaces TabView Example</h2>
    <p:tabView>
        <c:forEach items="#{tabBean.tabs}" var="tabInfo" varStatus="vs">
            <p:tab title="#{tabInfo.title}">
                <ui:include src="#{tabInfo.page}.xhtml"/>
            </p:tab>
            </c:forEach>
    </p:tabView>
</h:body>

Note that we used JSTL's c:forEach in this example instead of JSF ui:repeat (or instead of value attribute of tabView tag). That's because our nested tag ui:include is evaluated during view build phase whereas ui:repeat runs during view render phase; that means ui:repeat loop can't evaluate #{tabInfo.page} during build phase.

The manage bean

@ManagedBean
@ViewScoped
public class TabBean {
  private List<TabInfo> tabs;

  @PostConstruct
  public void init() {
        tabs = Arrays.asList(new TabInfo("About", "about"),
                new TabInfo("Reviews", "reviews"),
                new TabInfo("Contact Us", "contact-us")
                );
  }

  public List<TabInfo> getTabs() {
      return tabs;
  }
}

public class TabInfo {
  private final String title;
  private final String page;
    .............
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jstl 1.2 javax.servlet:jstl
• JDK 1.8
• Maven 3.3.9