Java Swing/AWT gui formatting

Question

I am just learning Java GUIs, and about layout managers and am looking to create a GUI with the following layout. What would be the best way to approach this? ( JFrame is 1000w x 800h)

Here is what I've thought of doing with some success, and a messy solution that doesn't match the wanted layout exactly

JFrame myFrame (GridLayout(2,1))
    - JPanel topPanel (BorderLayout)
        - JPanel topLeftPanel (GridLayout(9,2) & setSize 666,400)
            - JLabel buyingAnInvestment      - Jlabel empty1
            - JLabel type                    - JComboBox typeSelect
            - JLabel symbol                  - JTextField symbolField
            - JLabel empty2                  - JLabel empty3
            - JLabel name                    - JTextField nameField
            - JLabel empty4                  - JLabel empty5
            - JLabel quantity                - JTextField quantityField
            - JLabel empty6                  - JLabel epty7
            - JLabel price                   - JTextField price
        - JPanel topRightPanel (GridLayout(2,1) & setSize 333,400)
            - JButton reset
            - JButton buy
    - JPanel bottomPanel (What should I do for this?)
        - JLabel messages
        - JTextArea & JScrollArea

How would you layout the components and JPanel containers to get the expected result? Any direction would be greatly appreciated.

Answer 1

If the GUI can have Buying an investment & Messages as a TitledBorder , I'd lay it out as follows:

• Outer layout - BorderLayout
  1. Buying an investment using a two column GridBagLayout of labels and fields. Put it in the CENTER of the border layout.
  2. Reset / Buy buttons in a single column GridLayout with an ample EmptyBorder and vertical layout padding. Put that panel in the LINE_END of the border layout.
  3. The text area insinde a panel / constraint that will stretch it to full width & height EG using another GridLayout in the PAGE_END of the border layout.

( JFrame is 1000w x 800h)

Don't try to guess the size the GUI needs. Layout all the components, then pack() the frame. The GUI will become the smallest size it needs in order to display everything it contains.

Answer 2

This is mostly an elaboration of @AndrewThompson's answer. The changes and simplifications as compared to your original approach are:

• No explicit setSize calls. Instead let the layout-managers choose the sizes when pack() is called on the JFrame and when the user resizes it.
• There are only 3 panels (as CENTER , EAST and SOUTH part in a BorderLayout ).
• The headings "Buy an investment" and "Messages" are implemented as TitledBorder , not as JLabel .
• Using GridBagLayout instead of GridLayout , because then you have much better control by using proper GridBagConstraints (especially fill , anchor , weightx , weighty , insets ).

The above layout was produced by following code:

public class Main {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(Main::initGUI);
    }

    private static void initGUI() {
        JFrame myFrame = new JFrame("Investment Portfolio");
        myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        myFrame.setLayout(new BorderLayout());

        JPanel topLeftPanel = new JPanel(new GridBagLayout());
        myFrame.add(topLeftPanel, BorderLayout.CENTER);
        topLeftPanel.setBorder(BorderFactory.createTitledBorder("Buying an investment"));
        GridBagConstraints labelConstraints = new GridBagConstraints();
        labelConstraints.anchor = GridBagConstraints.WEST;
        labelConstraints.gridx = 0;
        labelConstraints.gridy = 0;
        labelConstraints.weightx = 0.5;
        labelConstraints.weighty = 1;
        labelConstraints.insets = new Insets(5, 10, 5, 10);
        GridBagConstraints fieldConstraints = new GridBagConstraints();
        fieldConstraints.anchor = GridBagConstraints.WEST;
        fieldConstraints.gridx = 1;
        fieldConstraints.gridy = 0;
        fieldConstraints.weightx = 0.5;
        fieldConstraints.weighty = 1;
        fieldConstraints.insets = new Insets(5, 10, 5, 10);
        topLeftPanel.add(new JLabel("Type"), labelConstraints);
        JComboBox<String> typeSelect = new JComboBox<>(new String[] { "stock", "aaaaaaaa" });
        topLeftPanel.add(typeSelect, fieldConstraints);
        labelConstraints.gridy++;
        topLeftPanel.add(new JLabel("Symbol"), labelConstraints);
        JTextField symbolField = new JTextField(10);
        fieldConstraints.gridy++;
        topLeftPanel.add(symbolField, fieldConstraints);
        labelConstraints.gridy++;
        topLeftPanel.add(new JLabel("Name"), labelConstraints);
        JTextField nameField = new JTextField(20);
        fieldConstraints.gridy++;
        topLeftPanel.add(nameField, fieldConstraints);
        labelConstraints.gridy++;
        topLeftPanel.add(new JLabel("Quantity"), labelConstraints);
        JTextField quantityField = new JTextField(6);
        fieldConstraints.gridy++;
        topLeftPanel.add(quantityField, fieldConstraints);
        labelConstraints.gridy++;
        topLeftPanel.add(new JLabel("Price"), labelConstraints);
        JTextField priceField = new JTextField(6);
        fieldConstraints.gridy++;
        topLeftPanel.add(priceField, fieldConstraints);

        JPanel topRightPanel = new JPanel(new GridBagLayout());
        topRightPanel.setBorder(BorderFactory.createEmptyBorder());
        myFrame.add(topRightPanel, BorderLayout.EAST);
        GridBagConstraints buttonConstraints = new GridBagConstraints();
        buttonConstraints.fill = GridBagConstraints.HORIZONTAL;
        buttonConstraints.insets = new Insets(10, 10, 10, 10);
        buttonConstraints.weighty = 1;
        buttonConstraints.gridy = 0;
        JButton reset = new JButton("Reset");
        topRightPanel.add(reset, buttonConstraints);
        JButton buy = new JButton("Buy");
        buttonConstraints.gridy++;
        topRightPanel.add(buy, buttonConstraints);

        JPanel bottomPanel = new JPanel(new BorderLayout());
        myFrame.add(bottomPanel, BorderLayout.SOUTH);
        bottomPanel.setBorder(BorderFactory.createTitledBorder("Messages"));
        JTextArea messagesArea = new JTextArea(6, 30);
        bottomPanel.add(new JScrollPane(messagesArea, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,
                JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS), BorderLayout.CENTER);

        myFrame.pack();
        myFrame.setVisible(true);
    }
}