Tutorial: CardLayout Manager - Card Example

Ronald S. Holland
Total Application Works
RonHolland@sumtotalz.com






To visit my site

[HOME] [Consulting] [Design] [Maintenance] [Project] [Testing] [Training] [Turnkey] [Java] [C++] [SQL] [HTML] [JavaScript ]



To contact us

© 2002 - 2016 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following link or send this page to a friend.)
  • <html>
    <title>Example of a link </title>
    <body>
    <table border>
    <a href="http://sumtotalz.com/TotalAppsWorks/LayoutManager/CardLayout/Card_Layout.html">An Introduction to CardLayout Manager </a>
    </table>
    </body>
    </html>
  1. Java Table of contents
  2. 2nd Java Cup
  3. Pie Chart I
  4. Pie/Bar Chart IB
  5. Pie/Bar Chart II
  6. Pie/Bar Chart III
  7. A Basic Calculator
  8. Linked Lists
  9. Linked List II
  10. Linked List III
  11. Linked List IV
  12. Hardware Store I
  13. Hardware Store II
  14. Hardware Store III
  15. Client/Server
  16. Client/Server II
  17. Client/Server III
  18. Client/Server IV
  19. Multithreaded Client/Server
  20. Multithreaded Client/Server II
  21. Multithreaded Client/Server III
  22. Basic Calculator II
  23. Basic Calculator III

Introduction

The purpose of this tutorial is to introduce you to the concept of the CardLayout manager by using an example. The CardLayout manager implements the LayoutManager2 Interface. A CardLayout object is a layout manager for a container, such as a panel. 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. The first component added to a CardLayout object is the visible component when the container is first displayed. The ordering of cards is determined by the container's own internal ordering of its component objects. For those who are familiar with stacks, this behavior is similar to a FIFO (First In First Out) stack. In this example, all new items are added to the bottom of the stack, and when the stack is popped, the first item on the stack is popped first.

 

         +---------------+
        /               // 
       /  First Card   ///
      /               ////
     /               /////
    /               //////
   /_______________//////
   /_______________///// <---- new cards added at the bottom
   /_______________////
   /_______________///
   /_______________//
   /_______________/
 
Figure 1: Card Deck


In the above figure, the First Card is the first card placed on the deck and is the first card removed/popped from the deck.

Card template

In the following table, we will show a CardLayout code snippet.

 
/** ************************************************************
 * Card.java demonstrates the basic concept of the 
 * Cardlayout Manager.
 * 
 ***************************************************************/ 

public class Card extends JFrame
                      implements ActionListener {

   public Card()  {
 
   }

   public void actionPerformed( ActionEvent e )    {
                  
   }

   public static void main( String args[] )    {
      
   }
} /****************** End of CardpStack class ************************/ 

 
 
Figure 2: Card template

CardLayout code snippet

Suppose, for example, that you want to create a Panel that can show any one of three Panels: panel1, panel2, and panel3. Assume that panel1, panel2, and panel3 have already been created:

 

   JPanel cardPanel , panel1, panel2 , panel3 ;
   JButton but1, but2, but3 ;
   CardLayout cards ;

   public Card()  {

      Container c = getContentPane();      

      cardPanel = new JPanel();
      panel1    = new JPanel();
      panel2    = new JPanel();
      panel3    = new JPanel();

      but1  = new JButton( "Button 1" ) ; 
      but2  = new JButton( "Button 2" ) ; 
      but3  = new JButton( "Button 3" ) ; 
      but1.addActionListener( this );
      but2.addActionListener( this );
      but3.addActionListener( this );

      panel1.add( but1 ) ;
      panel2.add( but2 ) ;
      panel3.add( but3 ) ;

      cards = new CardLayout();
              // assume cards is declared as an instance variable
              // so that it can be used in other methods
      cardPanel.setLayout(cards);
      cardPanel.add( panel1, "First");
              // add panel1 with name "First"
      cardPanel.add( panel2, "Second");
              // add panel2 with name "Second"
      cardPanel.add( panel3, "Third");
              // add panel3 with name "Third"

         //   Elsewhere in your program, you could show panel1 by saying
      c.add( cardPanel ) ;   
          

      setSize( 450, 200 );
      show();

   }
 
Figure 3: Card snippet

When the full code, as well as, the above code snippet is run, you will see a depiction similar to the one shown in Figure 4 below.

Card code example



  
/** **************************************************************** 
 * Card.java demonstrates the basic concept of the 
 * Cardlayout Manager.
 *  
 * Copyright (c) 2002-2009 Advanced Applications Total Applications Works.
 * (AATAW)  all Rights Reserved.
 * 
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 *   - Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 *
 *   - Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in the
 *     documentation and/or other materials provided with the distribution.
 *
 *   - Neither the name of Total Application works nor the names of its
 *     contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 *
 ******************************************************************/ 

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

/** **************************************************************** 
 * The Card class demonstrates the basic concept of the 
 * Cardlayout Manager. It is a program that displays three panels
 * using the Cardlayout API.
 *  
 ******************************************************************/ 
public class Card extends JFrame
                      implements ActionListener {

   JPanel cardPanel , panel1, panel2 , panel3 ;
   JButton but1, but2, but3 ;
   CardLayout cards ;


   /** **************************************************************** 
    * The Card constructor 
    *  1- Creates the client area context
    *  2- Creates JPanels
    *  3- Creates JButtons
    *  4- Add ActionListeners to the JButtons
    *  5- Add buttons to the respective panels
    *  6- Create CardLayout object
    *  7- Add panels to the master panel - cardPanel
    *  8- Add cardPanel to the client area context
    *  9- Set Size 
    * 10- Show the GUI 
    *  
    ******************************************************************/ 
   public Card()  {

      Container c = getContentPane();  // client area context    

      cardPanel = new JPanel();
      panel1    = new JPanel();
      panel2    = new JPanel();
      panel3    = new JPanel();

      but1  = new JButton( "Button 1" ) ; 
      but2  = new JButton( "Button 2" ) ; 
      but3  = new JButton( "Button 3" ) ; 
      but1.addActionListener( this );
      but2.addActionListener( this );
      but3.addActionListener( this );

      panel1.add( but1 ) ;
      panel2.add( but2 ) ;
      panel3.add( but3 ) ;

      cards = new CardLayout();

      cardPanel.setLayout(cards);
      cardPanel.add( panel1, "First");
              // add panel1 with name "First"
      cardPanel.add( panel2, "Second");
              // add panel2 with name "Second"
      cardPanel.add( panel3, "Third");
              // add panel3 with name "Third"
         
      c.add( cardPanel ) ;   
          

      setSize( 450, 200 );
      show();
   }


   /** **************************************************************** 
    * The actionPerformed() method responds to events caused by the 
    * user pressing one of the buttons.
    * 1- Pressing button 1 causes the next panel (pane2) to be displayed 
    * 2- Pressing button 2 causes the next panel (pane3) to be displayed   
    * 3- Pressing button 3 causes the first panel (pane1) to be displayed     
    *  
    ******************************************************************/ 
   public void actionPerformed( ActionEvent e )    {

      if ( e.getSource() == but1 )
         cards.next( cardPanel ) ;
      else if ( e.getSource() == but2 )
         cards.next( cardPanel ) ;
      else if ( e.getSource() == but3 )
         cards.first( cardPanel ) ;
   }


   /** **************************************************************** 
    * The main() method is the entry point called by Java when the Card
    *  program is loaded into memory.
    *  
    ******************************************************************/
   public static void main( String args[] )    {
      Card cd = new Card() ;     

      cd.addWindowListener(
         new WindowAdapter() {
            public void windowClosing( WindowEvent e )
            {
               System.exit( 0 );
            }
         }
      );          
      
   }
} /*********************  End of Card class  ******************/
 
Figure 4: CardLayout Example Code


CardLayout .bat file

The following example is the Bat file used to compile and run the Card program.

 
javac   Card.java

java    Card
 
Figure 5: Bat file used to compile and run Card example.

To run this example

To run this example,

  1. Cut and paste the code in Figure 2 and place it in a file called Card.java.
  2. Cut and paste the code in Figure 3 and place it in a file called Card.bat.
  3. Double click on the Card.bat file and you will see the following.



    Figure 6: Image of Card example.








[HOME] [Consulting] [Design] [Maintenance] [Project] [Testing] [Training] [Turnkey] [Java] [C++] [SQL] [HTML] [JavaScript ]

© 2002 - 2016 All Rights Reserved Total Application Works