Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JTabbedPane – Add Tabs Dynamically

1. Introduction to JTabbedPane

In Java Swing, JTabbedPane component groups the control in a Tab Page. User can navigate between tab pages to see the related information together. This is useful when an application wants to collect a high amount of information in an organised way from the user.

Each tab can hold one component and when such a component is a container (For Ex: Panel), a tab can hold N number of components in it. Using the addTab method, one can add any number of Tabs to a JTabbedPane.

The Tabs are housed by a Top-Level container, say, for example, JFrame or JDialog. When there are many numbers of tabs which cannot fit in a container, the Tab Layout Policy comes into picture. There are two layouts:

  • Scroll Fit
  • Wrap Fit

With Scroll Fit, JTabbedPane presents left and right arrows, and the user can view all the tabs by scrolling it. In the wrap style, when there is no room to fit a tab, it will go to the next line in the container. JTabbedPane provides a method setTabLayoutPolicy to know which tab arranging policy to use.

One can also set the tabs at four edges (Top, Left, Bottom, Right) of the container. JTabbedPane provides a method setTabPlacement to know which edge to be used to pack the tabs.

Youtube 1- JTabbedPane Basics

2. About The JTabbedPane Example

The JTabbedPane example we will create is below:

JTabbed Pane Example
JTabbed Pane Example

Marker 1 and 2 show the controls placed on a panel and the panel placed on the top portion of the Frame Window. The Marker 3 and 4 together form the JTabbedPane. Marker three shows three tabs: Person Name, Person Age and Education. This shows an idea of how we packed related information in a Tab. The above screen shows that the user is on the Person Name tab. To switch between the tabs, the user will click on the Tab Name.

Buttons Top, Bottom, Left and Right changes the tab placement. For example, if you click Left, the tabs will get arranged in the left edge of the Frame Window. The Radio buttons Scroll, and Wrap will decide how the JTabbedPane arranges the tabs when there is no space to fit-in the new tab.

YouTube 2: About JTabbedPane Example

3. Prepare Frame Window

First, we create a JFrame with a border layout. This frame window will hold the JTabbedPane we are going to create. At code snippet 2, we create JTabbedPane instance and hold the reference in a variable, TabbedPane. Later, we will add the Tab Sheets to it.

4. Prepare the TabSettingPanel

4.1 Add the Controls

Next, we create a class called TabSettingPanel, which extends from the JPanel class. Here, we will keep all the controls to adjust JTabbedPane settings and hence we hold the reference to the JTabbedPane (Snippet 3.1). The constructor initializes the TPane member and sets the flow layout.

In the addControls method, we create the controls required for this settings panel. Note, the settings panel already employs Flow Layout Manager to arrange the controls.

After adding the controls, the Panel will look like the below:

TopPanel - Used as Settings
TopPanel – Used as Settings

4.2 Tab Sheet Alignment

JTabbedPane provides constants TOP, LEFT, RIGHT, BOTTOM to denote where to align the Tab Page Titles. In the below code, we handle all our four button clicks to pack the tabs on the edge of its container. The method, setTabPlacement takes these constants and aligns the tabs.

The below picture shows Tab Alignment on all four edges:

Tab Alignment of JTabbedPane
Tab Alignment of JTabbedPane

4.3 Tab Layout Policy

JTabbedPane can arrange the tabs in two separate ways when space constraint arises. The Wrap Policy keeps the tab in a new line when there is no room in the current line. With Scroll Policy, JTabbedPane will keep all tabs in a same line with left & right arrows which aids in scrolling the tabs. This way, the tabs invisible in a container can be seen.

In our example, we handle the ItemEvent of the radio buttons Scroll, Wrap, and set a proper tab layout policy. The method setTabLayoutPolicy takes constant from the JTabbedPane and sets the needed layout policy. Below is the code:

The picture below shows the Tab Layout policy set with the constants WRAP_TAB_LAYOUT, SCROLL_TAB_LAYOUT.

JTabbedPane Tab Layout Policy
JTabbedPane Tab Layout Policy

5. Create Tab Pages for JTabbedPane

In the previous section, we implemented the code for Tab Settings. Now, we will create three sample tab pages which we will load into the JTabbedPane.

5.1 Name Panel

In our example, each JTabbedPane Sheet is JPanel container. This helps in housing more than one control on a tab sheet. Have a look at the below code for Person Name Tab Sheet:

We create a new class sub-classed from JPanel (Line 7). Then, we create three JLabels and JTextFields and add them to this NamePanel. Also note at, we set no layout manager to this JPanel (Line 11). This means it is panel’s responsibility to layout each component without employing any Layout Managers.

The setBounds method specifies the location and size of each component. First two parameter tells component’s location from the Top-left corner of the Panel and the next two parameters specify the component’s width and height. In our case, we used this method six times (Lines 21-23, 32-34) to lay-out all six controls in the container. Our NamePanel looks like below:

PersonName Panel
PersonName Panel

5.2 Person Age Panel

Here, we add two JLabel components, one JCheckBox and one JComboBox. This panel also does not use any layout manager and each component is laid-out by this panel itself by making use of the setBounds method.

Below Screen shows the Person Age Panel:

Age Panel
Age Panel

5.3 Person Education Panel

Here, we create a panel for a person’s education. This time, we use GridLayout (Line 17) with a grid size of 5×2. Means, 5 rows and 2 columns. Note, we have four empty labels (Lines 27-29) which will act as a filler in the Grid Layout. Our grid layout is having 10 cells and in which, we keep 4 cells as empty (Looks empty actually).

Lines (36-45), we add all the components also note how the filler labels are added to the Panel. The order in which we add the components is important so that filler labels sit in the correct slot of the grid layout manager.

The panel is shown below:

Education Panel
Education Panel

6. Adding Tabs to JTabbedPane Dynamically

At lines 2-3, we create all our Panels. These panels act as Tab Pages for the JTabbedPane. Next, we used addTab method of the JTabbedPane to add all our panels. The addTab method in our example, takes two params. First one denotes the tab page title and second one denotes actual component. Here, the component for the JTabbedPane is our JPanel with all its child controls.

After adding these JPanel, we added 9 more empty JPanels via the for loop. These extra tabs will help in understanding how the Layout Policy of JTabbedPane is working when there are no room for the Tabs.

7. Youtube: Code Implementation & Testing

Code Implementation

8. Code Reference







Categories: Swing

Tags: , , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.