I'm having trouble with Java Layout

Question

This is my first GUI application and I'm having trouble making it look neat. I have tried several layouts and tinkered with them e.g flow, grid, border. When I run the program everything is just jumbled together.

I would like it to look like:

Unloaded Measurement      |textfield| |textfield|
Loaded Rider Measurement  |textField| |textfield|
Loaded Bike Measurement   |textField| |Textfield|

                   |Button|
_______________________________________________________________________________________

Race Sag: |TextField|
Free Sag: |TextField|
Race Sag Notes: |       TextField         |
Free Sag Notes: |       TextField         |

Here is a screenshot to help understand what my issue is:

The top is for user input and the bottom is calculated output. I hope that I have given enough details for some help with this. I really appreciate anyone that helps out! Here is my code:

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.StringTokenizer;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;


public class Main extends JFrame {

private static final long serialVersionUID = 1L;
private JPanel panel;
private JLabel messageLabel;
private JLabel messageLabel1;
private JLabel messageLabel2;
private JLabel raceSagLabel;
private JLabel freeSagLabel;
private JTextField wholeTextField;
private JTextField wholeTextField1;
private JTextField wholeTextField2;
private JTextField fracTextField;
private JTextField fracTextField1;
private JTextField fracTextField2;
private JTextField raceSagText;
private JTextField freeSagText;
private JTextField noteText;
private JTextField noteText1;
private JButton calcButton;
private final int WINDOW_WIDTH = 575;
private final int WINDOW_HEIGHT = 400;


/*===============================================================================
    Project : test.java - SagCalculator
    Author  : Brian Green
    Date    : Jan 10, 2013
    Abstract:   

  ===============================================================================*/
public static void main(String[] args) {
    @SuppressWarnings("unused")
    Main sc = new Main();
}
public Main(){
    setTitle("Rider Sag Calculator");
    setSize(WINDOW_WIDTH, WINDOW_HEIGHT); 
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    //setLayout();
    buildPanel();
    add(panel);
    setVisible(true);
}
private void buildPanel(){
    messageLabel = new JLabel("Enter Unloaded Stand Measurement");
    messageLabel1 = new JLabel("Enter Loaded with Rider Measurement");
    messageLabel2 = new JLabel("Enter Loaed without Rider Measurement");
    wholeTextField = new JTextField(3);
    fracTextField = new JTextField(3);
    wholeTextField1 = new JTextField(3);
    fracTextField1 = new JTextField(3);
    wholeTextField2 = new JTextField(3);
    fracTextField2 = new JTextField(3);
    calcButton = new JButton("Calculate");
    raceSagLabel = new JLabel("Race Sag: ");
    raceSagText = new JTextField(5);
    freeSagLabel = new JLabel("Free Sag: ");
    freeSagText = new JTextField(5);
    noteText = new JTextField(30);
    noteText1 = new JTextField(30);

    calcButton.addActionListener(new CalcButtonListener());
    panel = new JPanel();

    panel.add(messageLabel);
    panel.add(wholeTextField);
    panel.add(fracTextField);
    panel.add(messageLabel1);
    panel.add(wholeTextField1);
    panel.add(fracTextField1);
    panel.add(messageLabel2);
    panel.add(wholeTextField2);
    panel.add(fracTextField2);
    panel.add(calcButton);  
    panel.add(raceSagLabel);
    panel.add(raceSagText);
    panel.add(freeSagLabel);
    panel.add(freeSagText);
    panel.add(noteText);
    panel.add(noteText1);



}

If for some reason you need to see more of the code, just let me know. I will be happy to provide it. Thanks for the help!

I got this all worked out! I would like to say thanks to @trashgod for his suggestion: enter image description here

Your text image needs some tweaking I think in order to better display your desired GUI. Also, you will want to create and post an [sscce](http://sscce.org) to allow us to more easily analyze, run and improve your code. — Hovercraft Full Of Eels, Jan 12 '13 at 15:05
Currently, you are using the default layout of JPanel: FlowLayout. Switch to `GridBagLayout` and use panel nesting to ease your work — Guillaume Polet, Jan 12 '13 at 15:08
You should know that it is easy to *nest* layouts by nesting JPanels that each has its own layout. Perhaps you can achieve your desired effect by having your main JPanel use a BoxLayout, and then using inner JPanels that use GridBagLayout. — Hovercraft Full Of Eels, Jan 12 '13 at 15:08
@Hovercraft Full Of Eels. I don't have a text image? Are you referring to a label or text field? — billabrian6, Jan 12 '13 at 16:24
Thats just a rough sketch of what I was trying to achieve. Also, I tried to only include code that pertained to the GUI. There are several methods that I left out. I'm just trying to learn and constructive criticism is well handled. — billabrian6, Jan 12 '13 at 16:39

score 2 · Answer 1 · answered Jan 12 '13 at 15:13

2

Try calling pack() on your JFrame, the layout doesn't get applied immediately when you set it. Alternatively, you can use validate(), which should lay out the component as well. Btw. in your sample code you don't set a layout manager.

answered Jan 12 '13 at 15:13

kutschkem

7,826
3
21
56

if you look inside the main() you will see that i have setLayout() commented it. It is because I've tried so many different layouts and had no success. I tried using two different panels and trying to arrange them but it didn't work out. I'm still new to programming and this is the first time working with a GUI. I apologize if some of this stuff goes over my head =/ – billabrian6 Jan 12 '13 at 16:27
@billabrian6: Don't apologize for ignorance -- fix it. The [layout manager tutorials](http://docs.oracle.com/javase/tutorial/uiswing/layout/index.html) will help greatly, and I speak from experience as they helped to fix my layout ignorance. – Hovercraft Full Of Eels Jan 12 '13 at 16:42
@HovercraftFullOfEels: Would you agree that GridBagLayout would be best for this situation? I've looked at these tutorials already and attempted to use both grid and border layouts, but was not successful. – billabrian6 Jan 12 '13 at 16:49
@billabrian6: I would nest layouts as I described in a comment above. I've used GridBagLayout successfully for GUI's that hold a grid of components like your top grouping of JLabels and JTextFields as well as your bottom grouping, but again, I'd have the overall JPanel use BoxLayout. The key to layout managers is to keep playing with variations til you find what works best. Also look into MigLayout as has also been suggested. It is very powerful but requires a download to get. – Hovercraft Full Of Eels Jan 12 '13 at 16:52
@billabrian6: Ok forget about the "forgot to set layout manager" part. The important part of my answer is: call pack() or validate() on your frame after setting everything up. – kutschkem Jan 12 '13 at 17:03
@kutschkem can you give me an idea of where to call those methods? I tried it validate() within my buildPanel() and it did nothing. I appreciate your input. I've been attempting to install migLayout, but not having much success. – billabrian6 Jan 12 '13 at 17:32
@billabrian call it on your jframe after you added everything, so either right before or after you setVisible call. – kutschkem Jan 12 '13 at 17:43

score 2 · Answer 2 · answered Jan 12 '13 at 17:38

It's possible to achieve the layout that you want with some of the other suggestions here (including GridBagLayout), but the easiest solution by far is to use the JGoodies FormLayout, since it's explicitly designed for creating layouts where you need to line up fields and labels.

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

GroupLayout, see here, does a nice job on labeled forms, and it is manageable as a subpanel.

edited May 23 '17 at 11:43

Community

1
1

answered Jan 12 '13 at 17:44

trashgod

203,806
29
246
1,045

1

this has been the best suggestion. It is coming together nicely. I appreciate your input and reference example! TYVM! – billabrian6 Jan 12 '13 at 18:47

I'm having trouble with Java Layout

3 Answers3