JPanel and Layouts - potatoscript/JavaSwing GitHub Wiki

🎨 JPanel and Layouts in Java Swing 📚

🎯 What is JPanel?

JPanel is a container that holds and organizes GUI components such as buttons, labels, and text fields. It is often used to group components and apply specific layouts.

✅ Key Features:

📦 Group Components: Add multiple components to a frame.
🎛️ Supports Layout Managers: Allows arranging components efficiently.
🎨 Customizable Appearance: Supports setting background colors, borders, and more.

📚 Step 1: Creating a Basic JPanel

📝 Basic Syntax

import javax.swing.*;

public class MyPanel {
    public static void main(String[] args) {
        // Create JFrame
        JFrame frame = new JFrame("JPanel Example");

        // Create JPanel
        JPanel panel = new JPanel();

        // Create JLabel and JButton
        JLabel label = new JLabel("Enter your name:");
        JTextField textField = new JTextField(20);
        JButton button = new JButton("Submit");

        // Add components to the panel
        panel.add(label);
        panel.add(textField);
        panel.add(button);

        // Add panel to the frame
        frame.add(panel);

        // Set frame properties
        frame.setSize(300, 150);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

🎨 Explanation

✅ JPanel panel = new JPanel();

Creates a JPanel container to hold components.

✅ panel.add(label);

Adds components to the panel.

✅ frame.add(panel);

Adds the panel to the JFrame.

✅ frame.setSize(300, 150);

Sets the window size to 300x150 pixels.

👩‍🎨 Output:

+---------------------------------+
| Enter your name:  ___________   |
|                                 |
|         [Submit]                |
+---------------------------------+

🎨 Step 2: Adding Multiple Panels to JFrame

📝 Example: Using Multiple JPanels

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

public class MultiplePanels {
    public static void main(String[] args) {
        // Create JFrame
        JFrame frame = new JFrame("Multiple JPanel Example");

        // Create two JPanels
        JPanel topPanel = new JPanel();
        JPanel bottomPanel = new JPanel();

        // Add components to top panel
        topPanel.add(new JLabel("Top Panel 🚀"));
        topPanel.setBackground(Color.CYAN);

        // Add components to bottom panel
        bottomPanel.add(new JLabel("Bottom Panel 🎨"));
        bottomPanel.setBackground(Color.PINK);

        // Set Layout for frame
        frame.setLayout(new BorderLayout());

        // Add panels to frame
        frame.add(topPanel, BorderLayout.NORTH);
        frame.add(bottomPanel, BorderLayout.SOUTH);

        // Set frame properties
        frame.setSize(400, 200);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

🎨 Explanation

✅ topPanel.add(new JLabel("Top Panel 🚀"));

Adds a label to the topPanel.

✅ topPanel.setBackground(Color.CYAN);

Sets the background color to cyan.

✅ frame.setLayout(new BorderLayout());

Specifies a BorderLayout for the frame.

✅ frame.add(topPanel, BorderLayout.NORTH);

Adds topPanel to the top (NORTH) of the frame.

✅ frame.add(bottomPanel, BorderLayout.SOUTH);

Adds bottomPanel to the bottom (SOUTH) of the frame.

👩‍🎨 Output:

+------------------------+
|  Top Panel 🚀           |
+------------------------+
|                        |
|  Bottom Panel 🎨        |
+------------------------+

🎛️ Step 3: Understanding Layout Managers

🎯 What is a Layout Manager?

A Layout Manager controls the positioning and size of components in a JPanel or JFrame.

Layout Manager	Description	Usage Example
`FlowLayout`	Arranges components in a row (default).	`panel.setLayout(new FlowLayout());`
`BorderLayout`	Divides the container into 5 regions.	`panel.setLayout(new BorderLayout());`
`GridLayout`	Arranges components in a grid.	`panel.setLayout(new GridLayout(2, 2));`
`BoxLayout`	Arranges components vertically/horizontally.	`panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));`
`GridBagLayout`	Flexible grid-based layout.	`panel.setLayout(new GridBagLayout());`

📚 Step 4: Exploring Different Layouts

🔥 1. FlowLayout (Default Layout)

Arranges components horizontally in a row.
Components align to the center by default.

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

public class FlowLayoutExample {
    public static void main(String[] args) {
        // Create JFrame
        JFrame frame = new JFrame("FlowLayout Example");

        // Create JPanel with FlowLayout
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT, 10, 10));

        // Add buttons to panel
        panel.add(new JButton("Button 1"));
        panel.add(new JButton("Button 2"));
        panel.add(new JButton("Button 3"));

        // Add panel to frame
        frame.add(panel);

        // Set frame properties
        frame.setSize(300, 150);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

✅ FlowLayout(FlowLayout.LEFT, 10, 10);

Aligns components to the left with 10px horizontal and 10px vertical gaps.

👩‍🎨 Output:

+------------------------------+
| Button 1  Button 2  Button 3  |
+------------------------------+

🔥 2. BorderLayout

Divides the container into 5 regions:
- NORTH, SOUTH, EAST, WEST, and CENTER.

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

public class BorderLayoutExample {
    public static void main(String[] args) {
        // Create JFrame
        JFrame frame = new JFrame("BorderLayout Example");

        // Set BorderLayout
        frame.setLayout(new BorderLayout());

        // Add buttons to different regions
        frame.add(new JButton("NORTH"), BorderLayout.NORTH);
        frame.add(new JButton("SOUTH"), BorderLayout.SOUTH);
        frame.add(new JButton("EAST"), BorderLayout.EAST);
        frame.add(new JButton("WEST"), BorderLayout.WEST);
        frame.add(new JButton("CENTER"), BorderLayout.CENTER);

        // Set frame properties
        frame.setSize(400, 300);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

👩‍🎨 Output:

+------------------------+
|        NORTH            |
+----+------------+------+
|WEST|   CENTER   | EAST |
+----+------------+------+
|        SOUTH            |
+------------------------+

🔥 3. GridLayout

Arranges components in a grid of rows and columns.

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

public class GridLayoutExample {
    public static void main(String[] args) {
        // Create JFrame
        JFrame frame = new JFrame("GridLayout Example");

        // Set GridLayout (2 rows, 3 columns)
        frame.setLayout(new GridLayout(2, 3));

        // Add buttons to grid
        for (int i = 1; i <= 6; i++) {
            frame.add(new JButton("Button " + i));
        }

        // Set frame properties
        frame.setSize(300, 200);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

👩‍🎨 Output:

+--------+--------+--------+
| Button1| Button2| Button3|
+--------+--------+--------+
| Button4| Button5| Button6|
+--------+--------+--------+

🔥 4. BoxLayout

Arranges components vertically or horizontally.

import javax.swing.*;

public class BoxLayoutExample {
    public static void main(String[] args) {
        // Create JFrame
        JFrame frame = new JFrame("BoxLayout Example");

        // Create JPanel with BoxLayout (Y_AXIS)
        JPanel panel = new JPanel();
        panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));

        // Add buttons vertically
        panel.add(new JButton("Button 1"));
        panel.add(new JButton("Button 2"));
        panel.add(new JButton("Button 3"));

        // Add panel to frame
        frame.add(panel);

        // Set frame properties
        frame.setSize(200, 200);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

👩‍🎨 Output:

+--------+
| Button1|
| Button2|
| Button3|
+--------+

🔥 5. GridBagLayout (Advanced Layout)

Flexible grid-based layout with precise control.

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

public class GridBagLayoutExample {
    public static void main(String[] args) {
        JFrame frame = new JFrame("GridBagLayout Example");
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();

        // Button 1 - Occupies full width
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.gridwidth = 2;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        panel.add(new JButton("Button 1"), gbc);

        // Button 2 - Left side
        gbc.gridx = 0;
        gbc.gridy = 1;
        gbc.gridwidth = 1;
        panel.add(new JButton("Button 2"), gbc);

        // Button 3 - Right side
        gbc.gridx = 1;
        gbc.gridy = 1;
        panel.add(new JButton("Button 3"), gbc);

        frame.add(panel);
        frame.setSize(300, 150);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

👩‍🎨 Output:

+-------------------------+
|       Button 1           |
+--------+----------------+
|Button 2| Button 3        |
+--------+----------------+

🎁 Bonus: Customizing JPanel Appearance

🎨 Set Background Color

panel.setBackground(Color.LIGHT_GRAY);

🎨 Set Border

panel.setBorder(BorderFactory.createLineBorder(Color.BLACK, 2));

🎨 Set Preferred Size

panel.setPreferredSize(new Dimension(300, 200));