Download the JDK
Search the Tutorials
Hide the TOC
Trail: Creating a GUI with JFC/Swing
Lesson: Laying Out Components Within a Container
Laying Out Components Within a Container
A Visual Guide to Layout Managers
Using Layout Managers
How Layout Management Works
How to Use Various Layout Managers
How to Use BorderLayout
How to Use BoxLayout
How to Use CardLayout
How to Use FlowLayout
How to Use GridBagLayout
How to Use GridLayout
How to Use GroupLayout
A GroupLayout Example
How to Use SpringLayout
Creating a Custom Layout Manager
Doing Without a Layout Manager (Absolute Positioning)
Solving Common Layout Problems
Home Page > Creating a GUI with JFC/Swing > Laying Out Components Within a Container
« Previous • Trail • Next »
How to Use CardLayout

> Here's a snapshot of an application that uses a `CardLayout` to switch between two panels.

> You can run CardLayoutDemo using JavaTM Web Start. Its code is in `CardLayoutDemo.java`.

> The `CardLayout` class helps you manage two or more components (usually `JPanel` instances) that share the same display space. When using `CardLayout`, you need to provide a way to let the user 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. Here's a picture of a tabbed pane version of the preceding example:

> Because a tabbed pane provides its own GUI, using a tabbed pane is simpler than using `CardLayout`. For example, reimplementing the preceding example to use a tabbed pane results in a program with fewer lines of code. You can run TabDemo using Java Web Start, and find its code in `TabDemo.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 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 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 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());
> >     }

> 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

> [PENDING: This section will be converted to use the same API table format as is used in the components lesson.]

> 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`: `CardLayoutDemo`. Generally, our examples use tabbed panes instead of `CardLayout`, since tabbed panes conveniently provide a nice GUI for the same functionality.

« Previous • Trail • Next »
Previous page: How to Use BoxLayout
Next page: How to Use FlowLayout