Start of Tutorial > Start of Trail > Start of Lesson

Search

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 tabbed pane. Here's the tabbed pane version of the preceding applet:

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.

Because a tabbed pane provides a GUI, using a tabbed pane is simpler than using CardLayout. For example, reimplementing the preceding applet to use a tabbed pane results in a program with 12 fewer lines of code. You can see the program's code in TabWindow.java. The CardLayout version of the program is in CardWindow.java.

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.

The following code creates the CardLayout and the components it manages. 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(p1, BUTTONPANEL);
cards.add(p2, TEXTPANEL);

When you add a component to a container that a CardLayout manages, you must specify a string that identifies the component being added. For example, in this example, the first panel has the string "JPanel with JButtons", and the second panel has the string "JPanel with JTextField". In this example, those strings are also used in the combo box.

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 cbp = new JPanel();
    JComboBox c = new JComboBox(comboBoxItems);
    c.setEditable(false);
    c.addItemListener(this);
    cbp.add(c);
    contentPane.add(cbp, BorderLayout.NORTH);
...
    contentPane.add(cards, BorderLayout.CENTER);
...

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 CardLayout API

The following CardLayout methods 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).

void first(Container)
void next(Container)
void previous(Container)
void last(Container)
void show(Container, String)

Examples that Use CardLayout

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

Start of Tutorial > Start of Trail > Start of Lesson

Search