Scrollable JPanel in a CardLayout?

Question

I have been looking for a way to add a vertical scroll bar to a JPanel that in turn is added to a CardLayout panel. I looked up all the posts around here that were concerned with implementing a scrollable JPanel but I couldn't figure out how to implemented it with this specific CardLayout. Oracle doesn't give an example that I could use either.

Perhaps I don't use the right configuration for the JWindow or any other component that Im using.

I have placed below a stripped-down version of my program for which I'd like to implement a vertical scroll bar.

My question is how to implement JPanelScrollable class at the bottom of the code so that it can become scrollable ?

import javax.swing.*;

import java.awt.*;

import java.net.URL ;


public class Program2 extends JFrame
{
    public Program2()
    {
        super("Flash CC");
        Container2 container = new Container2();
        setSize(700, 800);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        setFocusable( true ) ;
        add(container);

        setVisible(true) ; 
    }


    public static void main(String[] args)
    {
        Program2 prog = new Program2();
    }
}

class Container2 extends JPanel
{
    private CardLayout          cardLayout   = new CardLayout() ;
    private JPanel1             jPanelFirst  = new JPanel1() ;
    private JPanel2             jPanelSecond = new JPanel2() ;
    private JPanelScrollable    jPanelThird  = new JPanelScrollable() ;

    //Constructor
    Container2()
    {
        this.setLayout( cardLayout )   ;
        this.setFocusable( true ) ;

        JScrollPane scrollFrame = new JScrollPane(jPanelThird);

        this.add( jPanelFirst,  "first card" )  ;
        this.add( jPanelSecond, "second card" ) ;
        this.add( scrollFrame , "third card" ) ;

        cardLayout.show( this, "third card" ) ;
    }
}

class JPanel1 extends JPanel
{

}

class JPanel2 extends JPanel
{

}

class JPanelScrollable extends JPanel
{
    // here many, many, many elemnts will go 
    // and a vertical scroll barr is needed to   view'm all.
    JPanelScrollable()
    {
        this.setOpaque( true ) ;
        this.setLayout( null ) ;
        for(int i=0; i<30; i++)
        {
            JButton b = new JButton("Button" + i) ;
            b.setBounds(0, (i * 100), 100, 50) ;
            this.add(b) ;
        }

    }
}

Answer 1

The Container.add(...) method accepts any component. A CardLayout is not restricted to panels.

Add the panel to a JScrollPane and add the scroll pane to the card layout.

Answer 2

If you're using eclipse, consider using WindowBuilder. It's free and allows you to do what you need by dragging and dropping and changing some properties.

Answer 3

Add the panel to a JScrollPane

JScrollPane scrollPane = new JScrollPane(jPanelThird);

Add the scroll pane to the CardLayout

this.add(scrollPane, "third card");

See How to use scroll panes for more details

Updated with working example

import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextField;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class TestCardLayout {

    public static void main(String[] args) {
        new TestCardLayout();
    }

    private int index = 0;

    public TestCardLayout() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                final CardLayout cl = new CardLayout();
                final JPanel cardPane = new JPanel(cl);
                cardPane.add(new JLabel("Hello"), "1");
                cardPane.add(new JScrollPane(createForm()), "2");

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(cardPane);
                frame.setSize(200, 200);
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);

                JButton next = new JButton("Next");
                next.addActionListener(new ActionListener() {
                    @Override
                    public void actionPerformed(ActionEvent e) {
                        index++;
                        if (index > 1) {
                            index = 0;
                        }
                        if (index == 0) {
                            cl.show(cardPane, "1");
                        } else { 
                            cl.show(cardPane, "2");
                        }
                    }
                });
                frame.add(next, BorderLayout.SOUTH);
            }

        });
    }

    public JPanel createForm() {
        JPanel form = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        for (int index = 0; index < 100; index++) {
            form.add(new JTextField(10), gbc);
        }
        return form;
    }
}