How to position components in a JFrame?

Question

        jframe = new JFrame("Admin");
        jpanel = new JPanel();

        jpanel.setLayout(new FlowLayout());
        jframe.add(jpanel);

        userLabel = new JLabel("Username:");
        jpanel.add(userLabel);
        userLabel.setBounds(100, 100, 30, 30);

        userTxtfield = new JTextField(15);
        jpanel.add(userTxtfield);

        passwordTxtfield = new JTextField(15);
        jpanel.add(userTxtfield);
        jpanel.add(passwordTxtfield);

        passwordLabel = new JLabel("Password:");
        jpanel.add(passwordLabel);
        userLabel.setBounds(100, 100, 30, 30);

        loginButton= new JButton("Login");
        jpanel.add(loginButton);

        jframe.pack();
        jframe.setLocationRelativeTo(null);
        jframe.setSize(350,350);
        jframe.setVisible(true);

I am trying to make a neat login area for my program but I can't seem to get the two labels and text fields to line up with the button underneath. Is there a better way of doing this positioning of the components within this JFrame?

Answer 1

Use a JOptionPane to display a log-in dialog. One way to layout the components is to use a GridBagLayout.

The code that produces that is:

public void login() {
    JPanel loginPanel = new JPanel(new GridBagLayout());
    GridBagConstraints gbc = new GridBagConstraints(
            0, 0, 1, 1, 0, 0,
            GridBagConstraints.BASELINE_TRAILING,
            GridBagConstraints.NONE, 
            new Insets(5, 5, 5, 5), 4, 6);
    loginPanel.add(new JLabel("ID"), gbc);
    gbc.gridy = 1;
    loginPanel.add(new JLabel("Password"), gbc);
    gbc.anchor = GridBagConstraints.BASELINE_LEADING;
    gbc.gridx = 1;
    gbc.gridy = 0;
    loginPanel.add(new JTextField("enter ID", 10), gbc);
    gbc.gridy = 1;
    loginPanel.add(new JPasswordField(6), gbc);

    int result = JOptionPane.showConfirmDialog(
            ui, loginPanel, "LogIn", JOptionPane.OK_CANCEL_OPTION);
    if (result == JOptionPane.OK_OPTION) {
        // here a real app would check the results of the ID/password
        cardLayout.show(ui, "loggedin");
    }
}

Here is the complete example (an MCVE, as mentioned above).

import java.awt.*;
import javax.swing.*;
import javax.swing.border.EmptyBorder;

public class BlockTheFrame {

    private JComponent ui = null;
    private CardLayout cardLayout;

    BlockTheFrame() {
        initUI();
    }

    public final void initUI() {
        if (ui != null) {
            return;
        }

        cardLayout = new CardLayout();
        ui = new JPanel(cardLayout);
        ui.setBorder(new EmptyBorder(4, 4, 4, 4));

        JLabel login = new JLabel("Log in");
        login.setFont(login.getFont().deriveFont(200f));
        ui.add(login, "login");

        ui.add(new JLabel("logged in"), "loggedin");
    }

    public void login() {
        JPanel loginPanel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints(
                0, 0, 1, 1, 0, 0,
                GridBagConstraints.BASELINE_TRAILING,
                GridBagConstraints.NONE, 
                new Insets(5, 5, 5, 5), 4, 6);
        loginPanel.add(new JLabel("ID"), gbc);
        gbc.gridy = 1;
        loginPanel.add(new JLabel("Password"), gbc);
        gbc.anchor = GridBagConstraints.BASELINE_LEADING;
        gbc.gridx = 1;
        gbc.gridy = 0;
        loginPanel.add(new JTextField("enter ID", 10), gbc);
        gbc.gridy = 1;
        loginPanel.add(new JPasswordField(6), gbc);

        int result = JOptionPane.showConfirmDialog(
                ui, loginPanel, "LogIn", JOptionPane.OK_CANCEL_OPTION);
        if (result == JOptionPane.OK_OPTION) {
            // here a real app would check the results of the ID/password
            cardLayout.show(ui, "loggedin");
        }
    }

    public JComponent getUI() {
        return ui;
    }

    public static void main(String[] args) {
        Runnable r = new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (Exception useDefault) {
                }
                BlockTheFrame o = new BlockTheFrame();

                JFrame f = new JFrame(o.getClass().getSimpleName());
                f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
                f.setLocationByPlatform(true);

                f.setContentPane(o.getUI());
                f.pack();
                f.setMinimumSize(f.getSize());

                f.setVisible(true);
                o.login();
            }
        };
        SwingUtilities.invokeLater(r);
    }
}