TabSheet

    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. If there are more tabs than fit in the tab bar, navigation buttons will appear.

    A Simple TabSheet 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.

    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.

    Java

    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.

    Java

    2. tabsheet.addTab(myTab).setCaption("My Tab");

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

    tabsheet example2

    A TabSheet with Hidden and Disabled Tabs

    Clicking on a tab selects it. This fires a TabSheet.SelectedTabChangeEvent, which you can handle by implementing the TabSheet.SelectedTabChangeListener interface. You can access the tabsheet of the event with getTabSheet(), and find the new selected tab with getSelectedTab().

    You can programmatically select a tab with setSelectedTab(), which also fires the SelectedTabChangeEvent (beware of recursive events). Reselecting the currently selected tab does not fire the event.

    Notice that when the first tab is added, it is selected and the change event is fired, so if you want to catch that, you need to add your listener before adding any tabs.

    In the following example, we create the tabs as empty content layouts, and add the tab content dynamically when a tab is selected:

    Java

    Java

    1. tabsheet.getTab(tabComponent).setClosable(true);

    TabSheet with Closable Tabs

    You can handle closing tabs by implementing a custom TabSheet.CloseHandler. The default implementation simply calls removeTab() for the tab to be closed, but you can prevent the close by not calling it. This allows, for example, opening a dialog window to confirm the close.

    Java

    CSS

    1. .v-tabsheet {}
    2. .v-tabsheet-tabs {}
    3. .v-tabsheet-content {}
    4. .v-tabsheet-deco {}
    6. .v-tabsheet-tabsheetpanel {}
    7. .v-tabsheet-hidetabs {}
    9. .v-tabsheet-scroller {}
    10. .v-tabsheet-scrollerNext {}
    11. .v-tabsheet-scrollerPrev-disabled{}
    14. .v-tabsheet-tabitem {}
    15. .v-tabsheet-tabitem-selected {}
    16. .v-tabsheet-tabitemcell {}
    17. .v-tabsheet-tabitemcell-first {}
    19. .v-tabsheet-tabs td {}

    The entire tabsheet has the v-tabsheet style. A tabsheet consists of three main parts: the tabs on the top, the main content pane, and decorations around the tabsheet.

    The tabs area at the top can be styled with v-tabsheet-tabs, v-tabsheet-tabcontainer and v-tabsheet-tabitem*.

    The content area where the tab contents are shown can be styled with v-tabsheet-content, and the surrounding decoration with v-tabsheet-deco.