How do I lay out Input panel with multiple textfields and OK, CANCEL buttons?

Question

I am trying to achieve the following effect in Java:

However, I am not sure what layout to use and how. FlowLayout obviously doesn't work. GridLayout won't work either because the first 4 rows are supposed to be 1 column rows, but the 5th row needs to have 2 columns.

This is my code so far:

public class DepositPanel extends JPanel
{
    private JLabel cashL, checksL;
    private JTextField cashTF, checksTF;
    private JButton ok, cancel;

    DepositPanel()
    {
        JPanel depositP = new JPanel();
        depositP.setLayout(new FlowLayout(FlowLayout.LEFT, 2, 2));
        depositP.setPreferredSize(new Dimension(250, 85));

        JTextField cashTF = new JTextField(22);
        JTextField checksTF = new JTextField(22);

        JLabel cashL = new JLabel("Cash:");
        JLabel checksL = new JLabel("Checks:");

        ok = new JButton("OK");
        cancel = new JButton("CANCEL");

        depositP.add(cashL);
        depositP.add(cashTF);
        depositP.add(checksL);
        depositP.add(checksTF);
        depositP.add(ok);
        depositP.add(cancel):
    }
}

Answer 1

You could try with combinations of Layouts, 2 JPanels, 1 for buttons and 1 for fields, button panel with FlowLayout and fields panel with BoxLayout. And adding them to the frame. (I did a JFrame for testing, but you can change it to a JPanel and add that panel to your JFrame). Just be sure to have only 1 JFrame, see The use of multiple JFrames, Good / Bad Practice.

For example:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.*;
public class DepositExample {
    JFrame frame;
    JPanel buttonPane, fieldsPanel;
    JLabel cash, checks;
    JTextField cashField, checksField;
    JButton ok, cancel;

    DepositExample() {
        frame = new JFrame("Deposit");
        buttonPane = new JPanel();
        fieldsPanel = new JPanel();
        cash = new JLabel("Cash");
        checks = new JLabel("Checks");
        cashField = new JTextField("");
        checksField = new JTextField("");
        ok = new JButton("OK");
        cancel = new JButton("Cancel");

        fieldsPanel.setLayout(new BoxLayout(fieldsPanel, BoxLayout.PAGE_AXIS));
        buttonPane.setLayout(new FlowLayout());

        fieldsPanel.add(cash);
        fieldsPanel.add(cashField);
        fieldsPanel.add(checks);
        fieldsPanel.add(checksField);
        buttonPane.add(ok);
        buttonPane.add(cancel);
        frame.add(fieldsPanel, BorderLayout.PAGE_START);
        frame.add(buttonPane, BorderLayout.PAGE_END);

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
    public static void main(String args[]) {
        new DepositExample();
    }
}

To get some more spacing between components you can add EmptyBorders as recommended by @LuxxMiner in his comment below.

Answer 2

In this case you can use a JOptionPane to build a simple panel for you:

JTextField firstName = new JTextField(10);
JTextField lastName = new JTextField(10);

Object[] msg = {"First Name:", firstName, "Last Name:", lastName};

result = JOptionPane.showConfirmDialog(
    frame,
    msg,
    "Use default layout",
    JOptionPane.OK_CANCEL_OPTION,
    JOptionPane.PLAIN_MESSAGE);

if (result == JOptionPane.YES_OPTION)
{
    System.out.println(firstName.getText() + " : " + lastName.getText());
}
else
{
    System.out.println("Canceled");
}

The only problem with this approach is that the focus will be on a button, not the first name text field.

So to solve this problem you can check out the RequestFocusListener found in Dialog Focus which will cause focus to be placed on the first name text field once the dialog is displayed.

JTextField firstName = new JTextField(10);
firstName.addAncestorListener( new RequestFocusListener() );

Although for more complex layouts it is better to create one or more panels each using an appropriate layout manager for the requirement.

Answer 3

There are many ways to achieve a layout like this. The first thing you need to get used to, is that its often simpler to split up different requirements into different containers using different layout managers.

If you separate the two buttons into their own panel and treat that panel with the buttons as "just another line" in the window, you can basically just use a GridLayout with a single column. The panel with the buttons could then use a FlowLayout to place the buttons side by side.

Answer 4

Try this:

public class Window extends JFrame{
....
}

JLabel example;
//Constructor
public Window(){
    example = new JLabel("Sample text");
    example.setBounds(x,y,width,height)
    //JComponent...
    setLayout(null);
    setSize(width,height);
    setVisible(true);
}

Without the JPanel you can specify the x and y coordinates