Tab Server

Tabs can be created with one or more <tc:tab/> within a <tc:tabGroup>. Within a tab, content can be added like in a section or a panel.

Changing tabs is client side by default. To change them server side, the switchType attribute must have the value "reloadPage". All tab groups on this page are server side.

Tag Library Documentation: <tc:tabGroup/> | <tc:tab/> | <tc:tabChangeListener/>

Basics

A simple tab group. The second tab is disabled.

One

Two (disabled)

Three

First tab.

Header

This example show the different headers if the label or the image is used.

Only label

Label with image

Only a label is set.

<tc:tab label="Only label"/>

Open Folder Example

The image in the header depends on what tab is currently selected.

<tc:tabGroup selectedIndex="#{tabController.index}">

One

Two

Three

First folder open.

TabChangeListener

The <tc:tabChangeListener/> tag is used to bind a TabChangeListener. The TabChangeListener is an interface, which is implemented in this example by SimpleTabChangeListener.

<tc:tabChangeListener type="org.apache.myfaces.tobago.example
      .demo.actionlistener.SimpleTabChangeListener"
      binding="#{tabController.tabChangeListener}"/>

One

Two

Three

Changed to tab one.

OldTabIndex-1

NewTabIndex-1

ClientID

TabChangedCount0

Menu

Tab Server

Basics

Header

Open Folder Example

TabChangeListener