How to use layout managers when building a GUI with JFrame and JPanel?

Question

I am trying to build a GUI that looks something like this:

Main idea is to have buttons on the side and a table displaying results.

Here is the code I have so far:

public class GUI {

    private JButton usdJpyButton = new JButton("USD/JPY");
    private JButton usdGbpButton = new JButton("USD/GBP");

    public void mainScreen(){

        JFrame frame = new JFrame("Window");
        frame.setDefaultCloseOperation(JFrame.HIDE_ON_CLOSE);
        frame.setSize(900,600);
        frame.setResizable(false);
        frame.setLocationRelativeTo(null);

        GridLayout layout = new GridLayout(0,4);
        frame.setLayout(layout);


        JPanel sidePanel = new JPanel(new GridBagLayout());
        sidePanel.setBackground(Color.black);

        GridBagConstraints cons = new GridBagConstraints();
        cons.insets = new Insets(50,0,0,0);
        cons.gridy = 1;
        cons.anchor = GridBagConstraints.NORTH;

        sidePanel.add(usdJpyButton);

        cons.gridy = 2;

        sidePanel.add(usdGbpButton);

        frame.add(sidePanel);
        frame.setVisible(true);

    }

The buttons are not aligned and I am not sure which layout manager I should use for the best results. Also each button will have an action listener to a different table so do I need to create seperate JPanels for each table??

Answer 1

I would recommend MigLayout manager.

It is not particularly difficult to do it with this manager.

package com.zetcode;

import java.awt.EventQueue;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JComponent;
import javax.swing.JFrame;
import static javax.swing.JFrame.EXIT_ON_CLOSE;
import javax.swing.JOptionPane;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import net.miginfocom.swing.MigLayout;

public class InstaMetrixEx extends JFrame implements ActionListener {

    public InstaMetrixEx() {

        initUI();
    }

    private void initUI() {

        JButton btn1 = new JButton("Client Overview");
        JButton btn2 = new JButton("Seo Reports");
        JButton btn3 = new JButton("Social media reports");
        JButton btn4 = new JButton("Campaigns");
        JButton btn5 = new JButton("Webmaster tools");
        JButton btn6 = new JButton("Dashboard");
        JButton btn7 = new JButton("Tasks");

        JComboBox combo1 = new JComboBox();
        combo1.addItem("Bulk actions");

        JButton btn8 = new JButton("Submit");

        JTable table = new JTable(20, 7);
        JScrollPane spane = new JScrollPane(table);

        createLayout(btn1, combo1, btn8, btn2, btn3, btn4,
                btn5, btn6, btn7, spane );

        setTitle("InstaMetrixEx");
        setLocationRelativeTo(null);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    private void createLayout(JComponent... arg) {

        setLayout(new MigLayout());

        add(arg[0], "sgx");
        add(arg[1], "gapx 10lp, split 2");
        add(arg[2], "wrap");
        add(arg[3], "split 6, aligny top, flowy, sgx");
        add(arg[4], "sgx");
        add(arg[5], "sgx");
        add(arg[6], "sgx");
        add(arg[7], "sgx");
        add(arg[8], "sgx");

        add(arg[9], "gapx 10lp, spanx, wrap, push, grow");

        pack();
    }

    @Override
    public void actionPerformed(ActionEvent e) {

        JOptionPane.showMessageDialog(this, "Button clicked",
                "Information", JOptionPane.INFORMATION_MESSAGE);
    }

    public static void main(String[] args) {

        EventQueue.invokeLater(() -> {
            InstaMetrixEx ex = new InstaMetrixEx();
            ex.setVisible(true);
        });
    }
}

Screenshot:

Answer 2

I am not sure which layout manager I should use for the best results.

Rarely do you ever use a single layout manager. Generally you will nest panels each using a different layout manager to achieve your desired effect.

Read the section from the Swing tutorial on Layout Managers for working examples of each layout manager.

In this case you would probably need two panels, one for the buttons and one for the panels to display when you click on the button.

So for the buttons you might create a panel using BorderLayout. Then you create a second panel using a GridLayout. You add your buttons to the panel with the GridLayout. Then you add this panel to the PAGE_START of the BorderLayout. Then you add this panel to the LINE_START of the BorderLayout used by the content pane of the frame.

Then for the panel to display each table you would use a CardLayout. Then you create a separate panel for each currency table and add it to the CardLayout. You would add this panel to the CENTER of the BorderLayout of the content pane.

Then in the ActionListener of your buttons you swap the panel in the CardLayout based on the button that was clicked.

Again, the tutorial link I provided has working examples of the BorderLayout, GridLayout and CardLayout.