How to Use CardLayout

Here's a snapshot of an application that uses a CardLayout ^[10] to switch between two panels.

^[10] CardLayout API documentation: http://java.sun.com/j2se/1.4.2/docs/api/java/awt/CardLayout.html.

You can run CardLayoutDemo using Java Web Start or compile and run the example yourself. ^[11]

^[11] To run CardLayoutDemo using Java Web Start, click the CardLayoutDemo link on the RunExamples/layout.html page on the CD. You can find the source files here: JavaTutorial/uiswing/layout/ example-1dot4/index.html#CardLayoutDemo .

The CardLayout class helps you manage two or more components (usually JPanel instances) that share the same display space. When using it, you need to provide a way for the user to choose between the components. CardLayoutDemo uses a combo box for this purpose. An easier but less flexible way to accomplish the same task is to use a tabbed pane instead. ^[12] Figure 15 is a picture of a tabbed pane version of Figure 14.

^[12] See How to Use Tabbed Panes (page 382) for more information.

Figure 15. The GUI reworked to use a tabbed pane instead of CardLayout .

Figure 14. Two simple GUIs that use CardLayout .

Because a tabbed pane provides its own GUI, it's simpler to use than CardLayout . For example, reimplementing CardLayoutDemo to use a tabbed pane results in a program with several fewer lines of code. You can run the revised example, TabDemo , using Java Web Start or compile and run the example yourself. ^[13]

^[13] To run TabDemo using Java Web Start, click the TabDemo link on the RunExamples/layout.html page on the CD. You can find the source files here: JavaTutorial/uiswing/layout/example-1dot4/index.html#TabDemo .

Conceptually, each component a CardLayout manages is like a playing card in a deck, 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 backward or forward.

• By specifying a card with a specific name (the scheme CardLayoutDemo uses).

The following code from CardLayoutDemo.java creates the CardLayout and the components it manages.

  //Where instance variables are declared:  JPanel cards; final static String BUTTONPANEL = "JPanel with JButtons"; final static String TEXTPANEL = "JPanel with JTextField"; //  Where the components controlled by the CardLayout are initialized:  //  Create the "cards".  JPanel card1 = new JPanel(); ... JPanel card2 = new JPanel(); ...  //Create the panel that contains the "cards".  cards = new JPanel(new CardLayout()); cards.add(card1, BUTTONPANEL); cards.add(card2, TEXTPANEL); 

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

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

  //Where the GUI is assembled:  //Put the JComboBox in a JPanel to get a nicer look. JPanel comboBoxPane = new JPanel(); //use FlowLayout String comboBoxItems[] = { BUTTONPANEL, TEXTPANEL }; JComboBox cb = new JComboBox(comboBoxItems); cb.setEditable(false); cb.addItemListener(this); comboBoxPane.add(cb); ... pane.add(comboBoxPane, BorderLayout.PAGE_START); pane.add(cards, BorderLayout.CENTER); ... public void itemStateChanged(ItemEvent evt) {     CardLayout cl = (CardLayout)(cards.getLayout());     cl.show(cards, (String)evt.getItem()); } 

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

The CardLayout API

Table 6 lists the commonly used CardLayout methods that let you choose a component. You can find the CardLayout API documentation online at: http://java.sun.com/j2se/1.4.2/docs/api/java/awt/CardLayout.html.

Table 6. CardLayout Methods

Method	Purpose
void first(Container) void next(Container) void previous(Container) void last(Container) void show(Container, String)	Lets you choose a component. For each method, the first argument is the container for which CardLayout is the layout manager (the container of the cards that CardLayout controls).

Examples That Use CardLayout

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