JavaPerspective.com - 5.4.5. How to use CardLayout

JavaPerspective.com > Intermediate Tutorials > 5. Graphical User Interfaces > 5.4. Layouts > 5.4.5. How to use CardLayout

5.4.5. How to use CardLayout

Last updated: 1 February 2013.

CardLayout is a layout manager that is associated with an ordered stack of components wherein each component is identified by a string value (its name). Only one component is visible at a time. You can select the visible component with its name or select the first, last, previous or next component in the stack. The stack of components can be seen as a stack of playing cards in which only one card is visible at a time.

In the next sample, I am going to create a CardLayout object and a stack of 4 components: a button, a text field, a text area and a label. A group of buttons will allow the user to select the first, last, previous or next component in the stack. I will use BorderLayout to place the buttons at the top area and the center area will display the selected component. Here is the code:

import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextArea;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;

public final class CardLayoutExample extends JFrame {

    public CardLayoutExample(){
          init();
          addComponents();

          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          setVisible(true);
    }

    private JButton newButton(final String name, int width, int height, final Container container, final CardLayout cardLayout){
          JButton button = new JButton(name);

          // Set the maximum width to take up all the available space
          button.setMaximumSize(new Dimension(Short.MAX_VALUE, height));

          // Set the minimum and preferred size to the specified values
          Dimension dimension = new Dimension(width, height);
          button.setMinimumSize(dimension);
          button.setPreferredSize(dimension);

          // Add a listener to the button
          button.addActionListener(new ActionListener() {
                public void actionPerformed(ActionEvent e) {
                      if(name.equals("First"))
                            cardLayout.first(container);
                      else if(name.equals("Last"))
                            cardLayout.last(container);
                      else if(name.equals("Previous"))
                            cardLayout.previous(container);
                      else if(name.equals("Next"))
                            cardLayout.next(container);
                }
          });

          return button;
    }

    private void addComponents(){
          JPanel mainPanel = new JPanel();
          mainPanel.setLayout(new BorderLayout());

          // Creating the stack of components --------------------------------------------------------------------------
          CardLayout cardLayout = new CardLayout();
          JPanel stackPanel = new JPanel(cardLayout);

          stackPanel.add(new JButton("Button"), "Button");
          stackPanel.add(new JTextField("TextField"), "TextField");
          stackPanel.add(new JTextArea("TextArea"), "TextArea");
          stackPanel.add(new JLabel("Label"), "Label");

          mainPanel.add(stackPanel, BorderLayout.CENTER);
          // ---------------------------------------------------------------------------------------------------------------

          // Creating the buttons ----------------------------------------------------------------------------------------
          JPanel pageStartPanel = new JPanel();
          pageStartPanel.setLayout(new BoxLayout(pageStartPanel, BoxLayout.LINE_AXIS));

          int buttonWidth = 65;
          int buttonHeight = 35;

          JButton firstButton = newButton("First", buttonWidth, buttonHeight, stackPanel, cardLayout);
          JButton lastButton = newButton("Last", buttonWidth, buttonHeight, stackPanel, cardLayout);
          JButton previousButton = newButton("Previous", buttonWidth, buttonHeight, stackPanel, cardLayout);
          JButton nextButton = newButton("Next", buttonWidth, buttonHeight, stackPanel, cardLayout);

          pageStartPanel.add(firstButton);
          pageStartPanel.add(lastButton);
          pageStartPanel.add(previousButton);
          pageStartPanel.add(nextButton);

          mainPanel.add(pageStartPanel, BorderLayout.PAGE_START);
          // ---------------------------------------------------------------------------------------------------------------

          add(mainPanel);
    }

    private void init(){
          setTitle("CardLayoutExample");
          setSize(400, 120);
          setLocation(200, 100);
    }

    public static void main(String[] args){
          SwingUtilities.invokeLater(new Runnable() {
                public void run() {
                      new CardLayoutExample();
                }
          });
    }
}

Here is the result:

The order of the components in the stack is the order in which they were added to the stack. When the GUI is displayed, the visible component is the first component in the stack. When you click the button Last, the last component in the stack is displayed. The button Next displays the next component in the stack. If the current component is the last one, the button Next displays the first component. Likewise, the button Previous displays the previous component. If the current component is the first one, then the button Previous displays the last component in the stack.

In the example above, the visible component is not selected with its name. However, CardLayout is generally associated with a combo box that allows the user to select the visible component with its name by invoking the method show(Container parent, String name). Typically, the item selected in the combo box determines what component should be visible. The tutorial Combo boxes will show you how to use CardLayout with a combo box.

You are here : JavaPerspective.com > Intermediate Tutorials > 5. Graphical User Interfaces > 5.4. Layouts > 5.4.5. How to use CardLayout
Next tutorial : JavaPerspective.com > Intermediate Tutorials > 5. Graphical User Interfaces > 5.4. Layouts > 5.4.6. How to use GridBagLayout

Java is a trademark of Oracle Corporation