Tab Panel How can add buttons NEXT>> and << PREV

[pardhab]

Can anyone please help me in resolving this functionality.

I had a scenario where i need to add buttons in Tab Panel. [ NEXT>> and << PREV ] and navigate from one tab to another. Apart from the regular Tabpanel functionality.

This is very Urgent...

Thanks in advance.

[ilya_shaikovsky]

Just add such buttons and in their actions - change the selected tab using "selectedTab" attribute EL binding.

[pardhab]

This is just a pseudo Code, there is a main.jsp, and here I am including test1.jsp and test2.jsp.
When the use hit [ Next >> ] button on the code I need to navigate him to next page i.e., test2.jsp and similarly if the user clicks [ << PREV ] in test2.jsp, i should bring him to the test1.jsp


<!-- Main Jsp Jsp -->

<rich:tabPanel id="comp" switchType="ajax" width="700">
<rich:tab id="test1" label="Test One">
<h:panelGrid columns="1">
<a4j:include id="a4j1" viewId="test1.jsp" />
</h:panelGrid>
</rich:tab>
<rich:tab id="test2" label="Test Two">
<h:panelGrid columns="1">
<a4j:include id="a4j2" viewId="test2.jsp" />
</h:panelGrid>
</rich:tab>
</rich:tabPanel>

<!-- Test 1 JSP -->

<f:subview id="test1">
<h:form id="test1">
<h:panelGrid align="center" styleClass="blueborder" columns="1">
<h:panelGrid columns="1" align="center" width="800">
</h:panelGrid>
<h:panelGrid columns="3" align="center" width="800">
<h:outputText styleClass="red1" value="First Name" />
<h:outputText styleClass="red1" value="Last Name" />
<h:outputText styleClass="black1" value="Middle Name" />
<h:inputText size="25" maxlength="50" />
<h:inputText size="20" maxlength="50" />
<h:inputText size="20" maxlength="50" />
</h:panelGrid>
<h:commandLink styleClass="standardButton" value="Next >>" />
</h:form>
</f:subview>



<!-- Test 2 Jsp -->

<f:subview id="test1">
<h:form id="test1">
<h:panelGrid align="center" styleClass="blueborder" columns="1">
<h:panelGrid columns="1" align="center" width="800">
</h:panelGrid>
<h:panelGrid columns="3" align="center" width="800">
<h:outputText styleClass="red1" value="Age" />
<h:outputText styleClass="red1" value="Gender" />
<h:inputText size="25" maxlength="3" />
<h:inputText size="20" maxlength="1" />
</h:panelGrid>
<h:commandLink styleClass="standardButton" value="<< PREV" />
</h:form>
</f:subview>

[ilya_shaikovsky]

If you need to change the tabs from such code - the answer is no.

You need:

<rich:tabPanel switchType="client" id="tab" selectedTab="#{bean.tabName}">
 <rich:tab label="test 1" name="tab1">
 <a4j:commandButton value="next" reRender="tab" action="#{bean.nextTab}"></a4j:commandButton>
 </rich:tab>
 <rich:tab label="Sample 2" disabled="#{bean.check}" name="tab2">
 <a4j:commandButton value="prev" reRender="tab" action="#{bean.prevTab}"></a4j:commandButton>
 </rich:tab>
 </rich:tabPanel>

and

private String tabName="tab2";
...
 public String nextTab(){
 setTabName("tab2");
 return null;
 }
 public String prevTab(){
 setTabName("tab1");
 return null;
 }

[mgvarley]

I use the following approach for my tab panel navigation - the advantage over the previous post is you don't need to explicitly state the next tab name. It also allows you to disable tabs other than the current tab to prevent the user from clicking tabs.

private int tabIndex = 1;

public void nextTab() {
 tabIndex++;
}

public void previousTab() {
 tabIndex--;
}

public int getTabIndex() {
 return tabIndex;
}

public String getCurrentTab() {
 return "tab" + tabIndex;
}

and then on my tab panel I put:

<rich:tabPanel id="pnlMyTabPanel" selectedTab="#{myBean.currentTab}">

<rich:tab id="tab1" label="Tab Label One" disabled="#{myBean.tabIndex != 1}">

<a4j:commandButton value="Previous" action="#{myBean.previousTab}" reRender="pnlMyTabPanel" immediate="true" />
<a4j:commandButton value="Next" action="#{myBean.nextTab}" reRender="pnlMyTabPanel" />
</rich:tab>

<rich:tab id="tab2" label="Tab Label Two" disabled="#{myBean.tabIndex != 2}">
...
</rich:tab>

</rich:tabPanel>

It works fine. I use the getCurrentTab() method as the rich:tabPanel didn't like me passing an int for selectedTab.