Positioning with Java GroupLayout

Question

The below code creates the following GUI.

But I would like to have TextFields "A" and "C" completely fill their respective rows (so that their right corners are aligned with the right edge of the JComboBox. Help would be much appreciated!

Here's the code:

JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setResizable(true);
        Dimension size = new Dimension( 310, 210 );
        frame.setSize(size);
        frame.setPreferredSize(size);

        JTextField tf1 = new JTextField();
        JTextField tf2 = new JTextField();
        JTextField tf3 = new JTextField();

        JLabel label1 = new JLabel( "A");
        JLabel label2 = new JLabel( "B");
        JLabel label3 = new JLabel( "C");

        String[] opts = {"1","2","3"};
        JComboBox dropdown = new JComboBox(opts);
        JPanel panel = new JPanel();

       GroupLayout layout = new GroupLayout(panel);
       panel.setLayout(layout);
       layout.setAutoCreateGaps(true);
       layout.setAutoCreateContainerGaps(true);

       GroupLayout.SequentialGroup hGroup = layout.createSequentialGroup();

       hGroup.addGroup(layout.createParallelGroup().
                addComponent(label1).addComponent(label2).
                addComponent(label3));

       hGroup.addGroup(layout.createParallelGroup().
                addComponent(tf1).addComponent(tf2).
                addComponent(tf3));

       hGroup.addGroup(layout.createParallelGroup().addComponent(dropdown));


       layout.setHorizontalGroup(hGroup);

       GroupLayout.SequentialGroup vGroup = layout.createSequentialGroup();

       vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE).
                addComponent(label1).addComponent(tf1));
       vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE).
                addComponent(label2).addComponent(tf2).addComponent(dropdown));  
       vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE).
               addComponent(label3).addComponent(tf3));

       layout.setVerticalGroup(vGroup);

       frame.add( panel, BorderLayout.NORTH );
       frame.setVisible(true);

Answer 1

I think the best for this would be to use GridBagLayout, it is al little bit hard to use, but if you read some tutorials you'll find that it is the perfect solution for you.

GridBagLayout have weight in x and y, fill in x and y, and it is like a table.

You need to specify table with 2 columns, and three rows. then each element need to be positioned in this table row and column, but the A and C should have gridtWidth set to 2 columns. And in the middle row you put jtextdield in one column, and jcombobox in the second.

Here you have sample program that do this:

    import java.awt.EventQueue;

import javax.swing.JFrame;
import java.awt.GridBagLayout;
import javax.swing.JTextField;
import java.awt.GridBagConstraints;
import java.awt.Insets;
import javax.swing.JComboBox;

public class Example {

    private JFrame frame;
    private JTextField textField;
    private JTextField textField_1;
    private JTextField textField_2;

    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    Example window = new Example();
                    window.frame.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Create the application.
     */
    public Example() {
        initialize();
    }

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
        frame = new JFrame();
        frame.setBounds(100, 100, 450, 300);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        GridBagLayout gridBagLayout = new GridBagLayout();
        gridBagLayout.columnWidths = new int[] {500, 500};
        gridBagLayout.rowHeights = new int[] {50, 50, 50};
        gridBagLayout.columnWeights = new double[]{1.0, 1.0};
        gridBagLayout.rowWeights = new double[]{0.0, 0.0, 0.0};
        frame.getContentPane().setLayout(gridBagLayout);

        textField = new JTextField();
        GridBagConstraints gbc_textField = new GridBagConstraints();
        gbc_textField.weightx = 1.0;
        gbc_textField.gridwidth = 2;
        gbc_textField.insets = new Insets(0, 0, 5, 0);
        gbc_textField.fill = GridBagConstraints.HORIZONTAL;
        gbc_textField.gridx = 0;
        gbc_textField.gridy = 0;
        frame.getContentPane().add(textField, gbc_textField);
        textField.setColumns(10);

        textField_1 = new JTextField();
        GridBagConstraints gbc_textField_1 = new GridBagConstraints();
        gbc_textField_1.weightx = 1.0;
        gbc_textField_1.insets = new Insets(0, 0, 5, 5);
        gbc_textField_1.fill = GridBagConstraints.HORIZONTAL;
        gbc_textField_1.gridx = 0;
        gbc_textField_1.gridy = 1;
        frame.getContentPane().add(textField_1, gbc_textField_1);
        textField_1.setColumns(10);

        JComboBox comboBox = new JComboBox();
        GridBagConstraints gbc_comboBox = new GridBagConstraints();
        gbc_comboBox.weightx = 1.0;
        gbc_comboBox.insets = new Insets(0, 0, 5, 0);
        gbc_comboBox.fill = GridBagConstraints.HORIZONTAL;
        gbc_comboBox.gridx = 1;
        gbc_comboBox.gridy = 1;
        frame.getContentPane().add(comboBox, gbc_comboBox);

        textField_2 = new JTextField();
        GridBagConstraints gbc_textField_2 = new GridBagConstraints();
        gbc_textField_2.weightx = 1.0;
        gbc_textField_2.gridwidth = 2;
        gbc_textField_2.fill = GridBagConstraints.HORIZONTAL;
        gbc_textField_2.gridx = 0;
        gbc_textField_2.gridy = 2;
        frame.getContentPane().add(textField_2, gbc_textField_2);
        textField_2.setColumns(10);
    }

}

It is hard to write UI by hand if you are not very familiar. Better idea is to use some UI Design tools. For example WindowBuilder in Eclipse. It can read and show your Frames and allow you to add button by just dragging it to the right place in the frame, it is a lot easier and faster. If you click in the added element you will automatically get created an action listener and you are ready to write the code for the action. I recommend this way of building UIs:)