Layout using Java Swing

Question

I am trying to figure out which is the best layout to choose. I have a grid which is created by extending JPanel as:

public class TestPane extends JPanel{
    // code
}

I need to have

• labels to display some text/ numbers.
• a dropdown list for the user to choose an option.
• text fields for the user to enter some parameter.

Edit

This is a rough draft of the figure. Sorry for not being so neat.

Any suggestions as to which layout to use.

Note that the labels and the grid keep updating with computation of the algorithm.

Edit- the grid component is large - so currently I was thinking that it needs to be either to the left or right - the remaining components can be in different lines beside it.

I started using GridBagLayout with some sample code I came across but I am not clear as to how to add the grid to it:

import java.awt.EventQueue;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;
import java.awt.Color;
import javax.swing.BorderFactory;
import javax.swing.border.Border;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.JLabel;


public class GridBagLayoutExample {
JFrame guiFrame;


public static void main(String[] args) {

     //Use the event dispatch thread for Swing components
     EventQueue.invokeLater(new Runnable()
     {

        @Override
         public void run()
         {

             new GridBagLayoutExample();         
         }
     });

}

public GridBagLayoutExample()
{ 
    guiFrame = new JFrame();

    //make sure the program exits when the frame closes
    guiFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    guiFrame.setTitle("GridBagLayout Example");
    guiFrame.setSize(600,300);

    //This will center the JFrame in the middle of the screen
    guiFrame.setLocationRelativeTo(null);

    //creating a border to highlight the component areas
    Border outline = BorderFactory.createLineBorder(Color.black);

    //create GribBagLayout and the GridBagLayout Constraints
    GridBagLayout gridBag = new GridBagLayout();
    GridBagConstraints cons = new GridBagConstraints();

    cons.fill = GridBagConstraints.BOTH;

    JPanel compPanel = new JPanel();
    compPanel.setLayout(gridBag);

    cons.gridx = 2;
    cons.gridy = 2;
    JLabel randomLbl = new JLabel("In Xanadu did Kubla Khan, "
            + "A stately pleasure-dome decree");
    randomLbl.setBorder(outline);
    gridBag.setConstraints(randomLbl, cons);
    compPanel.add(randomLbl);

    cons.ipady = 100;
    cons.ipadx = 100;
    cons.weighty = 1.0;
    cons.gridx = 0;
    cons.gridy = 0;
    JLabel tallLbl = new JLabel("Tall and Long");
    tallLbl.setBorder(outline);
    gridBag.setConstraints(tallLbl, cons);
    compPanel.add(tallLbl);

    cons.ipady = 50;
    cons.ipadx = 100;
    cons.weightx = 0;
    cons.gridx = 0;
    cons.gridy = 1;
    JButton hello = new JButton("Hello");
    gridBag.setConstraints(hello, cons);
    compPanel.add(hello);

    cons.ipady = 100;
    cons.ipadx = 10;
    cons.gridx = 1;
    cons.gridy = 1;
    JButton goodbye = new JButton("GoodBye");
    gridBag.setConstraints(goodbye, cons);
    compPanel.add(goodbye);

    cons.weightx = 0;
    cons.gridx = 0;
    cons.gridy = 2;
    JButton eh = new JButton("eh?");
    gridBag.setConstraints(eh, cons);
    compPanel.add(eh);


    guiFrame.add(compPanel);
    guiFrame.setVisible(true);

}

}

I am also thinking as to which manner would make this look good. Should I have the grid separately from the labels and text boxes or together? Which is recommended from a design point of view?

Answer 1

Take a second and break down your UI into areas of responsibility...

In you proposed layout, you have three main areas, for example...

You also have a sub group, for example...

To my mind, this brings up the possibility of at least two or three layouts managers depending on your needs. This is commonly known as compound layouts.

Starting with the "grid" area.

The main grid would either be a GridBagLayout or a GridLayout depending on your needs. This would create the main GridPanel.

You would add this to another JPanel which would be using a BorderLayout and add it to the center position.

To this panel you would add the "Current state" component to the SOUTH position. This forms the GridStatePanel.

You would then create another JPanel and probably using a GridBagLayout add your fields (the yellow section) to it, this would form the FieldsPanel.

You would then create another JPanel and probably using a BorderLayout, add the FieldsPanel to the WEST position and the GridStatePanel to the center. This would form your base or primary panel...I'll call this MainContentPane...so we know what we're talking about.

From there, you guest it, create another JPanel. To the NORTH position, add the "Title" component and then add the MainContentPane to the center.

This is a very powerful and important concept, it would be very difficult to find a single layout manager that would be capable to laying out the entire layout in a single go.

Answer 2

You're going to be very confused if you use GridBagLayout to do this whole thing. I tend to prefer composing layouts. Here's what your layout looks like to me:

1. Your outermost panel has a BorderLayout with a West and a Center. (Remember with a BorderLayout, the thing in the center expands when the window is stretched; the thing in the west (or east, north, south) does not)

2. Within the Center, you have a JPanel that also has a BorderLayout. In its north is a JLabel("Title"). In the center is the table. In the south is JLabel("Current State")

3. Within the West, you have a JPanel that has another BorderLayout. In the North is a JPanel with a GridLayout(3, 2) with JLabels (Label1, Label2, Label3) and the associated textfields. In the Center is your drop-down list (maybe? unclear from your diagram). In the South is the Button. (and, you probably want to constrain the size of the button or else it will take up the full width of the panel)

Answer 3

Use layout managers such as GridBagLayout to organize JObjects such as buttons, textfields, and comboboxes