Home » Java » GUI: how to properly set layout

GUI: how to properly set layout

Posted by: admin October 21, 2018 Leave a comment

Questions:

I’m having some issues with setting layouts. (Don’t mind the sizes of the buttons, I just want to understand layouts properly).

Here is the window that I want to make:

Picture of what I want to make

Here is the window I tried:

I tried

Here’s my code:

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

class Grid extends JFrame
{
    private JTextField t1;
    private JTextField t2;
    private JCheckBox c1;
    private JCheckBox c2;
    private JButton b1;
    private JButton b2;
    private JButton b3;
    private JPanel ButtonPanel1;
    private JPanel ButtonPanel2;
    private JPanel ButtonPanel3;
    private JPanel CheckPanel1;
    private JPanel CheckPanel2;
    private JPanel TextPanel1;
    private JPanel TextPanel2;
    private JPanel EastPanel;
    private JPanel CenterPanel;
    private JPanel WestPanel;
    private JLabel l1;
    private JLabel l2;

    public Grid()
    {
        //CheckBoxes
         c1 = new JCheckBox("Snap to Grid");
         c2 = new JCheckBox("Show Grid");

         CheckPanel1 = new JPanel();
         CheckPanel1.add(c1);

         CheckPanel2 = new JPanel();
         CheckPanel2.add(c2);
         WestPanel = new JPanel(new GridLayout(2,1));
         WestPanel.add(c1);
         WestPanel.add(c2);
         add(WestPanel,BorderLayout.WEST);

          //I don't get how to arrange the labels aligned with the textfields. 

         //TextFields
         l1 = new JLabel("X:");
         t1 = new JTextField("8",3);
         l2 = new JLabel("Y:");
         t2 = new JTextField("8",3);

         TextPanel1 = new JPanel();
         TextPanel1.add(l1);
         TextPanel1.add(t1);

         TextPanel2 = new JPanel();
         TextPanel2.add(l2);
         TextPanel2.add(t2);

         CenterPanel = new JPanel(new GridLayout(2,1));
         CenterPanel.add(l1);
         CenterPanel.add(l2);
         CenterPanel.add(t1);
         CenterPanel.add(t2);
         add(CenterPanel,BorderLayout.CENTER); 

         // Buttons
         b1 = new JButton("Ok");
         b2 = new JButton("Cancel");
         b3 = new JButton("Help");

         ButtonPanel1 = new JPanel();
         ButtonPanel1.add(b1);

         ButtonPanel2 = new JPanel();
         ButtonPanel2.add(b2);

         ButtonPanel3 = new JPanel();
         ButtonPanel3.add(b3);

         EastPanel = new JPanel(new GridLayout(3,1));
         EastPanel.add(ButtonPanel1);
         EastPanel.add(ButtonPanel2);
         EastPanel.add(ButtonPanel3);

         add(EastPanel, BorderLayout.EAST);

    }
}

public class oottest {

    public static void main(String[] args) {

        Grid app = new Grid();

        app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        app.setSize(300,150);
        app.setVisible(true);
    }

}

Can anyone help me understand how layout works?

I have been watching lots of videos and tried different layouts but still can’t get it right. Tell me if I used the correct layout or if I should change it.

Answers: