Trouble Organizing JPanels on GridBagLayout (Java)

Question

Basically, I'm trying to make a GUI that looks like this

I've looked up countless of resources, but it seems like no matter how I format my code, all of the buttons, text fields, etc just line up horizontally. I can't get my GUI to look even remotely how it's supposed to. Here is my code.

import java.awt.*;
import javax.swing.*;

public class Sorting extends JFrame{

    public Sorting() {

        GridBagConstraints c = new GridBagConstraints();
        //for panel 1
        JButton insertionButton = new JButton("Insertion Sort");
        JButton selectionButton = new JButton("Selection Sort");
        JButton quickButton = new JButton("Quick Sort");
        JButton mergeButton = new JButton("Merge Sort");
        JButton heapButton = new JButton("Heap Sort");
        JButton radixButton = new JButton("Radix Sort");
        JPanel sortPanel = new JPanel();
        sortPanel.setLayout(new GridBagLayout());
        c.anchor = GridBagConstraints.FIRST_LINE_START;
        c.gridx = 0;
        c.gridy = 0;
        sortPanel.add(insertionButton);
        c.gridy = 1;
        sortPanel.add(selectionButton);
        c.gridy = 2;
        sortPanel.add(quickButton);
        c.gridy = 3;
        sortPanel.add(mergeButton);
        c.gridy = 4;
        sortPanel.add(heapButton);
        c.gridy = 5;
        sortPanel.add(radixButton);
        add(sortPanel);


        //for panel 2
        c.anchor = GridBagConstraints.FIRST_LINE_END;
        JLabel winningLabel = new JLabel("Winning Algorithm:");
        JTextField winningField = new JTextField(15);
        JPanel winningPanel = new JPanel();
        winningPanel.setLayout(new GridBagLayout());
        c.gridx = 1;
        c.gridy = 0;
        winningPanel.add(winningLabel);
        c.gridx = 1;
        c.gridy = 1;
        winningPanel.add(winningField);
        add(winningPanel);

        //for panel 3
        JLabel title = new JLabel("List Properties");
        JButton createList = new JButton("Create the List");
        JRadioButton inOrder = new JRadioButton("InOrder");
        JRadioButton reverseOrder = new JRadioButton("ReverseOrder");
        JRadioButton almostOrder = new JRadioButton("ALmostOrder");
        JRadioButton random = new JRadioButton("Random");
        JTextField sliderAmt = new JTextField(10);
        final int AMT_MIN = 1;
        final int AMT_MAX = 30000;
        final int AMT_INIT = 15000;
        JSlider slider = new JSlider(JSlider.HORIZONTAL, AMT_MIN, AMT_MAX, AMT_INIT);
        JPanel createPanel = new JPanel();
        createPanel.setLayout(new GridBagLayout());
        createPanel.add(title);
        c.gridx = 1;
        c.gridy = 2;
        createPanel.add(inOrder);
        c.gridx = 1;
        c.gridy = 3;
        createPanel.add(reverseOrder);
        c.gridx = 2;
        c.gridy = 2;
        createPanel.add(almostOrder);
        c.gridx = 2;
        c.gridy = 3;
        createPanel.add(random);
        c.gridx = 1;
        c.gridy = 4;
        createPanel.add(slider);
        c.gridx = 2;
        c.gridy = 4;
        createPanel.add(sliderAmt);
        c.gridx = 1;
        c.gridy = 5;
        createPanel.add(createList);
        add(createPanel);

        //for panel 4
        JPanel results = new JPanel();
        JLabel resultsTitle = new JLabel("Experimental Results");
        JLabel n = new JLabel("N:");
        JLabel dataType = new JLabel("Data Type:");
        JLabel sort = new JLabel("Sort:");
        JLabel comparisons = new JLabel("Comparisons:");
        JLabel movements = new JLabel("Movements:");
        JLabel totalTime = new JLabel("Total Time:");
        JTextField nField = new JTextField(10);
        JTextField dataTypeField = new JTextField(10);
        JTextField sortField = new JTextField(10);
        JTextField comparisonsField = new JTextField(10);
        JTextField movementsField = new JTextField(10);
        JTextField totalTimeField = new JTextField(10);

        c.gridx = 1;
        c.gridy = 6;
        results.add(resultsTitle);
        c.gridx = 1;
        c.gridy = 7;
        results.add(n);
        c.gridx = 1;
        c.gridy = 8;
        results.add(dataType);
        c.gridx = 1;
        c.gridy = 9;
        results.add(sort);
        c.gridx = 1;
        c.gridy = 10;
        results.add(comparisons);
        c.gridx = 1;
        c.gridy = 11;
        results.add(movements);
        c.gridx = 1;
        c.gridy = 12;
        results.add(totalTime);

        c.gridx = 2;
        c.gridy = 7;
        results.add(nField);
        c.gridx = 2;
        c.gridy = 8;
        results.add(dataTypeField);
        c.gridx = 2;
        c.gridy = 9;
        results.add(sortField);
        c.gridx = 2;
        c.gridy = 10;
        results.add(comparisonsField);
        c.gridx = 2;
        c.gridy = 11;
        results.add(movementsField);
        c.gridx = 2;
        c.gridy = 12;
        results.add(totalTimeField);
        add(results);

    }
}

Here is the code from the main class:

import javax.swing.*;

public class Main {
    public static void main(String args[]) {
        Sorting program = new Sorting();
        program.setVisible(true);
        program.setTitle("Sorting Techniques");
        program.setSize(500, 500);
        program.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
}

I feel like there's some basic thing I'm doing wrong, but I don't know what it is. If I could get some help that would be fantastic. Thanks!

Answer 1

Here is something to get you started and understand the way to construct complex layout. See comments:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;  
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Sorting extends JFrame{

    private static final int NUMBER_OF_BUTTONS = 7;

    public Sorting() {

        //divide and concur. don't try to put too many components into one or few panels
        //(which requires complex layout)
        //instead use sub panel and simple layouts

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //left panel for buttons
        JPanel buttonsPanel = new JPanel();
        buttonsPanel.setLayout(new GridLayout(NUMBER_OF_BUTTONS,1));

        //add components (buttons) to buttons panel
        JButton insertionButton = new JButton("Insertion Sort");
        buttonsPanel.add(insertionButton);
        JButton selectionButton = new JButton("Selection Sort");
        buttonsPanel.add(selectionButton);
        JButton quickButton = new JButton("Quick Sort");
        buttonsPanel.add(quickButton);
        JButton mergeButton = new JButton("Merge Sort");
        buttonsPanel.add(mergeButton);
        JButton heapButton = new JButton("Heap Sort");
        buttonsPanel.add(heapButton);
        JButton radixButton = new JButton("Radix Sort");
        buttonsPanel.add(radixButton);

        //add buttons panel to content pane which by default uses border layout
        getContentPane().add(buttonsPanel, BorderLayout.WEST);

        //right panel for all the rest
        JPanel rightPanel = new JPanel();

        //add three panel to right panel
        //use gridbag to layout the 3 panels in the right panel
        GridBagLayout gbl_rightPanel = new GridBagLayout();
        gbl_rightPanel.columnWidths = new int[]{150, 0};
        gbl_rightPanel.rowHeights = new int[]{0, 47, 47, 0};
        gbl_rightPanel.columnWeights = new double[]{0.0, Double.MIN_VALUE};
        gbl_rightPanel.rowWeights = new double[]{0.0, 1.0, 1.0, Double.MIN_VALUE};
        rightPanel.setLayout(gbl_rightPanel);

        //add right panel to content pane
        getContentPane().add(rightPanel, BorderLayout.EAST);

        //winning algo
        //to add titled border see: http://www.javacodex.com/More-Examples/2/11
        JPanel algo = new JPanel();
        algo.setLayout(new FlowLayout(FlowLayout.CENTER));
        //add components to algo panel
        JTextField winningField = new JTextField(15);
        algo.add( winningField);

        GridBagConstraints gbc_algo = new GridBagConstraints();
        gbc_algo.fill = GridBagConstraints.HORIZONTAL;
        gbc_algo.insets = new Insets(0, 0, 5, 0);
        gbc_algo.gridx = 0;
        gbc_algo.gridy = 0;
        rightPanel.add(algo, gbc_algo);

        //properties
        JPanel propertiesPanel = new JPanel();
        propertiesPanel.setBackground(Color.YELLOW);//for demonstration purpose
        //TODO: set gridbag layout to propertiesPanel, and add components

        //add properties panel to right panel
        GridBagConstraints gbc_propertiesPanel = new GridBagConstraints();
        gbc_propertiesPanel.fill = GridBagConstraints.BOTH;
        gbc_propertiesPanel.insets = new Insets(0, 0, 5, 0);
        gbc_propertiesPanel.gridx = 0;
        gbc_propertiesPanel.gridy = 1;
        rightPanel.add(propertiesPanel, gbc_propertiesPanel);

        //results
        JPanel resultsPanel = new JPanel();
        resultsPanel.setBackground(Color.CYAN);//for demonstration purpose
        //TODO: set gridbag layout to resultsPanel, and add components

        //add resultsPanel panel to right panel
        GridBagConstraints gbc_resultsPanel = new GridBagConstraints();
        gbc_resultsPanel.fill = GridBagConstraints.BOTH;
        gbc_resultsPanel.gridx = 0;
        gbc_resultsPanel.gridy = 2;
        rightPanel.add(resultsPanel, gbc_resultsPanel);

        pack();
        setVisible(true);
    }

    public static void main(String args[]) {
        new Sorting();
    }
}

Answer 2

There are at least two problems in the code shown.

• Not using a GridBagLayout in the only panel that appeared(1).
• Not using the GridBagConstraints when adding components to the container (the content pane of the frame).

---

1. Note that the default layout of a JFrame is BorderLayout & that a component added to a border layout with no constraint ends up in the CENTER, which supports exactly one component. This example concentrates on the one component that ends up visible (the last one added).

This is the result of changing the code to address all three points mentioned above:

import java.awt.*;
import javax.swing.*;

public class Sorting extends JFrame{

    public Sorting() {

        GridBagConstraints c = new GridBagConstraints();

        //for panel 4
        JPanel results = new JPanel(new GridBagLayout());
        JLabel resultsTitle = new JLabel("Experimental Results");
        JLabel n = new JLabel("N:");
        JLabel dataType = new JLabel("Data Type:");
        JLabel sort = new JLabel("Sort:");
        JLabel comparisons = new JLabel("Comparisons:");
        JLabel movements = new JLabel("Movements:");
        JLabel totalTime = new JLabel("Total Time:");
        JTextField nField = new JTextField(10);
        JTextField dataTypeField = new JTextField(10);
        JTextField sortField = new JTextField(10);
        JTextField comparisonsField = new JTextField(10);
        JTextField movementsField = new JTextField(10);
        JTextField totalTimeField = new JTextField(10);

        c.gridx = 1;
        c.gridy = 6;
        results.add(resultsTitle, c);
        c.gridx = 1;
        c.gridy = 7;
        results.add(n, c);
        c.gridx = 1;
        c.gridy = 8;
        results.add(dataType, c);
        c.gridx = 1;
        c.gridy = 9;
        results.add(sort, c);
        c.gridx = 1;
        c.gridy = 10;
        results.add(comparisons, c);
        c.gridx = 1;
        c.gridy = 11;
        results.add(movements, c);
        c.gridx = 1;
        c.gridy = 12;
        results.add(totalTime, c);

        c.gridx = 2;
        c.gridy = 7;
        results.add(nField, c);
        c.gridx = 2;
        c.gridy = 8;
        results.add(dataTypeField, c);
        c.gridx = 2;
        c.gridy = 9;
        results.add(sortField, c);
        c.gridx = 2;
        c.gridy = 10;
        results.add(comparisonsField, c);
        c.gridx = 2;
        c.gridy = 11;
        results.add(movementsField, c);
        c.gridx = 2;
        c.gridy = 12;
        results.add(totalTimeField, c);
        add(results);
    }

    public static void main(String args[]) {
        Sorting program = new Sorting();
        program.setVisible(true);
        program.setTitle("Sorting Techniques");
        program.setSize(500, 500);
        program.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
}