How to program this GUI in Java Swing

Question

I'm currently developing a small utility with the following GUI:

Right now i have a container (JPanel) with the BorderLayout layout that holds everything in place. The i have another 2 JPanels placed on BorderLayout.NORTH and BorderLayout.SOUTH respectively, each whith the GridLayout (2 columns by 1 row). The table is on the main container placed at the CENTER of it.

Do you think this is the best approach? I'm having a rough time dealing with spacing between the components and the borders of the frame.

Right now i have this code:

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JSeparator;
import javax.swing.JTable;
import javax.swing.SwingUtilities;

public class GUI extends JFrame {

    private JButton loadFileBtn = new JButton("Load File");
    private JButton generateReportBtn = new JButton("Generate Report");
    private JButton exitBtn = new JButton("Exit");
    private JLabel fileNameLbl = new JLabel("File Name Here");
    private JMenuBar menuBar = new JMenuBar();
    private JMenu fileMI = new JMenu("File");
    private JMenuItem openFileMenu = new JMenuItem("Open File");
    private JSeparator separator = new JSeparator();
    private JMenuItem exitMenu = new JMenuItem("Exit");
    private JMenu reportMI = new JMenu("Report");
    private JMenuItem generateReportMenu = new JMenuItem("Generate Report");
    private JMenu helpMI = new JMenu("Help");
    private JMenuItem aboutMenu = new JMenuItem("About");
    private JTable table = new JTable(5, 2);
    private JPanel mainPanel = new JPanel(new BorderLayout(10, 10));
    private JPanel panel1 = new JPanel(new BorderLayout());
    private JPanel panel2 = new JPanel(new GridLayout(1, 2));
    private JPanel panel3 = new JPanel(new GridLayout(1, 2));

    public GUI() {

        super("Sample GUI");

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(new Dimension(300, 300));
        setResizable(false);

        setLayout(new BorderLayout(10, 10));

        fileMI.add(openFileMenu);
        fileMI.add(separator);
        fileMI.add(exitMenu);

        reportMI.add(generateReportMenu);

        helpMI.add(aboutMenu);

        menuBar.add(fileMI);
        menuBar.add(reportMI);
        menuBar.add(helpMI);

        setJMenuBar(menuBar);

        panel1.add(table, BorderLayout.CENTER);

        panel2.add(fileNameLbl);
        panel2.add(loadFileBtn);

        panel3.add(generateReportBtn);
        panel3.add(exitBtn);

        mainPanel.add(panel2, BorderLayout.NORTH);
        mainPanel.add(panel1, BorderLayout.CENTER);
        mainPanel.add(panel3, BorderLayout.SOUTH);

        add(mainPanel);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                GUI app = new GUI();
                app.setVisible(true);
            }
        });
    }
}

What do you think would be the best approach to do this?

Any help would be appreciated. Thanks.

UPDATE:

Right now, i have the following GUI

I want the components to space away from the borders evenly, like in the mockup.

Answer 1

2 things you can use to make this happen:

1. Use BorderFactory.createEmptyBorder(int, int, int, int)
2. Use the 4-args constructor of GridLayout

There are other LayoutManager's which can bring the same functionality (like GridBagLayout, or using nested BorderLayout), but if you feel comfortable with the current LayoutManager's, there is no imperious need to change to those. The way you did is also acceptable.

You might consider wrapping the table in a JScrollPane to make it nicer, with headers and scrollbars if ever needed.

Small example code:

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridLayout;

import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JSeparator;
import javax.swing.JTable;
import javax.swing.SwingUtilities;

public class GUI extends JFrame {

    private JButton loadFileBtn = new JButton("Load File");
    private JButton generateReportBtn = new JButton("Generate Report");
    private JButton exitBtn = new JButton("Exit");
    private JLabel fileNameLbl = new JLabel("File Name Here");
    private JMenuBar menuBar = new JMenuBar();
    private JMenu fileMI = new JMenu("File");
    private JMenuItem openFileMenu = new JMenuItem("Open File");
    private JSeparator separator = new JSeparator();
    private JMenuItem exitMenu = new JMenuItem("Exit");
    private JMenu reportMI = new JMenu("Report");
    private JMenuItem generateReportMenu = new JMenuItem("Generate Report");
    private JMenu helpMI = new JMenu("Help");
    private JMenuItem aboutMenu = new JMenuItem("About");
    private JTable table = new JTable(5, 2);
    private JPanel mainPanel = new JPanel(new BorderLayout(10, 10));
    private JPanel panel1 = new JPanel(new BorderLayout());
    private JPanel panel2 = new JPanel(new GridLayout(1, 2, 10, 10));
    private JPanel panel3 = new JPanel(new GridLayout(1, 2, 10, 10));

    public GUI() {

        super("Sample GUI");

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(new Dimension(300, 300));
        setResizable(false);

        setLayout(new BorderLayout(10, 10));

        fileMI.add(openFileMenu);
        fileMI.add(separator);
        fileMI.add(exitMenu);

        reportMI.add(generateReportMenu);

        helpMI.add(aboutMenu);

        menuBar.add(fileMI);
        menuBar.add(reportMI);
        menuBar.add(helpMI);

        setJMenuBar(menuBar);

        panel1.add(table, BorderLayout.CENTER);

        panel2.add(fileNameLbl);
        panel2.add(loadFileBtn);

        panel3.add(generateReportBtn);
        panel3.add(exitBtn);

        mainPanel.add(panel2, BorderLayout.NORTH);
        mainPanel.add(panel1, BorderLayout.CENTER);
        mainPanel.add(panel3, BorderLayout.SOUTH);
        mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
        add(mainPanel);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                GUI app = new GUI();
                app.setVisible(true);
            }
        });
    }
}

Answer 2

Here's how I would arrange your GUI. This is just one way. It's not the only way.

• The JTable goes inside of a JScrollPane.

• Button2 and Button3 go inside of a button JPanel with a FlowLayout.

• Label and Button1 go inside of a label JPanel with a FlowLayout.

• File, Report, and Help are JMenuItems on a JMenuBar.

• The main JPanel has a BoxLayout with a Y_AXIS orientation.

• Add the label JPanel, the JScrollPane, and the button JPanel to the main JPanel.

Answer 3

The best way is to create a GUI is to code in a way you and others will understand . Take a look at this Guide to Layout Managers. You can use different layout managers for different components. This will help you setting correct spacing.

If your problem is just the spacing around the components, set its Insets.