java GUI layout suggestion

Question

public class AFS {
    public JPanel afs(final Fields input){
        JPanel titlePanel = new JPanel();

        //Title fields
        JLabel afs = new JLabel("Statement", Label.LEFT);

        Label mm = new Label("month ", Label.LEFT);
        Label my = new Label("Year ", Label.LEFT);

        //first line
        titlePanel.add(afs);
        titlePanel.add(mm);
        titlePanel.add(input.MENTRY);
        titlePanel.add(my);
        titlePanel.add(input.YENTRY);
        titlePanel.setPreferredSize(null);

        //Left Panels
        JPanel sb = new JPanel();
        JPanel entry = new JPanel();
        entry.setLayout(new BoxLayout(entry, BoxLayout.Y_AXIS));
        entry.setAlignmentX(Component.LEFT_ALIGNMENT);
        entry.add(new Label("Service "));
        entry.add(input.s);
        entry.add(new Label("Amount "));
        entry.add(input.a);
        entry.add(new Label("Counter "));
        entry.add(input.o);
        entry.add(new Label("Division "));
        entry.add(input.d);

        sb.add(entry);


        JPanel holderPanel = new JPanel();
        holderPanel.setLayout(new BoxLayout(holderPanel, BoxLayout.Y_AXIS));
        holderPanel.setAlignmentX(Component.LEFT_ALIGNMENT);
        holderPanel.add(titlePanel);
        holderPanel.add(sb);

        JButton start = new JButton("Save Current");
        start.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                ScriptAction action = new ScriptAction();
                action.saveAll(input,1);
            }
        });
        holderPanel.add(start); 
        return holderPanel;
    }

I have a short version of what looks like above code. The current layout looks like this:

But I want the layout look like (paint edited).

I have tried swap using gridLayout for the entry and it will display 2 rows but gridlayout will still align everything in the center (include the title and the header). Furthermore the button span would be across the entire bottom section. I was wondering if there are any suggested way to do this?

Answer 1

You would need to use a combination of layout managers to achieve the desired output:

Before resize / After resize

In this case there are 3 main parts:

• Top pane (Uses Box to align some text on the left and some on the right)
• Middle pane (Uses GridBagLayout to position the components as in the image, maybe GridLayout with proper insets might work as well)
• Bottom pane (Uses default JPanel's layout: FlowLayout)

The top pane uses 2 JPanels as well, the first one for the label Statement alone and other with FlowLayout aligned to the right for the other 4 components, as per this answer BoxLayout does not respect the preferred size of our JTextFields. So a workaround is to wrap them inside another JPanel and then wrap that JPanel along with the Statement label.

A similar problem arises with the middle pane, which needs to use 2 JPanels: One for the fields wrapped inside another bigger one which holds it and the JButton at the bottom (Save Current). We could achieve a similar output by adding the JButton with a gridx = 2 and gridy = 2 with the counter and division label and fields on gridx = 3 and gridx = 4 respectively (instead of 2 & 3) but we would then need to add gbc.insets to add insets to the top and bottom with high values as well... It's up to you which one to use :)

The code that produces the above outputs is the following:

import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;

import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;

public class FormSample {
    private JFrame frame;
    private JPanel topRightPane;
    private JPanel centerPane;
    private JPanel centerWithButtonPane;
    private JPanel buttonsPane;

    private JTextField monthField;
    private JTextField yearField;

    private JTextField serviceField;
    private JTextField amountField;
    private JTextField counterField;
    private JTextField divisionField;

    private static final int LEFT_MARGIN = 50; //Increase / Decrease to add extra space between components
    private static final int RIGHT_MARGIN = LEFT_MARGIN;

    //Change insets accordingly to add extra space between components (top, left, bottom, right)
    private static final Insets leftInsets = new Insets(0, LEFT_MARGIN, 0, 0);
    private static final Insets rightInsets = new Insets(0, 0, 0, RIGHT_MARGIN);
    private static final Insets defaultInsets = new Insets(0, 0, 0, 0);

    private JButton saveCurrentButton;
    private JButton saveAllButton;
    private JButton resetButton;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new FormSample()::createAndShowGui);
    }

    private void createAndShowGui() {
        frame = new JFrame(getClass().getSimpleName());

        monthField = new JTextField(10);
        yearField = new JTextField(10);

        serviceField = new JTextField(10);
        amountField = new JTextField(10);
        counterField = new JTextField(10);
        divisionField = new JTextField(10);

        saveCurrentButton = new JButton("Save Current");
        saveAllButton = new JButton("Save all");
        resetButton = new JButton("Reset");

        buttonsPane = new JPanel();

        topRightPane = new JPanel();
        topRightPane.setLayout(new FlowLayout(FlowLayout.RIGHT));

        topRightPane.add(new JLabel("Month"));
        topRightPane.add(monthField);
        topRightPane.add(new JLabel("Year"));
        topRightPane.add(yearField);

        centerWithButtonPane = new JPanel();
        centerWithButtonPane.setLayout(new BoxLayout(centerWithButtonPane, BoxLayout.PAGE_AXIS));

        Box box = Box.createHorizontalBox();
        box.add(new JLabel("Statement"));
        box.add(Box.createHorizontalGlue());
        box.add(topRightPane);

        centerPane = new JPanel();
        centerPane.setLayout(new GridBagLayout());

        GridBagConstraints gbc = new GridBagConstraints();

        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.insets = defaultInsets;
        centerPane.add(new JLabel("Service"), gbc);

        gbc.gridx = 1;
        gbc.insets = rightInsets;
        centerPane.add(serviceField, gbc);

        gbc.gridx = 2;
        gbc.insets = leftInsets;
        centerPane.add(new JLabel("Counter"), gbc);

        gbc.gridx = 3;
        gbc.insets = defaultInsets;
        centerPane.add(counterField, gbc);

        gbc.gridx = 0;
        gbc.gridy = 1;
        gbc.insets = defaultInsets;
        centerPane.add(new JLabel("Amount"), gbc);

        gbc.gridx = 1;
        gbc.insets = rightInsets;
        centerPane.add(amountField, gbc);

        gbc.gridx = 2;
        gbc.insets = leftInsets;
        centerPane.add(new JLabel("Division"), gbc);

        gbc.gridx = 3;
        gbc.insets = defaultInsets;
        centerPane.add(divisionField, gbc);

        saveCurrentButton.setAlignmentX(Component.CENTER_ALIGNMENT); //Force centered alignment for our JButton
        centerWithButtonPane.add(centerPane);
        centerWithButtonPane.add(saveCurrentButton);

        buttonsPane.add(saveAllButton);
        buttonsPane.add(resetButton);

        frame.add(box, BorderLayout.NORTH);
        frame.add(centerWithButtonPane, BorderLayout.CENTER);
        frame.add(buttonsPane, BorderLayout.SOUTH);
        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
}

Also please follow the advices given by @SergiyMedvynskyy about not mixing AWT and Swing components (i.e. JTextField with TextField) and only use Swing components as AWT ones are buggy.