Tobago Demo

Menu

» Root Dummy » Intro » Input » Output » Select » Command » Container » Popup » Popover » Toast » Tab Group » Tab Client » Tab Ajax » Tab Server » Sheet » Tree » File Upload » WYSIWYG Editor » Layout » Collapsible » Partial Ajax » Behavior » Form » Validation » Conversion » Format » Theme » Styling » Browser » Locale » AccessKey » DataAttribute » Focus » Meta » Icons » Security » Error Handling » Exception Handler » For Each » Resize » Conversation » WebSocket » Transition » Non Faces Response » Non Faces Request » Configuration
» Root Dummy » Intro » Input » Output » Select » Command » Container » Popup » Popover » Toast » Tab Group » Tab Client » Tab Ajax » Tab Server » Sheet » Tree » File Upload » WYSIWYG Editor » Layout » Collapsible » Partial Ajax » Behavior » Form » Validation » Conversion » Format » Theme » Styling » Browser » Locale » AccessKey » DataAttribute » Focus » Meta » Icons » Security » Error Handling » Exception Handler » For Each » Resize » Conversation » WebSocket » Transition » Non Faces Response » Non Faces Request » Configuration

Tab Ajax

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 tab groups on this page, Ajax is activated.

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

Basics

A simple tab group. The second tab is disabled.

First tab.

Header

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

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}">

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}"/>

Changed to tab one.

Data from the tab group above

-1 0

SwitchType='none'

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.

One

Area outsite of the tab group

1747093014469 1747093014469 1747093014469
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.