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.
2. About The JTabbedPane Example
The JTabbedPane example we will create is below:
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@SuppressWarnings("serial") public class JFrameDemo extends JFrame { //Sample 02: Create Tabbed Pane JTabbedPane TabbedPane = new JTabbedPane(); @SuppressWarnings({ "rawtypes", "unchecked" }) public JFrameDemo(String title) throws HeadlessException { super(title); //Sample 01: Set Size and Position setBounds(100, 100, 450, 250); Container ControlHost = getContentPane(); ControlHost.setLayout(new BorderLayout()); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public class TabSettingPanel extends JPanel { //3.1: To Apply the Settings private JTabbedPane TPane; //3.2: Constructor public TabSettingPanel(JTabbedPane TPane) { super(); this.TPane = TPane; setLayout(new FlowLayout()); addControls(); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
private void addControls() { //3.3: Create Controls for Tab Settings JButton BtnTop = new JButton("Top"); JButton BtnBottom = new JButton("Bottom"); JButton BtnLeft = new JButton("Left"); JButton BtnRight = new JButton("Right"); JRadioButton radTabScroll = new JRadioButton("Scroll"); JRadioButton radTabWrap = new JRadioButton("Wrap"); ButtonGroup g1 = new ButtonGroup(); g1.add(radTabScroll); g1.add(radTabWrap); radTabWrap.setSelected(true); //3.4: Add Controls to Panel add(BtnTop); add(BtnBottom); add(BtnLeft); add(BtnRight); add(radTabScroll); add(radTabWrap); |
After adding the controls, the Panel will look like the below:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//3.5: Hook Button Events BtnTop.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.TOP); } }); BtnBottom.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.BOTTOM); } }); BtnLeft.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.LEFT); } }); BtnRight.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.RIGHT); } }); |
The below picture shows Tab Alignment on all four edges:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//3.6: Hook Radio Events radTabWrap.addItemListener(new ItemListener() { @Override public void itemStateChanged(ItemEvent e) { if (radTabWrap.isSelected()) TPane.setTabLayoutPolicy(JTabbedPane.WRAP_TAB_LAYOUT); } }); radTabScroll.addItemListener(new ItemListener() { @Override public void itemStateChanged(ItemEvent e) { if (radTabScroll.isSelected()) TPane.setTabLayoutPolicy(JTabbedPane.SCROLL_TAB_LAYOUT); } }); |
The picture below shows the Tab Layout policy set with the constants WRAP_TAB_LAYOUT, SCROLL_TAB_LAYOUT.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
package tube.coding.examples; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTextField; public class NamePanel extends JPanel { public NamePanel() { super(); setLayout(null); addControls(); } private void addControls() { //5.1 Set the Labels JLabel lbl1 = new JLabel("First Name"); JLabel lbl2 = new JLabel("Middle Name"); JLabel lbl3 = new JLabel("Last Name"); lbl1.setBounds(10,10,100,30); lbl2.setBounds(10,50,100,30); lbl3.setBounds(10,90,100,30); add(lbl1); add(lbl2); add(lbl3); //5.2 Set the Text Boxes JTextField txt1 = new JTextField(); JTextField txt2 = new JTextField(); JTextField txt3 = new JTextField(); txt1.setBounds(100,10,200,30); txt2.setBounds(100,50,100,30); txt3.setBounds(100,90,200,30); add(txt1); add(txt2); add(txt3); } } |
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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
//Sample 06: Create Age Panel package tube.coding.examples; import javax.swing.JCheckBox; import javax.swing.JComboBox; import javax.swing.JLabel; import javax.swing.JPanel; public class AgePanel extends JPanel { //6.1: Constructor public AgePanel() { super(); setLayout(null); addControls(); } @SuppressWarnings({ "unchecked", "rawtypes" }) private void addControls() { //6.2: Create Controls JComboBox JcboAge = new JComboBox(); JCheckBox JChkSex = new JCheckBox("Male"); JLabel lbl1 = new JLabel("Age :"); JLabel lbl2 = new JLabel("Sex :"); //6.3: Add Age Strings to Combo box for (int age=0; age<151; age++) JcboAge.addItem(age); //6.4: Set Size and Position lbl1.setBounds(10, 10, 50, 30); lbl2.setBounds(10, 40, 50, 30); JcboAge.setBounds(60, 10, 50, 30); JChkSex.setBounds(60, 40, 80,30); //6.5: Add Controls add(lbl1); add(lbl2); add(JcboAge); add(JChkSex); } } |
Below Screen shows the Person 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
//Sample 07: Create Name Panel package tube.coding.examples; import java.awt.GridLayout; import javax.swing.JCheckBox; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTextField; import javax.swing.SwingConstants; public class EduPanel extends JPanel { //7.1: Constructor public EduPanel() { super(); setLayout(new GridLayout(5,2)); addControls(); } private void addControls() { //7.2: Create Controls JLabel lbl1 = new JLabel("Education"); JLabel lbl2 = new JLabel("Work"); JLabel filler1 = new JLabel(""); JLabel filler2 = new JLabel(""); JLabel filler3 = new JLabel(""); JLabel filler4 = new JLabel(""); JTextField JtxtEdu = new JTextField(); JCheckBox JchkGovt = new JCheckBox("Govt. Employee"); JCheckBox JchkCorp = new JCheckBox("Corporate Employee"); JCheckBox JchkSelf = new JCheckBox("Self Business"); //7.3: Add Controls to Combo Box add(lbl1); add(JtxtEdu); add(lbl2); add(filler1); add(filler2); add(JchkGovt); add(filler3); add(JchkCorp); add(filler4); add(JchkSelf); } } |
The panel is shown below:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//Sample 08: Create the Panels (Acts as Tab Sheets) NamePanel tabName = new NamePanel(); AgePanel tabAge = new AgePanel(); EduPanel tabEdu = new EduPanel(); //Sample 09: Add Panels as Tab TabbedPane.addTab("Person Name", tabName); TabbedPane.addTab("Person Age", tabAge); TabbedPane.addTab("Education", tabEdu); TabbedPane.setTabLayoutPolicy(JTabbedPane.WRAP_TAB_LAYOUT); //Sample AB: Testing Code Add Dummy Panes for (int i=1; i<9; i++) TabbedPane.addTab("Tab " + String.valueOf(i), new JPanel()); ControlHost.add(TabbedPane); |
7. Youtube: Code Implementation & Testing
8. Code Reference
8.1 MainEntry.java
|
1 2 3 4 5 6 7 8 9 |
package tube.coding.examples; public class MainEntry { public static void main(String[] args) { //Sample 06: Create Instance of JFrameDemo JTabbedPaneExample frame = new JTabbedPaneExample("JTabbedPane Example"); frame.setVisible(true); } } |
8.2 NamePanel.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
//Sample 05: Create Name Panel package tube.coding.examples; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTextField; public class NamePanel extends JPanel { public NamePanel() { super(); setLayout(null); addControls(); } private void addControls() { //5.1 Set the Labels JLabel lbl1 = new JLabel("First Name"); JLabel lbl2 = new JLabel("Middle Name"); JLabel lbl3 = new JLabel("Last Name"); lbl1.setBounds(10,10,100,30); lbl2.setBounds(10,50,100,30); lbl3.setBounds(10,90,100,30); add(lbl1); add(lbl2); add(lbl3); //5.2 Set the Text Boxes JTextField txt1 = new JTextField(); JTextField txt2 = new JTextField(); JTextField txt3 = new JTextField(); txt1.setBounds(100,10,200,30); txt2.setBounds(100,50,100,30); txt3.setBounds(100,90,200,30); add(txt1); add(txt2); add(txt3); } } |
8.3 AgePanel.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
//Sample 06: Create Name Panel package tube.coding.examples; import javax.swing.JCheckBox; import javax.swing.JComboBox; import javax.swing.JLabel; import javax.swing.JPanel; public class AgePanel extends JPanel { //6.1: Constructor public AgePanel() { super(); setLayout(null); addControls(); } @SuppressWarnings({ "unchecked", "rawtypes" }) private void addControls() { //6.2: Create Controls JComboBox JcboAge = new JComboBox(); JCheckBox JChkSex = new JCheckBox("Male"); JLabel lbl1 = new JLabel("Age :"); JLabel lbl2 = new JLabel("Sex :"); //6.3: Add Age Strings to Combo box for (int age=0; age<151; age++) JcboAge.addItem(age); //6.4: Set Size and Position lbl1.setBounds(10, 10, 50, 30); lbl2.setBounds(10, 40, 50, 30); JcboAge.setBounds(60, 10, 50, 30); JChkSex.setBounds(60, 40, 80,30); //6.5: Add Controls add(lbl1); add(lbl2); add(JcboAge); add(JChkSex); } } |
8.4 EduPanel.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
package tube.coding.examples; import java.awt.GridLayout; import javax.swing.JCheckBox; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTextField; import javax.swing.SwingConstants; public class EduPanel extends JPanel { //7.1: Constructor public EduPanel() { super(); setLayout(new GridLayout(5,2)); addControls(); } private void addControls() { //7.2: Create Controls JLabel lbl1 = new JLabel("Education"); JLabel lbl2 = new JLabel("Work"); JLabel filler1 = new JLabel(""); JLabel filler2 = new JLabel(""); JLabel filler3 = new JLabel(""); JLabel filler4 = new JLabel(""); JTextField JtxtEdu = new JTextField(); JCheckBox JchkGovt = new JCheckBox("Govt. Employee"); JCheckBox JchkCorp = new JCheckBox("Corporate Employee"); JCheckBox JchkSelf = new JCheckBox("Self Business"); //7.3: Add Controls to Combo Box add(lbl1); add(JtxtEdu); add(lbl2); add(filler1); add(filler2); add(JchkGovt); add(filler3); add(JchkCorp); add(filler4); add(JchkSelf); } } |
8.5 TabSettingPanel.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
//Sample 03: Create the TabSettings Panel package tube.coding.examples; import java.awt.FlowLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.ItemEvent; import java.awt.event.ItemListener; import javax.swing.ButtonGroup; import javax.swing.JButton; import javax.swing.JPanel; import javax.swing.JRadioButton; import javax.swing.JTabbedPane; public class TabSettingPanel extends JPanel { //3.1: To Apply the Settings private JTabbedPane TPane; //3.2: Constructor public TabSettingPanel(JTabbedPane TPane) { super(); this.TPane = TPane; setLayout(new FlowLayout()); addControls(); } private void addControls() { //3.3: Create Controls for Tab Settings JButton BtnTop = new JButton("Top"); JButton BtnBottom = new JButton("Bottom"); JButton BtnLeft = new JButton("Left"); JButton BtnRight = new JButton("Right"); JRadioButton radTabScroll = new JRadioButton("Scroll"); JRadioButton radTabWrap = new JRadioButton("Wrap"); ButtonGroup g1 = new ButtonGroup(); g1.add(radTabScroll); g1.add(radTabWrap); radTabWrap.setSelected(true); //3.4: Add Controls to Panel add(BtnTop); add(BtnBottom); add(BtnLeft); add(BtnRight); add(radTabScroll); add(radTabWrap); //3.5: Hook Button Events BtnTop.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.TOP); } }); BtnBottom.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.BOTTOM); } }); BtnLeft.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.LEFT); } }); BtnRight.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { TPane.setTabPlacement(JTabbedPane.RIGHT); } }); //3.6: Hook Radio Events radTabWrap.addItemListener(new ItemListener() { @Override public void itemStateChanged(ItemEvent e) { if (radTabWrap.isSelected()) TPane.setTabLayoutPolicy(JTabbedPane.WRAP_TAB_LAYOUT); } }); radTabScroll.addItemListener(new ItemListener() { @Override public void itemStateChanged(ItemEvent e) { if (radTabScroll.isSelected()) TPane.setTabLayoutPolicy(JTabbedPane.SCROLL_TAB_LAYOUT); } }); } } |
8.6 JTabbedPaneExample.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
package tube.coding.examples; import java.awt.BorderLayout; import java.awt.Container; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.HeadlessException; import java.awt.event.ItemEvent; import java.awt.event.ItemListener; import javax.swing.JComboBox; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTabbedPane; import javax.swing.JTextField; @SuppressWarnings("serial") public class JTabbedPaneExample extends JFrame { //Sample 02: Create Tabbed Pane JTabbedPane TabbedPane = new JTabbedPane(); @SuppressWarnings({ "rawtypes", "unchecked" }) public JTabbedPaneExample(String title) throws HeadlessException { super(title); //Sample 01: Set Size and Position setBounds(100, 100, 450, 250); Container ControlHost = getContentPane(); ControlHost.setLayout(new BorderLayout()); //Sample 04: Create the Tab Setting Panel TabSettingPanel TopPanel = new TabSettingPanel(TabbedPane); ControlHost.add(TopPanel, BorderLayout.NORTH); //Sample 08: Create the Panels (Acts as Tab Sheets) NamePanel tabName = new NamePanel(); AgePanel tabAge = new AgePanel(); EduPanel tabEdu = new EduPanel(); //Sample 09: Add Panels as Tab TabbedPane.addTab("Person Name", tabName); TabbedPane.addTab("Person Age", tabAge); TabbedPane.addTab("Education", tabEdu); TabbedPane.setTabLayoutPolicy(JTabbedPane.WRAP_TAB_LAYOUT); //Sample AB: Testing Code Add Dummy Panes for (int i=1; i<9; i++) TabbedPane.addTab("Tab " + String.valueOf(i), new JPanel()); ControlHost.add(TabbedPane); } } |
Categories: Swing
Tags: addTab, SCROLL_TAB_LAYOUT, setTabLayoutPolicy, setTabPlacement, WRAP_RAB_LAYOUT
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.