Simple window in swing JAVA

Question

Task: make the same window as in the screenshot below using JAVA swing:

What did I do:

• Created a panel for the top block (BorderLayout), added two more panels to it (GridLayour), one for the left buttons(FR, FG, FB), the other for the right buttons (A, B,C), added it all to my JFrame window
• Created a JScrollPane and added it to the JFrame too
• Created a panel for the bottom block (BorderLayout), added two more panels to it (GridLayour), one for the left buttons(1,2,3,4...), the other for the JTextFiel text field, added it all to my JFrame window.

The result is below:

I tried using other layouts, but it still doesn't work. I attach the code.

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

public class MyJFrame extends JFrame {

    JPanel pan1 = new JPanel();
    JPanel pan2 = new JPanel();
    JPanel pan3 = new JPanel();
    JPanel pan4 = new JPanel();
    JPanel pan5 = new JPanel();
    JPanel pan6 = new JPanel();

    JButton jButton1 = new JButton("FR");
    JButton jButton2 = new JButton("FG");
    JButton jButton3 = new JButton("FB");
    JButton jButton4 = new JButton("A");
    JButton jButton5 = new JButton("B");
    JButton jButton6 = new JButton("C");

    public MyJFrame(){

        super("Simple Swing App");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocation(650,300);
        setLayout(new GridLayout(3,2));
        setResizable(true);



        JScrollPane scrollPane = new JScrollPane();

        jButton1.setBackground(Color.red);
        jButton2.setBackground(Color.green);
        jButton3.setBackground(Color.blue);

        pan1.setLayout(new GridLayout(1,3,2,2));
        pan2.setLayout(new GridLayout(1,3,2,2));
        pan3.setLayout(new BorderLayout());
        pan4.setLayout(new GridLayout(3,3,2,2));
        pan5.setLayout(new GridLayout(3,1,1,1));
        pan6.setLayout(new BorderLayout());

        pan1.add(jButton1);
        pan1.add(jButton2);
        pan1.add(jButton3);

        pan2.add(jButton4);
        pan2.add(jButton5);
        pan2.add(jButton6);

        pan3.add(pan1, BorderLayout.WEST);
        pan3.add(pan2, BorderLayout.EAST);

        for (int i=1; i<10; i++) {
            JButton jButton = new JButton(i+"");
            pan4.add(jButton);
        }

        for (int i=1; i<4; i++){
            JTextField jTextField = new JTextField(" Pole tekstowe " + i + " typu jTextField ");
            jTextField.setBackground(Color.WHITE);
            jTextField.setBorder(BorderFactory.createLineBorder(Color.CYAN));
            pan5.add(jTextField);
        }

        pan6.add(pan4, BorderLayout.WEST);
        pan6.add(pan5, BorderLayout.EAST);

        add(pan3);
        add(scrollPane);
        add(pan6);



        setSize(700,450);
        setVisible(true);
    }
}

Answer 1

If the question is "How to make this GUI?" I would use this approach:

• 3 x BorderLayout (red) - one for the entire GUI, one each for the PAGE_START and PAGE_END constraints of the main GUI panel.
• In the panel used in the PAGE_START, 2 x FlowLayout (green), one in the LINE_START, the other in the LINE_END. (1)
• In the panel in the PAGE_END, 2 x GridLayout (blue), the first a 3 x 3, the other a single column.

1. If the components at the top (the groups of buttons on the left & right) need to be the exact same size, also use grid layouts for them.