[Java Swing] Screen transition by CardLayout

I want to create a GUI that allows you to switch screens with a button! !!

As of July 2020, I was looking for software under development using JavaSwing to have a function that transitions the screen (switches the screen) when a button is pressed like a website, but by using a function called CardLayout, the screen is displayed. It seems that transition is possible, so I would like to summarize it.

environment

• OS:Ubuntu18.04LTS
• JDK:OpenJDK 11.0.4

Define JFrame

First, define the basic JFrame.

PanelChangeTest.java

import javax.swing.*;

public class PanelChangeTest extends JFrame{

    public static void main(String[] args) {
        PanelChangeTest frame = new PanelChangeTest();
        frame.setTitle("Screen transition test");
        frame.setSize(900, 600);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

I will try it.

javac PanelChangeTest.java && java PanelChange

I was able to execute it safely.

Add buttons for panels and screen transitions

Then add a panel. The procedure is as follows

--Define three panels (panel01, panel02, panel03) for screen transition. --Define and store the parent panel (cardPanel) that stores the three panels. --Define a button for screen transition.

PanelChangeTest.java

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

public class PanelChangeTest extends JFrame{

    JPanel cardPanel;
    CardLayout layout;

    public static void main(String[] args) {
        PanelChangeTest frame = new PanelChangeTest();
        frame.setTitle("Screen transition test");
        frame.setSize(900, 600);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
        frame.setVisible(true);
    }

    public PanelChangeTest() {
        
        // panel01
        JPanel panel01 = new JPanel();
        JButton btn01 = new JButton("panel01");
        panel01.add(btn01);

        // panel02
        JPanel panel02 = new JPanel();
        panel02.setBackground(Color.DARK_GRAY);
        JButton btn02 = new JButton("panel02");
        panel02.add(btn02);

        // panel03
        JPanel panel03 = new JPanel();
        panel03.setBackground(Color.LIGHT_GRAY);
        JButton btn03 = new JButton("panel03");
        panel03.add(btn03);

        //Panel for Card Layout
        cardPanel = new JPanel();
        layout = new CardLayout();
        cardPanel.setLayout(layout);

        cardPanel.add(panel01, "panel01");
        cardPanel.add(panel02, "panel02");
        cardPanel.add(panel03, "panel03");

        //Card movement button
        JButton firstButton = new JButton("panel01");
        JButton secondButton = new JButton("panel02");
        JButton thirdButton = new JButton("panel03");

        JPanel btnPanel = new JPanel();
        btnPanel.add(firstButton);
        btnPanel.add(secondButton);
        btnPanel.add(thirdButton);

        //Place cardPanel and card movement button in JFrame
        Container contentPane = getContentPane();
        contentPane.add(cardPanel, BorderLayout.CENTER);
        contentPane.add(btnPanel, BorderLayout.PAGE_END);
    }
}

I will try it.

javac PanelChangeTest.java && java PanelChange

The added panel and button are displayed. However, at this stage, you cannot change the screen by pressing the button at the bottom of the screen.

Implementation of screen transition function

Add a screen transition function so that the screen can be switched by pressing the button at the bottom of the screen.

--Write ʻimplements ActionListenerin the class name to control the behavior when the button is clicked. --Write.addActionListener (this);and.setActionCommand ("panel name"); for each of the three buttons to give the button a function. --ʻActionPerformed () define to switch to the screen corresponding to each button.

PanelChangeTest.java

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

public class PanelChangeTest extends JFrame implements ActionListener{

    JPanel cardPanel;
    CardLayout layout;

    public static void main(String[] args) {
        PanelChangeTest frame = new PanelChangeTest();
        frame.setTitle("Screen transition test");
        frame.setSize(900, 600);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
        frame.setVisible(true);
    }

    public PanelChangeTest() {
        
        // panel01
        JPanel panel01 = new JPanel();
        JButton btn01 = new JButton("panel01");
        panel01.add(btn01);

        // panel02
        JPanel panel02 = new JPanel();
        panel02.setBackground(Color.DARK_GRAY);
        JButton btn02 = new JButton("panel02");
        panel02.add(btn02);

        // panel03
        JPanel panel03 = new JPanel();
        panel03.setBackground(Color.LIGHT_GRAY);
        JButton btn03 = new JButton("panel03");
        panel03.add(btn03);

        //Panel for Card Layout
        cardPanel = new JPanel();
        layout = new CardLayout();
        cardPanel.setLayout(layout);

        cardPanel.add(panel01, "panel01");
        cardPanel.add(panel02, "panel02");
        cardPanel.add(panel03, "panel03");

        //Card movement button
        JButton firstButton = new JButton("panel01");
        firstButton.addActionListener(this);
        firstButton.setActionCommand("panel01");

        JButton secondButton = new JButton("panel02");
        secondButton.addActionListener(this);
        secondButton.setActionCommand("panel02");

        JButton thirdButton = new JButton("panel03");
        thirdButton.addActionListener(this);
        thirdButton.setActionCommand("panel03");

        JPanel btnPanel = new JPanel();
        btnPanel.add(firstButton);
        btnPanel.add(secondButton);
        btnPanel.add(thirdButton);
     
        //Place cardPanel and card movement button in JFrame
        Container contentPane = getContentPane();
        contentPane.add(cardPanel, BorderLayout.CENTER);
        contentPane.add(btnPanel, BorderLayout.PAGE_END);
    }

    public void actionPerformed(ActionEvent e) {
        String cmd = e.getActionCommand();

        layout.show(cardPanel, cmd);
    }
}

I will try it.

javac PanelChangeTest.java && java PanelChange

The same screen as before was displayed. Click the button "panel02" at the bottom of the screen.

Switched to panel02. Similarly, click "panel 03".

Switched to panel03. The button at the top of the screen is for convenience to display the panel name, so this code does not have a function as a button.

Summary

This time, I tested GUI screen transitions with Java Swing.

It was just a test, so it was as simple as 3 methods in one file. To be practical

--Separate the display panels. --Method for screen transition button

I felt that it was necessary to configure highly customizable class methods while maintaining readability.

Reference site

Let's Programming: Let's Use Swing