CardLayout not showing next card

Question

I am having troubles with showing the next card with the card layout, I read the docs and various threads here. Code is "working", but as stated, does not show the next card. The three cards work separately, but not are not visible when accessed through the next() method

Here is the code:

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.JButton;
import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class Start {

public static void main(String[] args) {
    new Start().createFrame();
}

public void createFrame() {
    SwingUtilities.invokeLater(new Runnable() {
        public void run() {
            new Card().createMainGui();
        }
    });
}

class Card1 extends Card {

    public Card1() {
        createGui();
    }

    private void createGui() {
        /*
         * Create buttons and add them to the Card1 Panel
         */

        final JButton button = new JButton("Next");
        button.addActionListener(this);

        add(button);
    }
}

class Card2 extends Card {

    public Card2() {
        createGui();
    }

    private void createGui() {
        /*
         * Create label and add it to the Card2 Panel
         */

        JLabel label = new JLabel("Card2");
        add(label);
    }
}

class Card extends JPanel implements ActionListener {

    JFrame frame;
    final JPanel cards = new JPanel(new CardLayout(20, 20));

    void createMainGui() {
        /*
         * create main frame
         */
        frame = new JFrame("Testframe");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        /*
         * add the different cards to the Card Panel (Card Layout)
         */

        Card1 card1 = new Card1();
        cards.add(card1, "card1");

        Card2 card2 = new Card2();
        cards.add(card2, "card2");

        // Card3 card3 = new Card3();
        // cards.add(card3, "card3");

        /*
         * add the Card panel to the frame, pack it and make it visible
         */
        frame.add(cards, BorderLayout.CENTER);
        frame.pack();
        frame.setVisible(true);

    }

    @Override
    public void actionPerformed(ActionEvent e) {
        CardLayout cl = (CardLayout) cards.getLayout();
        cl.next(cards);
    }
}
}

Answer 1

The fault in my code was, that I extended the Card1 and Card2 classes from the Card class. Thus, they inherited also the method of creating the variable cards. In the EventListener, the wrong cards variable is referenced (the one created in class Card1) and therefore, the EventListener does not work. Solution: remove the extend in Card1 and Card2 and move the EventListener into an inner class of the class Cards

private class NewBlaBlaListener implements ActionListener {
    @Override
    public void actionPerformed(ActionEvent e) {
        //do your stuff here
    }
}

and add it the ActionListener within Cards to the Card1

card1.addNewBlaBlaListener(new NewBlaBlaListener());

Cheers