Dynamicly adding tabs

[3man]

Hello,
can someone give me hint how to dinamicly adding tabs in tabView.

I need this for situation like this:
addin three tabs:
tabA tabB tabC

close tabA
tabB tabC

add again tabA
tabB tabC tabA

I adding tab from manuBar, but with this approach tabs is always been added on the same place

Code: Select all

        <h:form id="frmContent" >

            <p:growl id="growl" showDetail="true" />

            <h:panelGroup layout="block" >

                <h:panelGroup layout="block" id="mainMenu" >
                    <p:menubar model="#{menuBacking.model}" styleClass="main_menuBar" autoSubmenuDisplay="false" />
                </h:panelGroup>


                <h:panelGroup layout="block" id="content1" styleClass="content1" >
                    <p:tabView styleClass="main_tabView" id="tabNav" widgetVar="tabNav1" cache="false" >
                        
                        <p:ajax event="tabChange" listener="#{menuBacking.onTabChange1}" update=":frmContent:growl"/>

                        <p:tab closable="true" title="albums" id="albums" rendered="#{menuBacking.albums}"> 
                            <ui:include src="/pages/albums.xhtml"/> 
                        </p:tab>   
                        <p:tab closable="true" title="band" id="band" rendered="#{menuBacking.band}"> 
                            <ui:include src="/pages/band.xhtml"/> 
                        </p:tab>
                        <p:tab closable="true" title="concerts" id="concerts" rendered="#{menuBacking.concerts}"> 
                            <ui:include src="/pages/concerts.xhtml"/> 
                        </p:tab>
                        <p:tab closable="true" title="contacts" id="contacts" rendered="#{menuBacking.contacts}" > 
                            <ui:include src="/pages/etaloniranje.xhtml"/>
                        </p:tab>
                        <p:tab closable="true" title="prava" id="prava" rendered="#{menuBacking.prava}" > 
                            <ui:include src="/pages/prava.xhtml"/>
                        </p:tab>
                        <p:tab closable="true" title="error" id="error" rendered="#{menuBacking.error}" > 
                            <ui:include src="/pages/error.xhtml"/>
                        </p:tab>
                    </p:tabView>
                </h:panelGroup>


            </h:panelGroup>

        </h:form>

[bpap]

I believe you can use a model for this, like this example http://www.primefaces.org/showcase-labs ... wModel.jsf.
You will need a list of POJOs (one POJO for each tab) to keep the page path, the title and any other attribute needed. You can then add/remove tabs from the list and have the behavior you want.

[ltune]

I had some trouble myself at first as well. The showcase labs model for tabView does work indeed. The tabs can even be updated with ajax (however the closeable attribute needs to have update="@all" for the tab)

Greets,

Adam