JSF Changing Tab positions dynamically using primefaces

Question

I have typical requirement where I need to rearrange the position for the tabs.
I am using the tab which is given in primefaces here

Let say there are three tabs like the one given in the above URL.

When I click the tab3,it should come to first position where, the tab1 is present right now and like this the tab should get rearranged and it should not be rearranged in random manner.

The rearrangement should happen in rotational manner

Initially the tab should load in the this order tab1,tab2,tab3

if I click TAB3 -the order of tab should be in the order tab3,tab2,tab1
if I click TAB2 -the order of tab should be in the order tab2,tab3,tab1
if I click TAB1 -the order of tab should be in the order tab1,tab3,tab2

How can I able rearrange the positions of these tabs using JSF primefaces ?

Mark Mark · Accepted Answer · 2014-05-16T16:14:17

Primefaces <p:tabView> has a way to display a dynamic number of tabs. This method will require you to have a Object to represent the content of your tabs. Your bean will need a Collection of these Objects.

<p:tabView id="mytabs" value="#{bean.tabsList} value="tab">
    <p:ajax event="tabChange" listener="#{bean.updateTabs}" update="mytabs" />
    <p:tab title="#{tab.title}>
        <h:outputText value="#{tab.content}" />
    </p:tab>
</p:tabView>

Then in the updateTabs() bean method you can sort your Collection as needed. The <p:ajax> event will update your <p:tabView> and re-render your tabs.

JSF Changing Tab positions dynamically using primefaces

1 Answers