GridBagLayout Java GUI Basic Positioning

Question

I am trying to create a client-server application that uses Java to interact with a mySQL db. As of right now I am not worried about any of the functionality of the application. I am currently just concerned about the layout. I have been trying to build the looks of the GUI for hours with mixed results. I am aware that GridBagLayout is pretty flexible and commonly used GUIs, which is what I have been using. I even tried creating multiple verticle boxes to represent the columns and horizontal boxes to represent the rows, which works out pretty nicely but eventually fails to give me the results I need.

More specifically, my main problem is that in my code below, when I try to line up the "Enter a SQL command" column with the textfield boxes columns to the left, it doesn't 'float' to the right as I need it to, instead it shifts all the components underneath it, messing the positioning.

I would greatly appreciate it if someone could help guide me as to what I am doing wrong, and how I can accomplish the GUI that looks like the one below.

My Java Code so far:

public class Methods extends JFrame{
    private final JTextField item1 = new JTextField(40); 
    private final JTextField item2 = new JTextField(40); 
    private final JTextField item3 = new JTextField(40); 
    private final JTextField item4 = new JTextField(40);
    private final JTextArea item5 = new JTextArea(6,30);
    private JLabel label = new JLabel("Enter Database Information"); 
    private JLabel label1 = new JLabel("JDBC Driver"); 
    private JLabel label2 = new JLabel("Database URL"); 
    private JLabel label3 = new JLabel("Username"); 
    private JLabel label4 = new JLabel("Password");
    private JLabel label5 = new JLabel("Enter a SQL Command"); 
    private JLabel label6 = new JLabel("No Connection Now");
    private JLabel label7 = new JLabel("SQL Execution Result");
    private final JButton button1 = new JButton("Connect"); 
    private final JButton button2 = new JButton("Execute SQL Command"); 
    private final JButton button3 = new JButton("Clear Command");
    private final JButton button4 = new JButton("Clear Results"); 
    private final JPanel jp;

    public Methods(){
        super("SQL Client GUI - MHZ");
        
        item1.setText("JDBC Driver");
        item2.setText("Datbase URL");
        item3.setText("Username");
        item4.setText("Password");
        
        //GUI Gridlayout Layout
        jp = new JPanel();
        jp.setLayout(new GridBagLayout()); 
        GridBagConstraints grid = new GridBagConstraints(); 
        grid.anchor = GridBagConstraints.BASELINE_TRAILING;
                        
        
        grid.gridx=0;
        grid.gridy=0;
        
        //column1
        jp.add(label1, grid);
        grid.gridy++;
        jp.add(label2, grid);
        grid.gridy++;
        jp.add(label3, grid);
        grid.gridy++;
        jp.add(label4, grid);
        
        grid.gridy=0;
        grid.gridx++;
        
        //col2
        jp.add(item1, grid);
        grid.gridy++;
        jp.add(item2, grid);
        grid.gridy++;
        jp.add(item3, grid);
        grid.gridy++;
        jp.add(item4, grid);
        
        grid.gridy=0;
        grid.gridx++;
        
        //col3
        jp.add(label5, grid);
        grid.gridy++;
        jp.add(item5, grid);
        grid.gridy++;
        
        grid.gridx=0;
        grid.gridy=4;
        jp.add(button1,grid);
        grid.gridx++;
        jp.add(button2, grid);
        grid.gridx++;
        jp.add(button3, grid);
        grid.gridx++;
        jp.add(button4, grid);
        
        add(jp);
    }
}

The image below is how its supposed to look.

Answer 1

There are few thing you must use here: Use gridWidth and gridHeight, for example:

     grid.gridx = 0;
     grid.gridy = 0;
     add (button1, grid);

     grid.gridx = 1;
     grid.gridy = 0;
     add (button2, grid);

     grid.gridwidth = 2;

     grid.gridx = 0;
     grid.gridy = 1;
     add (button3, grid);

In that case, the third button will be under the first two and will fit the size of both. The number 2 in that case indicates the buttons it should fit to Note that if you will add another component later, you must change the width back to 1. Same goes for the gridHeight.

if you will use it on your code, you start with making the textArea the same height as the four textFields.

Another thing is that you didnt add the first label, so it made the textFields to be 1 line too high.