Thread: The layout of GUI

layout.jpg
I am working on some basic questions about GUI. The above picture is the required interface. However, part of my work is not ideal.

mylayout.png
This is my work. I use a border layout to contain all the other panels. However, the north panel and east panel are not identical with the required one. What wrong with my code?

import java.awt.*;
import javax.swing.*;
 
public class Exercise2 {
	public static void main(String[] args) {
		JFrame frame = new JFrame();
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setSize(420, 250);
		frame.setTitle("Layout question");
		frame.setLayout(new BorderLayout());
 
		JLabel label = new JLabel("Buttons:");
		JButton b1 = new JButton("hi");
		JButton b2 = new JButton("long name");
		JButton b3 = new JButton("bye");
		JPanel northPanel = new JPanel(new FlowLayout());
		northPanel.add(label);
		northPanel.add(b1);
		northPanel.add(b2);
		northPanel.add(b3);
		frame.add(northPanel, BorderLayout.NORTH);
 
		JCheckBox boldBox = new JCheckBox("Bold");
		JCheckBox italicBox = new JCheckBox("Italic");
		JCheckBox underlineBox = new JCheckBox("Underline");
		JCheckBox strikeoutBox = new JCheckBox("Strikeout");
		JPanel westPanel = new JPanel(new GridLayout(4, 1));
		westPanel.add(boldBox);
		westPanel.add(italicBox);
		westPanel.add(underlineBox);
		westPanel.add(strikeoutBox);
		frame.add(westPanel, BorderLayout.WEST);
 
		JButton b4 = new JButton("1");
		JButton b5 = new JButton("2");
		JButton b6 = new JButton("3");
		JButton b7 = new JButton("4");
		JButton b8 = new JButton("5");
		JButton b9 = new JButton("6");
		JButton b10 = new JButton("7");
		JPanel subPanel = new JPanel(new GridLayout(2, 2));
		subPanel.add(b6);
		subPanel.add(b7);
		subPanel.add(b8);
		subPanel.add(b9);
		JPanel centerPanel = new JPanel(new GridLayout(2, 2));
		centerPanel.add(b4);
		centerPanel.add(b5);
		centerPanel.add(subPanel);
		centerPanel.add(b10);
		frame.add(centerPanel, BorderLayout.CENTER);
 
		JButton closeButton = new JButton("Cancel");
		frame.add(closeButton, BorderLayout.SOUTH);
 
		frame.setVisible(true);
	}
 
}

You can obtain the desired effect by setting the preferred sizes of the components in the north panel, changing the layout to flow layout and setting the preferred sizes of the check boxes in the west panel, and then packing the frame before setting it visible.

Originally Posted by GregBrannon

You can obtain the desired effect by setting the preferred sizes of the components in the north panel, changing the layout to flow layout and setting the preferred sizes of the check boxes in the west panel, and then packing the frame before setting it visible.

Thank you for your reply. I tried to change the layout of west panel to flow layout before. However, the components are arranged horizontally. The second question is when I set the preferred sizes of those components, is there any way to know the value of the desired dimension? Now, I just set the size like
b1.setPreferredSize(new Dimension(100, 50));
Is there any more efficient way to set the size?

However, the components are arranged horizontally.

It will still work for the size/orientation shown, and it can be forced even if resized by setting the preferred size of the west panel.

Is there any more efficient way to set the size?

Ultimately, no, but you can simplify experimenting by using constants set in one location and relating them mathematically when possible.

Originally Posted by GregBrannon

It will still work for the size/orientation shown, and it can be forced even if resized by setting the preferred size of the west panel.

Ultimately, no, but you can simplify experimenting by using constants set in one location and relating them mathematically when possible.

I still don't understand what you said about the west panel.

Have you tried setting the preferred size for the components? If so, show that code and describe what is still not satisfactory. Mine looks ~exactly like it's supposed to, so I'm not sure what else to tell you except to go do what I suggested and come back with code if it's not working for you.

Originally Posted by GregBrannon

Have you tried setting the preferred size for the components? If so, show that code and describe what is still not satisfactory. Mine looks ~exactly like it's supposed to, so I'm not sure what else to tell you except to go do what I suggested and come back with code if it's not working for you.

Thank you for your reply. I think I found the problem. I forgot to set the preferred size of the west panel. Thank for your guidance.