Laying Out Components within a Container

How to Use CardLayout

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

---

Your browser can't run 1.0 Java applets, so here are pictures of the window the program brings up:

---

As the above applet shows, the CardLayout class helps you manage two or more components (usually Panel instances) that share the same display space. 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 they were 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:
Panel cards;
final static String BUTTONPANEL = "Panel with Buttons";
final static String TEXTPANEL = "Panel with TextField";

//Where the container is initialized:
cards = new Panel();
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 applet on this page does this:

//Where the container is initialized:
. . .
    //Put the Choice in a Panel to get a nicer look.
    Panel cp = new Panel();
    Choice c = new Choice();
    c.addItem(BUTTONPANEL);
    c.addItem(TEXTPANEL);
    cp.add(c);
    add("North", cp);

. . .

public boolean action(Event evt, Object arg) {
    if (evt.target instanceof Choice) {
        ((CardLayout)cards.getLayout()).show(cards,(String)arg);
        return true;
    }
    return false;
}

As the above example shows, 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 to add the component to the container.

Below 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)

Laying Out Components within a Container