Vaadin

Join Vaadin Log In

The TabSheet is a multicomponent container that allows switching between the components with "tabs". The tabs are organized as a tab bar at the top of the tab sheet. Clicking on a tab opens its contained component in the main display area of the layout.

You add new tabs to a tab sheet with the addTab() method. The simple version of the method takes as its parameter the root component of the tab. You can use the root component to retrieve its corresponding Tab object. Typically, you put a layout component as the root component.

// Create an empty tab sheet.
TabSheet tabsheet = new TabSheet();
// Create a component to put in a tab and put
// some content in it.
VerticalLayout myTabRoot = new VerticalLayout();
myTabRoot.addComponent(new Label("Hello, I am a Tab!"));
// Add the component to the tab sheet as a new tab.
tabsheet.addTab(myTabRoot);
// Get the Tab holding the component and set its caption.
tabsheet.getTab(myTabRoot).setCaption("My Tab");

Each tab in a tab sheet is represented as a Tab object, which manages the tab caption, icon, and attributes such as hidden and visible. You can set the caption with setCaption() and the icon with setIcon(). If the component added with addTab() has a caption or icon, it is used as the default for the Tab object. However, changing the attributes of the root component later does not affect the tab, but you must make the setting through the Tab object. The addTab() returns the new Tab object, so you can easily set an attribute using the reference.

// Set an attribute using the returned reference
tabsheet.addTab(myTab).setCaption("My Tab");

You can also give the caption and the icon as parameters for the addTab() method. The following example demonstrates the creation of a simple tab sheet, where each tab shows a different Label component. The tabs have an icon, which are (in this example) loaded as Java class loader resources from the application.

TabSheet tabsheet = new TabSheet();
// Make the tabsheet shrink to fit the contents.
tabsheet.setSizeUndefined();
tabsheet.addTab(new Label("Contents of the first tab"),
          "First Tab",
          new ClassResource("images/Mercury_small.png", this));
tabsheet.addTab(new Label("Contents of the second tab"),
          "Second Tab",
          new ClassResource("images/Venus_small.png", this));
tabsheet.addTab(new Label("Contents of the third tab"),
          "Third tab",
          new ClassResource("images/Earth_small.png", this));

The hideTabs() method allows hiding the tab bar entirely. This can be useful in tabbed document interfaces (TDI) when there is only one tab. An individual tab can be made invisible by setting setVisible(false) for the Tab object. A tab can be disabled by setting setEnabled(false).

Clicking on a tab selects it. This fires a TabSheet.SelectedTabChangeEvent, which you can handle by implementing the TabSheet.SelectedTabChangeListener interface. The source component of the event, which you can retrieve with getSource() method of the event, will be the TabSheet component. You can find the currently selected tab with getSelectedTab() and select (open) a particular tab programmatically with setSelectedTab(). Notice that also adding the first tab fires the SelectedTabChangeEvent, which may cause problems in your handler if you assume that everything is initialized before the first change event.

The example below demonstrates handling TabSheet related events and enabling and disabling tabs. The sort of logic used in the example is useful in sequential user interfaces, often called wizards, where the user goes through the tabs one by one, but can return back if needed.

import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.TabSheet.SelectedTabChangeEvent;
public class TabSheetExample extends CustomComponent implements
      Button.ClickListener, TabSheet.SelectedTabChangeListener {
    TabSheet tabsheet = new TabSheet();
    Button tab1 = new Button("Push this button");
    Label tab2 = new Label("Contents of Second Tab");
    Label tab3 = new Label("Contents of Third Tab");
    TabSheetExample() {
        setCompositionRoot(tabsheet);
        // Listen for changes in tab selection.
        tabsheet.addListener(this);
        // First tab contains a button, for which we
        // listen button click events.
        tab1.addListener(this);
        
        // This will cause a selectedTabChange() call.
        tabsheet.addTab(tab1, "First Tab", null);
        // A tab that is initially invisible.
        tabsheet.addTab(tab2, "Second Tab", null);
        tabsheet.getTab(tab2).setVisible(false);
        // A tab that is initially disabled.
        tabsheet.addTab(tab3, "Third tab", null);
        tabsheet.getTab(tab3).setEnabled(false);
    }
    public void buttonClick(ClickEvent event) {
        // Enable the invisible and disabled tabs.
        tabsheet.getTab(tab2).setVisible(true);
        tabsheet.getTab(tab3).setEnabled(true);
        // Change selection automatically to second tab.
        tabsheet.setSelectedTab(tab2);
    }
    public void selectedTabChange(SelectedTabChangeEvent event) {
        // Cast to a TabSheet. This isn't really necessary in
        // this example, as we have only one TabSheet component,
        // but would be useful if there were multiple TabSheets.
        final TabSheet source = (TabSheet) event.getSource();
        if (source == tabsheet) {
            // If the first tab was selected.
            if (source.getSelectedTab() == tab1) {
                // The 2. and 3. tabs may not have been set yet.
                if (tabsheet.getTab(tab2) != null
                    && tabsheet.getTab(tab3) != null) {
                    tabsheet.getTab(tab2).setVisible(false);
                    tabsheet.getTab(tab3).setEnabled(false);
                }
            }
        }
    }
}

Table of Contents

Preface
1. Introduction
1.1. Overview
1.2. Example Application Walkthrough
1.3. Support for the Eclipse IDE
1.4. Goals and Philosophy
1.5. Background
2. Getting Started with Vaadin
2.1. Installing Vaadin
2.2. Setting up the Development Environment
2.3. QuickStart with Eclipse
2.4. Your First Project with Vaadin
3. Architecture
3.1. Overview
3.2. Technological Background
3.3. Applications as Java Servlet Sessions
3.4. Client-Side Engine
3.5. Events and Listeners
4. Writing a Web Application
4.1. Overview
4.2. Managing the Main Window
4.3. Child Windows
4.4. Handling Events with Listeners
4.5. Referencing Resources
4.6. Shutting Down an Application
4.7. Handling Errors
4.8. Setting Up the Application Environment
5. User Interface Components
5.1. Overview
5.2. Interfaces and Abstractions
5.3. Common Component Features
5.4. Label
5.5. Link
5.6. TextField
5.7. RichTextArea
5.8. Date and Time Input
5.9. Button
5.10. CheckBox
5.11. Selecting Items
5.12. Table
5.13. Tree
5.14. MenuBar
5.15. Embedded
5.16. Upload
5.17. Form
5.18. ProgressIndicator
5.19. Slider
5.20. Component Composition with CustomComponent
6. Managing Layout
6.1. Overview
6.2. Window and Panel Root Layout
6.3. VerticalLayout and HorizontalLayout
6.4. GridLayout
6.5. FormLayout
6.6. Panel
6.7. SplitPanel
6.8. TabSheet
6.9. Accordion
6.10. Layout Formatting
6.11. Custom Layouts
7. Visual User Interface Design with Eclipse (experimental)
7.1. Overview
7.2. Creating a New CustomComponent
7.3. Using The Visual Editor
7.4. Structure of a Visually Editable Component
8. Themes
8.1. Overview
8.2. Introduction to Cascading Style Sheets
8.3. Creating and Using Themes
8.4. Creating a Theme in Eclipse
9. Binding Components to Data
9.1. Overview
9.2. Properties
9.3. Holding properties in Items
9.4. Collecting items in Containers
10. Developing Custom Components
10.1. Overview
10.2. Doing It the Simple Way in Eclipse
10.3. Google Web Toolkit Widgets
10.4. Integrating a GWT Widget
10.5. Defining a Widget Set
10.6. Server-Side Components
10.7. Using a Custom Component
10.8. GWT Widget Development
11. Advanced Web Application Topics
11.1. Special Characteristics of AJAX Applications
11.2. Application-Level Windows
11.3. Embedding Applications in Web Pages
11.4. Debug and Production Mode
11.5. Resources
11.6. Shortcut Keys
11.7. Printing
11.8. Portal Integration
11.9. Google App Engine Integration
11.10. Common Security Issues
11.11. URI Fragment and History Management with UriFragmentUtility
11.12. Capturing HTTP Requests
A. User Interface Definition Language (UIDL)
A.1. API for Painting Components
A.2. JSON Rendering
B. Songs of Vaadin
Index