Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

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.

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.

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