Feedback Request New Tips Print Email

How to set selected tab in rich:tabPanel tag?

Author : JavaBeat
Date : Sat Apr 12th, 2008
Topic : jsf

Topic : Java Server Faces (JSF), RichFaces, Ajax4Jsf
Environment : J2EE 5.0, MyFaces 1.1.5, RichFaces 3.1.0
Discuss Here

rich:tabPanel

This example illustrates how to set the selected tab in rich:tabPanel. This tag is used for creating the multiple tabs with in same page and allowing user to populate the each tab with different data. RichFaces provides three types of mechanism to fetch the data from server. They are: client,server and ajax. These values are used in the attribute called switchType. Our example uses switchType as client.

switchType="client"

If the switchType is "client", then all the data will be reterived from the server and stored in the client. When you select different tabs, javascript is used for dsiplaying the data. This is the fastest solution compare to other approaches.

switchType="server"

If the switchType is "server", then the data will be reterived from the server for every request. The page will be refreeshed for the each request.

switchType="ajax"

If the switchType is "ajax", then the data will be reterived from the server for ever request. The page will not be refreeshed for the each request because we are using ajax call to the server.

selectedTab attribute

selectedTab attribute is used for setting the default selected tab in the rich:tabPanel. If you are not providing the correct tab name to this attribute, it will throw java.lang.IllegalStateException: No active tabs!.

<rich:tabPanel selectedTab="TabName1" switchType="client"> specifies the default tab as "Tabname1". The "TabName1" is the name of the tabs used in rich:tab.

selectedTab.jsp

	
<!--
   Source : www.javabeat.net
-->
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich" %>

<html>
    <body>
          <f:view>
              <h:form id="select">
                  <rich:tabPanel selectedTab="TabName1" switchType="client">
                      <rich:tab name="TabName1" label="Java">
                          <!-- Tab content here -->
                          <h:outputText value="Sample Text 1"/>
                      </rich:tab>
                      <rich:tab name="TabName2" label="J2EE">
                          <!-- Tab content here -->
                          <h:outputText value="Sample Text 2"/>
                      </rich:tab>
                      <rich:tab name="TabName3" label="Java Server Faces">
                          <!-- Tab content here -->
                          <h:outputText value="Sample Text 3"/>
                      </rich:tab>                      
                  </rich:tabPanel>
              </h:form>
          </f:view>
    </body>
</html>