Dynamic Tabs by selecting the option on Menu

Question

I'm kinda new to the JSF and Web Programming, i'm using primefaces 6.0 and trying to have a TOP MENU, that opens TabView. Everytime that you select an option on the TOP MENU, opens a new Tab on the TabView with the content of that selected option.

I was searching but didn't found how to do it.

Thank you guys!

RedaN · Accepted Answer · 2017-07-14T11:21:14.603

For starters I suggest you use the <p:layout>component to divide your page, and for displaying the content in tabs I suggest you use <ui:include>you can read about it here.
So your main page should look something like this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>

<body>
    <p:layout>
        <p:layoutUnit position="north">
            <!-- !!!!!!!!!! Menu goes here !!!!!!!!!!! -->
        </p:layoutUnit>
        <p:layoutUnit position="center" resizable="false">
            <p:tabView>
                <p:tab title="Title goes here">
                    <ui:include src="content" />
                </p:tab>
            </p:tabView>
        </p:layoutUnit>
    </p:layout>
</body>

</html>

Note : In case you want to generate your tabs dynamically you'd want to create a custom Tab class and use JSTL's <c:forEach> to loop over the tabs to populate the tabView.

xhtml :

<p:tabView>
    <c:forEach items="#{homeView.openTabs}" var="tab">
        <p:tab title="#{tab.title}" closable="true" rendered="#{tab.open}">
            <ui:include src="#{tab.content}"/>
        </p:tab>
    </c:forEach>
</p:tabView>

Note that openTabs is an ArrayList of Tabs.

Custom tab class :

public class Tab {

    private String title;
    private String content;
    private boolean open;

//Custom constructor, getters and setters...

Tips :
Use the <p:tab> rendered attribute to handle closing and reopening tabs. Be sure to use tabView's custom event <p:ajax event="tabClose" listener="#{homeView.onTabClose}"/> for advanced event handling.

Dynamic Tabs by selecting the option on Menu

1 Answers1