How to Use Tabbed Panes

With the JTabbedPane class, you can have several components, such as panels, share the same space. The user chooses which component to view by selecting the tab corresponding to the desired component. If you want similar functionality without the tab interface, you can use a card layout instead of a tabbed pane.

To Create Tabbed Panes

To create a tabbed pane, instantiate JTabbedPane, create the components you wish it to display, and then add the components to the tabbed pane using the addTab method.

The following picture introduces an application called TabbedPaneDemo that has a tabbed pane with four tabs.

As the TabbedPaneDemo example shows, a tab can have a tool tip and a mnemonic, and it can display both text and an image.

Tab Placement

The default tab placement is set to the TOP location, as shown above. You can change the tab placement to LEFT, RIGHT, TOP or BOTTOM by using the setTabPlacement method.

Code for Tabbed Panes

The following code from TabbedPaneDemo.java creates the tabbed pane in the previous example. Note that no event-handling code is necessary. The JTabbedPane object takes care of mouse and keyboard events for you.

JTabbedPane tabbedPane = new JTabbedPane();
ImageIcon icon = createImageIcon("images/middle.gif");

JComponent panel1 = makeTextPanel("Panel #1");
tabbedPane.addTab("Tab 1", icon, panel1,
                  "Does nothing");
tabbedPane.setMnemonicAt(0, KeyEvent.VK_1);

JComponent panel2 = makeTextPanel("Panel #2");
tabbedPane.addTab("Tab 2", icon, panel2,
                  "Does twice as much nothing");
tabbedPane.setMnemonicAt(1, KeyEvent.VK_2);

JComponent panel3 = makeTextPanel("Panel #3");
tabbedPane.addTab("Tab 3", icon, panel3,
                  "Still does nothing");
tabbedPane.setMnemonicAt(2, KeyEvent.VK_3);

JComponent panel4 = makeTextPanel(
        "Panel #4 (has a preferred size of 410 x 50).");
panel4.setPreferredSize(new Dimension(410, 50));
tabbedPane.addTab("Tab 4", icon, panel4,
                      "Does nothing at all");
tabbedPane.setMnemonicAt(3, KeyEvent.VK_4);

As the previous code shows, the addTab method handles the bulk of the work in setting up a tab in a tabbed pane. The addTab method has several forms, but they all use both a string title and the component to be displayed by the tab. Optionally, you can specify an icon and tool tip string. The text or icon (or both) can be null. Another way to create a tab is to use the insertTab method, which lets you specify the index of the tab you're adding. Note that the addTab method does not allow index specification in this step.

To Switch to Specific Tabs

There are three ways to switch to specific tabs using GUI.

1. Using a mouse. To switch to a specific tab, the user clicks it with the mouse.
2. Using keyboard arrows. When the JTabbedPane object has the focus, the keyboard arrows can be used to switch from tab to tab.
3. Using key mnemonics. The setMnemonicAt method allows the user to switch to a specific tab using the keyboard. For example, setMnemonicAt(3, KeyEvent.VK_4) makes '4' the mnemonic for the fourth tab (which is at index 3, since the indices start with 0); pressing Alt-4 makes the fourth tab's component appear. Often, a mnemonic uses a character in the tab's title that is then automatically underlined.

To switch to a specific tab programmatically, use the setSelectedIndex or the setSelectedComponent methods.

Preferred Size in Tabs

When building components to add to a tabbed pane, keep in mind that no matter which child of a tabbed pane is visible, each child gets the same amount of space in which to display itself. The preferred size of the tabbed pane is just big enough to display its tallest child at its preferred height, and its widest child at its preferred width. Similarly, the minimum size of the tabbed pane depends on the biggest minimum width and height of all its children.

In the TabbedPaneDemo example, the fourth panel has a preferred width and height that are larger than those of the other panels. Thus, the preferred size of the tabbed pane is just big enough to display the fourth panel at its preferred size. Every panel gets exactly the same amount of space — 410 pixels wide and 50 high, assuming the tabbed pane is at its preferred size. If you do not understand how preferred size is used, please refer to How Layout Management Works.

Tabs With Custom Components

The TabComponentsDemo example introduces a tabbed pane whose tabs contain real components. The use of custom components brings new features such as buttons, combo boxes, labels and other components to tabs, and allows more complex user interaction.

Here is a tabbed pane with close buttons on its tabs.

To Remove Tabs

The following code from ButtonTabComponent.java removes a tab from the tabbed pane. Note that event-handling code is necessary. Since each tab contains a real JButton object, you must attach an ActionListener to the close button. As the user clicks the button, the actionPerformed method determines the index of the tab it belongs to and removes the corresponding tab.

public void actionPerformed(ActionEvent e) {
    int i = pane.indexOfTabComponent(ButtonTabComponent.this);
    if (i != -1) {
    pane.remove(i);
    }
}

To Give Titles to Customized Tabs

The code below, taken from ButtonTabComponent.java, shows how a customized tab component gets a title from an original tabbed pane tab.

JLabel label = new JLabel(title) {
    public String getText() {
        int i = pane.indexOfTabComponent(ButtonTabComponent.this);
        if (i != -1) {
            return pane.getTitleAt(i);
        }
        return null;
    }
};

The Tabbed Pane API

The following tables list the commonly used JTabbedPane constructors and methods. The API for using tabbed panes falls into the following categories:

• Creating and Setting Up a Tabbed Pane
• Inserting, Removing, Finding, and Selecting Tabs
• Changing Tab Appearance
• Setting Up Custom Components on Tabs

Examples That Use Tabbed Panes

This table lists examples that use JTabbedPane and points to where those examples are described.