Multiple Panels Below Each Other

Question

Is it possible i can have a top panel for a login. Then a middle and bottom panel underneath. I'm using gridbaglayout and i have assigned 2 panels. One panel has components linked to it for login details and the other panel has other components linked to it. However, it's not going occurring to plan. Ive tried using Box/Borderlayout to do this, but then i'm not able to create the spacing i want.

Here is a sketch of what i want.

public class GUI extends JFrame{

    private JPanel myTopPL, myTopPL2;
    private JTextField myUsernameTF;
    private JTextField myPasswordTF;
    private JTextField myMessageTF;
    private JLabel myUsernameLBL;
    private JLabel myPasswordLBL;
    private JLabel myItemsLBL;
    private JTextArea myMainTA;
    private JButton myLoginBN;
    private JButton myConnectBN;
    private JButton mySendBN;
    private JComboBox myItemsCB;

    public GUI () {

        super("GUI ");

        setLayout(new GridBagLayout());
        myTopPL = new JPanel();
        myTopPL2 = new JPanel();
        myTopPL.setLayout(new GridBagLayout());
        myTopPL2.setLayout(new GridBagLayout());
        GridBagConstraints myTopPLGBC = new GridBagConstraints();
        myTopPLGBC.weightx = 1;
        myTopPLGBC.weighty = 1;
        GridBagConstraints myTopPLGBC2 = new GridBagConstraints();
        myTopPLGBC.weightx = 2;
        myTopPLGBC.weighty = 2;

        myUsernameLBL = new JLabel("Username: ");
        myUsernameLBL.setFont(new Font("Arial", Font.BOLD, 13));
        myTopPLGBC.gridx = 1;
        myTopPLGBC.gridy = 1;
        myTopPLGBC.insets = new Insets(5,5,5,5);
        myTopPL.add(myUsernameLBL, myTopPLGBC);

        myUsernameTF = new JTextField(10);
        myTopPLGBC.gridx = 2;
        myTopPLGBC.gridy = 1;
        myTopPLGBC.insets = new Insets(5,5,5,5);
        myTopPL.add(myUsernameTF,myTopPLGBC);

        myPasswordLBL = new JLabel("Password: ");
        myPasswordLBL.setFont(new Font("Arial", Font.BOLD, 13));
        myTopPLGBC.gridx = 3;
        myTopPLGBC.gridy = 1;
        myTopPLGBC.insets = new Insets(5,5,5,5);
        myTopPL.add(myPasswordLBL, myTopPLGBC);

        myPasswordTF = new JTextField(10);
        myTopPLGBC.gridx = 4;
        myTopPLGBC.gridy = 1;
        myTopPLGBC.insets = new Insets(5,5,5,5);
        myTopPL.add(myPasswordTF,myTopPLGBC);

        myLoginBN = new JButton("Login");
        myTopPLGBC.gridx = 5;
        myTopPLGBC.gridy = 1;
        myTopPLGBC.insets = new Insets(5,5,5,5);
        myTopPL.add(myLoginBN,myTopPLGBC);

        myItemsLBL = new JLabel("Items: ");
        myItemsLBL.setFont(new Font("Arial", Font.BOLD, 13));
        myTopPLGBC2.gridx = 1;
        myTopPLGBC2.gridy = 3;
        myTopPLGBC2.insets = new Insets(5,5,5,5);
        myTopPL2.add(myItemsLBL, myTopPLGBC2);

        myItemsCB = new JComboBox();
        myItemsCB.addItem("     Select an Item     ");
        myTopPLGBC2.gridx = 1;
        myTopPLGBC2.gridy = 4;
        myTopPLGBC2.insets = new Insets(5,5,5,5);
        myTopPL2.add(myItemsCB, myTopPLGBC2);

        myConnectBN = new JButton("Connect");
        myTopPLGBC2.gridx = 2;
        myTopPLGBC2.gridy = 4;
        myTopPLGBC2.insets = new Insets (5,5,5,5);
        myTopPL2.add(myConnectBN, myTopPLGBC2);

        GridBagConstraints GBC = new GridBagConstraints();
        GBC.anchor = GridBagConstraints.NORTHWEST;
        GBC.weightx = 1;
        GBC.weighty = 1; 
        this.add(myTopPL,GBC);  

        GridBagConstraints GBC2 = new GridBagConstraints();
        GBC2.anchor = GridBagConstraints.NORTHWEST;
        GBC2.weightx = 2;
        GBC2.weighty = 2; 
        this.add(myTopPL2,GBC2);    

    }

    public static void main(String[] args) {

        GUI GUI = new GUI ();
        GUI .setDefaultCloseOperation(RMIAuctionHouse.EXIT_ON_CLOSE);
        GUI .setSize(750,500);
        GUI .setVisible(true);
    }
}

score 5 · Accepted Answer · answered Nov 16 '12 at 12:05

I'd break down the application into it's individual areas of responsibilities and focus on creating the UI elements to support it. This will allow you to focus on the needs of each section of your application, it also allows you the opportunity to change around the layout as you need

enter image description here

public class TestLayout15 {

    public static void main(String[] args) {
        new TestLayout15();
    }

    public TestLayout15() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new MainPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }

        });
    }

    public class MainPane extends JPanel {

        private JTextField messageField;
        private JButton sendButton;

        public MainPane() {
            setBorder(new EmptyBorder(4, 4, 4, 4));
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.weightx = 1;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            add(new LoginPane(), gbc);
            gbc.gridy++;
            add(new ConnectPane(), gbc);
            gbc.gridy++;
            gbc.weighty = 1;
            gbc.fill = GridBagConstraints.BOTH;
            add(new JScrollPane(new JTextArea(5, 20)), gbc);

            gbc.gridwidth = 1;

            messageField = new JTextField(10);
            sendButton = new JButton("Send");

            gbc.gridy++;
            gbc.weighty = 0;
            gbc.fill = GridBagConstraints.HORIZONTAL;
            add(messageField, gbc);
            gbc.gridx++;
            gbc.weightx = 0;
            add(sendButton, gbc);            
        }

    }

    public class ConnectPane extends JPanel {

        private JComboBox comboBox;
        private JButton connectButton;

        public ConnectPane() {
            comboBox = new JComboBox();
            connectButton = new JButton("Connect");

            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.anchor = GridBagConstraints.WEST;
            add(comboBox, gbc);

            gbc.gridx++;
            gbc.weightx = 1;
            add(connectButton, gbc);
        }

    }

    public class LoginPane extends JPanel {

        private JTextField userNameField;
        private JPasswordField passwordField;
        private JButton loginButton;

        public LoginPane() {

            userNameField = new JTextField(10);
            passwordField = new JPasswordField(10);
            loginButton = new JButton("Login");

            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.anchor = GridBagConstraints.WEST;
            add(new JLabel("User name:"), gbc);

            gbc.gridx++;
            add(userNameField, gbc);

            gbc.gridx++;
            add(new JLabel("Password:"), gbc);

            gbc.gridx++;
            add(passwordField, gbc);

            gbc.gridx++;
            gbc.weightx = 1;
            add(loginButton, gbc);

        }

    }

}

score 1 · Answer 2 · answered Nov 16 '12 at 12:05

To start with, replace the call to GUI.setSize(750,500) with GUI.pack(). That will size the window to fit your content. After doing that you'll see the second panel is appearing to the right of the first. This is because you did not set gridx/gridy on GBC2 so it defaults to putting myTopPL2 to the right of myTopPL1, not below it.

I rarely explicitly set the gridx/gridy when using GridBagLayout. For your first row of the display, I would use default values for all but myLoginBN where I would set gridwidth to GridBagConstraints.REMAINDER. That tells GridBagLayout that nothing else goes on this row. The next item added with a default gbc will be placed at the start of the second row.

Minor nits:

Use standard Java capitalization:
- Class name are camelcase with a leading uppercase character. So, "Gui", not "GUI".
- Instance names are camelcase with a leading lowercase character. So, "gbc1" not "GBC1"

Use SwingUtilities.InvokeLater to start the Gui on the EDT

SwingUtilities.invokeLater(new Runnable() {
    public void run() {
        GUI GUI = new GUI ();
        GUI .setDefaultCloseOperation(RMIAuctionHouse.EXIT_ON_CLOSE);
        GUI .setSize(750,500);
        GUI .setVisible(true);
    }});

score -3 · Answer 3 · edited Nov 16 '12 at 17:27

-3

Seems you are not familiar with Java layouts, so i recomend you to try null(absolute) Layout:

setLayout(null);
...
component.setBounds( x, y, width, heigh );
add(component);

Here example

package gui;

import java.awt.Font;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;


public class GUI extends JFrame{

    private JTextField myUsernameTF;
    private JLabel myUsernameLBL;

    public GUI() {

        super("GUI ");
        setLayout(null);     

        myUsernameLBL = new JLabel("Username: ");
        myUsernameLBL.setFont(new Font("Arial", Font.BOLD, 13));
        myUsernameLBL.setBounds(50,30,80,20);
        add(myUsernameLBL);

        myUsernameTF = new JTextField(10);
        myUsernameTF.setBounds(190,30,80,20);
        add(myUsernameTF);

        // and so on ...



    }

    public static void main(String[] args) {
        GUI frame = new GUI();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(750,500);
        frame.setVisible(true);
    }
}

Good luck on thorny way to handle java swing =)

edited Nov 16 '12 at 17:27

gmatagmis

318
2
5

answered Nov 16 '12 at 12:25

gmatagmis

70
2

2

-1 Please reconsider these troubling issues: `null` layout, confusingly named `contentPane`, gratuitous double-brace, and _replacing_ the content pane when your first bullet says _not_ to do so. See also this [answer](http://stackoverflow.com/a/11769153/230513). – trashgod Nov 16 '12 at 14:50
1

How can you say *"Seems you are not familiar with Java layouts"* and *"i recomend you to try null(absolute) Layout"* in the same sentence? The fact they seem unfamiliar with layouts is the greatest opportunity for education I could possibly consider. Null layouts are only good for things like animation, defiantly not form design -IMHO – MadProgrammer Nov 16 '12 at 19:54
@MadProgrammer: True, despite errant spelling correction of _definitely_. :-) – trashgod Nov 16 '12 at 20:14
If you have two accounts, you can request a [merge](http://meta.stackexchange.com/q/18232/163188). – trashgod Nov 16 '12 at 20:16
@trashgod IPad + crying, wriggling 6 month old makes for bad typing :( (besides, I was incensed by the recommendation of a null layout) – MadProgrammer Nov 16 '12 at 20:32

Multiple Panels Below Each Other

3 Answers3