JPanels won't show up in Cardlayout container

Question

I am trying to create multiple JPanels that will open whenever buttons are pressed. I tried following this tutorial

http://java.about.com/od/Layout_Managers/ss/Cardlayout-Example-Program.htm

but my program does not work. The frame opens up with nothing inside it. I will be adding more panel classes once I can get this to work.

import java.awt.event.*;
import java.awt.*;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javafx.scene.layout.Border;
import javax.imageio.ImageIO;
import javax.swing.BorderFactory;
import javax.swing.border.LineBorder;
import javax.swing.Box;
import javax.swing.ButtonGroup;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JCheckBox;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JTextField;
import javax.swing.JTextArea;
import javax.swing.Icon;
import javax.swing.*;

public class CardLayoutExample
{
    private JPanel contentPane;
    private MyPanel1 panel1;
    private MyPanel2 panel2;
    CardLayout cl;

    private void displayGUI()
     {
        JFrame frame = new JFrame("Card Layout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());

        cl = new CardLayout();
        JPanel contentPane = new JPanel();
        contentPane.setLayout(cl);
        cl.show(contentPane, "Panel 1");
        panel1 = new MyPanel1();
        panel2 = new MyPanel2();
        contentPane.add(panel1, "Panel 1");
        contentPane.add(panel2, "Panel 2");
        frame.add(contentPane,BorderLayout.NORTH); 
        //frame.setContentPane(contentPane);
        frame.pack();   
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    } 

    public static void main(String... args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                new CardLayoutExample().displayGUI();
            }
        });
    }
}

class MyPanel1 extends JPanel {

    private JPanel contentPane;
    JTextField JTextfield1 = new JTextField(15), JTextfield2 = new JTextField(15);
    JTextArea Discription = new JTextArea(4,30);

    public MyPanel1() {

        contentPane = new JPanel();
        contentPane.setLayout(new GridBagLayout());
        contentPane.setBackground(Color.WHITE);

      //add components
        addItem(contentPane, new JLabel("Sample ID:"), 0, 0, 1, 1, GridBagConstraints.SOUTHWEST);
        addItem(contentPane, new JLabel("User ID:"), 1, 0, 1, 1, GridBagConstraints.SOUTHWEST);
        addItem(contentPane, new JLabel("Bone Description:"), 0, 2, 1, 1, GridBagConstraints.SOUTHWEST);

        addItem(contentPane, JTextfield1, 0, 1, 1, 1, GridBagConstraints.NORTHWEST);
        addItem(contentPane, JTextfield2, 1, 1, 1, 1, GridBagConstraints.NORTHWEST);
        addItem(contentPane, Discription, 0, 3, 1, 1, GridBagConstraints.WEST);

        Icon nextIcon = new ImageIcon("arrow.jpeg");
        JButton nextButton = new JButton("Next", nextIcon);
        addItem(contentPane, nextButton, 1, 4, 1, 1, GridBagConstraints.NORTHEAST);
        nextButton.addActionListener( new ActionListener(){
        public void actionPerformed(ActionEvent e)
        {
            CardLayout cardLayout = (CardLayout) contentPane.getLayout();
            cardLayout.show(contentPane, "Panel 2");
        }
    });
}

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    } 
}

class MyPanel2 extends JPanel {

    public MyPanel2() {
        System.out.print("asdf");    
    }

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    }
}

Answer 1

The basic problem here is that the MyPanel1 both extends JPanel and has a JPanel as a member of the class.

My advice would be to not extend panel, and use the contentPane declared as an attribute instead. Extending a class is something we should do when changing the behavior of a class or adding functionality, and neither is happening here.

The next problem to solve, will be this lot:

    public void actionPerformed(ActionEvent e)
    {
        CardLayout cardLayout = (CardLayout) contentPane.getLayout();
        cardLayout.show(contentPane, "Panel 2");
    }

Update

Here is my first suggestion implemented (poorly - there should be a get method to obtain the actual panel). It also points to a fix for the 2nd problem.

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

public class CardLayoutExample
{
    private MyPanel1 panel1;
    private MyPanel2 panel2;
    CardLayout cl;

    private void displayGUI()
     {
        JFrame frame = new JFrame("Card Layout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());

        cl = new CardLayout();
        JPanel contentPane = new JPanel();
        contentPane.setLayout(cl);
        cl.show(contentPane, "Panel 1");
        panel1 = new MyPanel1();
        panel2 = new MyPanel2();
        contentPane.add(panel1.contentPane, "Panel 1");
        contentPane.add(panel2, "Panel 2");
        frame.add(contentPane,BorderLayout.NORTH); 
        //frame.setContentPane(contentPane);
        frame.pack();   
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    } 

    public static void main(String... args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                new CardLayoutExample().displayGUI();
            }
        });
    }
}

class MyPanel1 {

    JPanel contentPane;
    JTextField JTextfield1 = new JTextField(15), JTextfield2 = new JTextField(15);
    JTextArea Discription = new JTextArea(4,30);

    public MyPanel1() {

        contentPane = new JPanel();
        contentPane.setLayout(new GridBagLayout());
        contentPane.setBackground(Color.WHITE);

      //add components
        addItem(contentPane, new JLabel("Sample ID:"), 0, 0, 1, 1, GridBagConstraints.SOUTHWEST);
        addItem(contentPane, new JLabel("User ID:"), 1, 0, 1, 1, GridBagConstraints.SOUTHWEST);
        addItem(contentPane, new JLabel("Bone Description:"), 0, 2, 1, 1, GridBagConstraints.SOUTHWEST);

        addItem(contentPane, JTextfield1, 0, 1, 1, 1, GridBagConstraints.NORTHWEST);
        addItem(contentPane, JTextfield2, 1, 1, 1, 1, GridBagConstraints.NORTHWEST);
        addItem(contentPane, Discription, 0, 3, 1, 1, GridBagConstraints.WEST);

        Icon nextIcon = new ImageIcon("arrow.jpeg");
        JButton nextButton = new JButton("Next", nextIcon);
        addItem(contentPane, nextButton, 1, 4, 1, 1, GridBagConstraints.NORTHEAST);
        nextButton.addActionListener( new ActionListener(){
        public void actionPerformed(ActionEvent e)
        {
            CardLayout cardLayout = (CardLayout) contentPane.getParent().getLayout();
            cardLayout.show(contentPane.getParent(), "Panel 2");
        }
    });
}

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    } 
}

class MyPanel2 extends JPanel {

    public MyPanel2() {
        setBackground(Color.red);
    }

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    }
}

Answer 2

You don't need a reference of contentPane in MyPanel1. You can just use the Panel itself. Use this instead. Check the MyPanel1 class carefully and also the actionPerformed method where it gets references of the parent which holds the two JPanels. Also check the dislplayGUI method. You should call show only after adding all the cards. By default it will show the first. But if you want to show some other Panel on startup then it matters.

public class CardLayoutExample
{

 private void displayGUI()
 {


    contentPane.add(panel1, "Panel 1");
    contentPane.add(panel2, "Panel 2");
    // call show after adding not before 
    cl.show(contentPane, "Panel 1");
}
// same as before only change in MyPanel1
..........
class MyPanel1 extends JPanel {

    JTextField JTextfield1 = new JTextField(15), JTextfield2 = new JTextField(15);
    JTextArea Discription = new JTextArea(4,30);

    public MyPanel1() {


        //add components, use THIS to refer to the current JPanel which is MyPanel1
        addItem(this, new JLabel("Sample ID:"), 0, 0, 1, 1, GridBagConstraints.SOUTHWEST);
        addItem(this, new JLabel("User ID:"), 1, 0, 1, 1, GridBagConstraints.SOUTHWEST);
        addItem(this, new JLabel("Bone Description:"), 0, 2, 1, 1, GridBagConstraints.SOUTHWEST);

        addItem(this, JTextfield1, 0, 1, 1, 1, GridBagConstraints.NORTHWEST);
        addItem(this, JTextfield2, 1, 1, 1, 1, GridBagConstraints.NORTHWEST);
        addItem(this, Discription, 0, 3, 1, 1, GridBagConstraints.WEST);

        Icon nextIcon = new ImageIcon("arrow.jpeg");
        JButton nextButton = new JButton("Next", nextIcon);
        addItem(this, nextButton, 1, 4, 1, 1, GridBagConstraints.NORTHEAST);
        nextButton.addActionListener( new ActionListener(){
        public void actionPerformed(ActionEvent e)
        {
            // this gets the CardLayout from Parent of the Panel
            CardLayout cardLayout = (CardLayout) MyPanel1.this.getParent().getLayout();
            cardLayout.show(MyPanel1.this.getParent(), "Panel 2");
        }
    });
}

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    } 
}

class MyPanel2 extends JPanel {

    public MyPanel2() {
        // for testing if Panel 2 shows up
        addItem(this, new JLabel("Panel 2:"), 0, 0, 1, 1, GridBagConstraints.SOUTHWEST);
    }

    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);

    }
}