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.
To activate Ajax, the switchType
attribute must have the value "reloadTab".
On all tabgroups on this page, Ajax is activated.
Tag Library Documentation:
A simple tabgroup. The second tab is disabled.
This example show the different headers if the label
or the image
is used.
Only a label is set.
<tc:tab label="Only label"/>
A label and an image are set.
<tc:tab label="Label with image" image="\#{request.contextPath}/image/feather-leaf.png">
Only an image is set.
<tc:tab image="\#{request.contextPath}/image/feather-leaf.png">
Neither a label or an image are set. In this case the header gets a label with the indexnumber of the tab in the tabgroup.
The image in the header depends on what tab is currently selected.
<tc:tabGroup selectedIndex="\#{tabController.index}">
First folder open.
Second folder open.
Third folder open.
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}"/>
Changed to tab one.
Changed to tab two.
Changed to tab three.
If no switch type is activated with switchType="none"
, you have full control over the tab group.
In this example the tabs are used as buttons to refresh the timestamps. The functionallity of
switching the tab comes explicitly by adding the id of the tab group to the ajax tag.