Laying Out Components Within a Container

How to Use CardLayout

Here's an applet that shows a CardLayout in action.

This is a picture of the applet's GUI. To run the applet, click the picture. The applet will appear in a new browser window.

As the preceding applet shows, the CardLayout class helps you manage two or more components (usually JPanel instances) that share the same display space. Another way to accomplish the same thing is to use a JTabbedPane.

Conceptually, each component a CardLayout manages is like a playing card or trading card in a stack, where only the top card is visible at any time. You can choose the card that's showing in any of the following ways:

• By asking for either the first or last card, in the order it was added to the container.
• By flipping through the deck backwards or forwards.
• By specifying a card with a specific name. This is the scheme the example program uses. Specifically, the user can choose a card (component) by selecting it by name from a pop-up list of choices.

Below is the code that creates the CardLayout and the components it manages. (Here's the whole program. The program runs either within an applet, with the help of AppletButton, or as an application.)

//Where instance variables are declared:
JPanel cards;
final static String BUTTONPANEL = "JPanel with JButtons";
final static String TEXTPANEL = "JPanel with JTextField";

//Where the container is initialized:
cards = new JPanel();
cards.setLayout(new CardLayout());
   
...//Create a Panel named p1. Put buttons in it.
...//Create a Panel named p2. Put a text field in it.

cards.add(BUTTONPANEL, p1);
cards.add(TEXTPANEL, p2);

When you add a component to a container that a CardLayout manages, you must use the two-argument form of the Container add method: add(String name, Component comp). The first argument can be any string that somehow identifies the component being added.

To choose which component a CardLayout shows, you need some additional code. Here's how the example program does this:

//Where the container is initialized:
. . .
    //Put the JComboBox in a JPanel to get a nicer look.
    String comboBoxItems[] = { BUTTONPANEL, TEXTPANEL };
    JPanel cp = new JPanel();
    JComboBox c = new JComboBox(comboBoxItems);
    c.setEditable(false);
    c.addItemListener(this);
    cp.add(c);
    contentPane.add(cp, BorderLayout.NORTH);
. . .

public void itemStateChanged(ItemEvent evt) {
    CardLayout cl = (CardLayout)(cards.getLayout());
    cl.show(cards, (String)evt.getItem());
}

This example shows that you can use the CardLayout show method to set the currently showing component. The first argument to the show method is the container the CardLayout controls, that is, the container of the components the CardLayout manages. The second argument is the string that identifies the component to show. This string is the same as was used when adding the component to the container.

The following are all the CardLayout methods that let you choose a component. For each method, the first argument is the container for which the CardLayout is the layout manager (the container of the cards the CardLayout controls).

public void first(Container parent)
public void next(Container parent)
public void previous(Container parent)
public void last(Container parent)
public void show(Container parent, String name)

Examples that Use CardLayout

Only one example in this trail uses CardLayout: CardWindow.java. Generally, our examples use tabbed panes instead of CardLayout, since tabbed panes conveniently provide a nice GUI for the same functionality.

Laying Out Components Within a Container