Share this page 

Use The CardLayout managerTag(s): AWT


A CardLayout object is a layout manager for a container. It treats each component in the container as a card. Only one card is visible at a time, and the container acts as a stack of cards.

In this HowTo, when a button is clicked the corresponding card is made visible.

First we define the cards (which are based on a Panel) 

import java.awt.Color;
import java.awt.Dimension;
import java.awt.LayoutManager;
import java.awt.Panel;

class MyPanel extends Panel{

  private static final long serialVersionUID = 1L;
  int w;
  int h;

  MyPanel(Color co, LayoutManager la, int width, int height){
    super();
    w = width;
    h = height;
    setBackground(co);
    setLayout(la);
    }

  public Dimension getMinimumSize() {
    return new Dimension(w,h);
    }

  public Dimension getPreferredSize() {
    return new Dimension(w,h);
    }
 }
and then 
import java.applet.Applet;
import java.awt.Button;
import java.awt.CardLayout;
import java.awt.Choice;
import java.awt.Color;
import java.awt.Component;
import java.awt.FlowLayout;
import java.awt.Panel;
import java.awt.TextField;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CardLayoutDemo extends Applet
implements ActionListener{

  private static final long serialVersionUID = 1L;
  Panel p1,p2,p3,p0;
  Choice c1,c2;
  Button b1,b2,b3, b4;
  TextField t1, t2;

  public void init() {
    // The first Card
    p1 = new MyPanel(Color.red,
        new FlowLayout(),
        100,100) ;
    Choice c1 = new Choice();
    c1.addItem("Option 1");
    c1.addItem("Option 2");
    p1.add(c1);

    // The second Card
    p2 = new MyPanel(Color.blue,
        new FlowLayout(),
        100, 100);
    c2 = new Choice();
    c2.addItem("Option A");
    c2.addItem("Option B");
    c2.addItem("Option C");
    p2.add(c2);

    // the third Card
    p3 = new MyPanel(Color.black,
        new FlowLayout(),
        100, 100);
    t1 = new TextField(8);
    t1.setBackground(Color.white);
    p3.add(t1);

    // Main card (receive the other)
    p0 = new MyPanel(Color.white,
        new CardLayout(0,0),
        100,100);
    setLayout(new FlowLayout());
    add(p0);

    // Add cards
    p0.add("First card", p1);
    p0.add("2nd card", p2);
    p0.add("3rd card", p3);


    add(b1 = new Button("card 1"));
    add(b2 = new Button("card 2"));
    add(b3 = new Button("card 3"));
    add(b4 = new Button("Which card is selected ?"));
    add(t2 = new TextField(2));
    b1.addActionListener(this);
    b2.addActionListener(this);
    b3.addActionListener(this);
    b4.addActionListener(this);
  }

  public void actionPerformed(ActionEvent e) {
    if (e.getSource() == b1) {
      //Show the first
      ((CardLayout)p0.getLayout()).show(p0, "First card");
    }
    else if (e.getSource() == b2) {
      //Show the second
      ((CardLayout)p0.getLayout()).show(p0, "2nd card");
    }
    else if (e.getSource() == b3) {
      //Show the third
      ((CardLayout)p0.getLayout()).show(p0, "3rd card");
    }
    else if (e.getSource() == b4) {
      // get the current card
      Component c[] = p0.getComponents();
      int i = 0;
      int j = c.length;
      while (i < j) {
        if (c[i].isVisible()) {
          t2.setText("" + (i+1));
          break;
        }
        else
          i ++;
      }
    }
  }
}


<HTML>
  <TABLE><TR><TD>
  <APPLET CODE=CardLayoutDemo.class WIDTH=300 HEIGHT=300>
  </APPLET>
</HMTL>
Try it here.
mail_outline
Send comment, question or suggestion to howto@rgagnon.com