The Java TM Tutorial

| Start of Tutorial > Start of Trail > Start of Lesson | Search

Trail: Creating a GUI with JFC/Swing
Lesson: 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 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