Tab panel is used to create "tabbed" pages. RichFaces tab panel can be switched in 3 ways: using "normal" server-side update, using "ajax" style update, when only tab panel area is updated on the page, and using "client" type, without any interaction with the server. Note, that in case of a "client" switch type, all tabs are rendered at the same time.

Tab Panel example

Here is an example of default tab panel with 3 tabs.

First Second Third

Here is tab #1

Here is an example of tab panel switched in "ajax" style. Second tab is disabled.

First Second Third

Here is tab #1

Here is an example of tab panel switched completely on client.

First Second Third
Here is tab #1	Here is tab #2	Here is tab #3

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <p>Here is an example of default tab panel with 3 tabs.</p>
    <rich:tabPanel>
        <rich:tab label="First">
            Here is tab #1
        </rich:tab>
        <rich:tab label="Second">
            Here is tab #2
        </rich:tab>
        <rich:tab label="Third">
            Here is tab #3
        </rich:tab>
    </rich:tabPanel>
    <br/><br/>
    <p>Here is an example of tab panel switched in "ajax" style. Second tab is disabled.</p>
    <rich:tabPanel switchType="ajax">
        <rich:tab label="First">
            Here is tab #1
        </rich:tab>
        <rich:tab label="Second" disabled="true">
            Here is tab #2
        </rich:tab>
        <rich:tab label="Third">
            Here is tab #3
        </rich:tab>
    </rich:tabPanel>
    <br/><br/>
    <p>Here is an example of tab panel switched completely on client.</p>
    <rich:tabPanel switchType="client">
        <rich:tab label="First">
            Here is tab #1
        </rich:tab>
        <rich:tab label="Second">
            Here is tab #2
        </rich:tab>
        <rich:tab label="Third">
            Here is tab #3
        </rich:tab>
    </rich:tabPanel>

</ui:composition>

<<Hide Source