Java Swing: Separating the GUI of each screen into separate files/classes

Question

I'm still a newbie in Java Swing, which we have been learning for a class, and I'm doing this for a small project.

So this is kind of what the GUI is like [without the specifications and design] when cramped in 1 java file. However, my file has become extremely messy due to the length of the code, and there were a lot of unnecessary variable names since I could not use the same variable name again for each screen. I've been learning Java Swing for 3 months in school, but I've only encountered this problem now. I want to know how to separate the GUI files (ie Screen1GUI.java, Screen2GUI.java, Screen3GUI.java,...) but sadly, we never tackled it, and I can't seem to find the right words to search it online.

public JLayeredPane layeredPane;
private JPanel Screen1, Screen2, Screen3;
private JButton switch1, switch2;

public MainGUI() {
    // other code

    Screen1 = new JPanel();
    // Screen1 GUI
    layeredPane.add(Screen1, "Screen 1");
    switch.addActionListener((ActionEvent a) -> {
       switchScreens(Screen2);
    });
    Screen1.add(switch1);

    Screen2 = new JPanel();
    // Screen2 GUI
    layeredPane.add(Screen2, "Screen 2");
    switch2.addActionListener((ActionEvent b) -> {
       switchScreens(Screen3);
    });
    Screen2.add(switch2);
    
    Screen3 = new JPanel();
    // Screen3 GUI
    layeredPane.add(Screen3, "Screen 3");
    
    CardLayout screens = (CardLayout) layeredPane.getLayout();
    screens.show(layeredPane, "Screen 1");

    // other code
}

public void switchScreens(JPanel screen) {
    layeredPane.removeAll();
    layeredPane.add(screen);
    layeredPane.repaint();
    layeredPane.revalidate();
}

Answer 1

To separate each swing object into it's own class you should be able to simply create a new class that extends JPanel eg

public class Screen1GUI extends JPanel {
    public Screen1GUI(){
        super();
    }
}

To make it even more organized you can probably abstract the class to take into account similar properties such as the Screen name and the switch button

public class Screen extends JPanel {
    
    private JButton switchButton;
    private String title;

    public Screen(){
        super();
    }
    
    public Screen(String title){
        this();
        this.title=title;
    }

    public void setNext(JPanel next){
        if(switchButton!=null){
                this.remove(switchButton);
        }
        if(next!=null){
            switchButton=new Button("next");
            switchButton.addActionListener(e->switchScreens(next));
        }
     }
    public String getTitle(){
        return title;
    }

    private void switchScreens(JPanel panel){
        Component parent = getParent();   
        parent.removeAll();
        parent.add(screen);
        parent.repaint();
        parent.revalidate();
    }
}

Then in your MainGUI method

Screen Screen1;
Screen Screen2;
Screen Screen3;
JLayeredPane layeredPane;
public void MainGUI(){
   Screen1 = new Screen("Screen1");
   Screen2 = new Screen("Screen2");
   Screen3 = new Screen("Screen3");
   Screen1.setNext(Screen2);
   Screen2.setNext(Screen3);
   addAll(Screen1,Screen2,Screen3);
}
public void addAll(Screen...screens){
    for(Screen screen : screens){
        layeredPane.add(screen,screen.getTitle());
    }
}