Building GUI using GroupLayout in Java

newtothissite picture newtothissite · Apr 22, 2013 · Viewed 14.6k times · Source

I need to build a GUI using GroupLayout (not other layouts). The GUI will look like the following:

----------------------------
| field 1  field 2  field 3 |

| FFIEEELLLDD4 FIELDDDDDD5  |

| FIEEEEEEEEEEEEEEELDDDD 6  |
_____________________________

Fields 1 - 3 take 1 length each, field 4 and 5 take 1.5 length each, and field 6 takes 3 length. The three groups are aligned both at the beginning and the end.

I've been referring to this http://docs.oracle.com/javase/tutorial/uiswing/layout/group.html.

For simplicity, I will use JLabels as place holders for the fields.

Here's my code so far and I have no luck getting the GUI I wanted.

public class RecorderGUI extends JFrame {
    private final JLabel one;
    private final JLabel two;
    private final JLabel three;
    private final JLabel four;
    private final JLabel five;
    private final JLabel six;
public RecorderGUI() {
    JFrame frame = new JFrame();
    JPanel panel = new JPanel();
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    GroupLayout layout = new GroupLayout(panel);
    panel.setLayout(layout);

    one = new JLabel("one");
    two = new JLabel("two");
    three = new JLabel("three");
    four = new JLabel("four");
    five = new JLabel("five");
    six = new JLabel("six");
        layout.setHorizontalGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup())
                .addComponent(one)
                .addComponent(two)
                .addComponent(three)
            .addGroup(layout.createSequentialGroup())
                .addComponent(four)
                .addComponent(five))
            .addComponent(six));

        layout.setVerticalGroup(layout.createSequentialGroup()
            .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
                .addComponent(one)
                .addComponent(two)
            .addComponent(three))
        .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
            .addComponent(four)
            .addComponent(five))
            .addComponent(six));
        frame.add(panel);
        frame.pack();
        frame.setVisible(true);
    }
    public static void main(final String[] args) {
        RecorderGUI GUI = new RecorderGUI();
    }

The code is resulting in the following, which is not what I wanted: one, two and three are merged together; four and five overlap as well.

Sorry, I would like to add a picture of the output GUI, but I can't attach pictures because I have under 10 reputation :(.

Answer

Howard picture Howard · Apr 22, 2013

Fixed some parantheses and added resizing hints for components:

layout.setHorizontalGroup(layout
    .createParallelGroup(GroupLayout.Alignment.LEADING)
    .addGroup(layout.createSequentialGroup()
        .addComponent(one, 0, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
        .addComponent(two, 0, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
        .addComponent(three, 0, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
    .addGroup(layout.createSequentialGroup()
        .addComponent(four, 0, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
        .addComponent(five, 0, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
    .addComponent(six, 0, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE));

layout.setVerticalGroup(layout.createSequentialGroup()
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
        .addComponent(one).addComponent(two).addComponent(three))
    .addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE)
        .addComponent(four).addComponent(five))
    .addComponent(six));

enter image description here