This example requires preliminary knowledge on the AWT Frame Window, Nested Containers. You can read the articles from the below Links in the order specified.
Article on AWT Frame Window From Hub Pages Net work => Hub Page Article
Article on Panel and Nested Containers => Coding-Examples Article
1. Introduction to Card Layout
In this example, we will look into Card Layout of Java AWT. This layout supports the display of multiple containers. It treats the containers as cards and can navigate through it and display it to users. After creating the container, one can hand over then to the Card Layout Manager. The CardLayout Class of Java AWT can flip cards or switch between the cards using the below methods:
- First: Displays first card in the Manager.
- Last: Displays last card in the Manager.
- Previous: Displays previous card from current position.
- Next: Displays next card from current position.
The Card Layout Manager expects a name for each container when we ask to add it. Later, one can use the show method to display a Card by its name.
2. About the Card Layout Example
In this example, we will create four instances of Panels which acts as Cards. Then we will add these to the Frame Window and assign a card layout manager to manage it. The Card Layout Manager Arranges the cards as shown below:
Note, Each Card is having a Next and Previous button in it. One can navigate between the cards using these buttons. While we create the panel, we will assign a background color to it and this will help us to tell which card the layout manager is currently displaying.
3. Preparing the Cards
3.1 Imports and Class Derivation
We will extend the Panel class and add two buttons to it. We will also set a background to it. The Frame Window will use these panels as cards. The below code shows required imports for our Panel:
|
1 2 3 4 5 |
//Snippet 01: Required Imports import java.awt.Button; import java.awt.Color; import java.awt.FlowLayout; import java.awt.Panel; |
Next, we prepare our card by extending it from the java.awt.Panel class. In the previous section we saw each card has two buttons. We will handle the button click event in the Frame Window class which acts a parent for these Panels. So, in the constructor we take that as a parameter. Note, we have yet not created the Frame Window. The constructor also gets a reference to the java.awt.Color. Below is the code:
|
1 2 3 4 |
public class CardPanel extends Panel { //Snippet 02: Create the Panel public CardPanel(CardLayoutWindow parent, Color color) { |
3.2 CardPanel Constructor
The constructor creates two AWT Button instances to move between the cards. The setActionCommand of the Button class sets the command text in string format. We will use this string in the handler function to know which command button is the source of the event.
|
1 2 3 4 5 |
//Snippet 2.1: Create the Controls Button BtnNext = new Button("Next >"); BtnNext.setActionCommand("Next"); Button BtnPrev = new Button("< Prev"); BtnPrev.setActionCommand("Prev"); |
Once button instances are ready, we add that to our panel by calling the add method. After this the constructor sets the background color for the panel. Note, for these two buttons the panel acts as a container. So we handover these button to the Flow Layout Manager. Finally, the buttons are registered with the Action Listener which is our Frame Window. Now our cards class is ready. One can create multiple cards with a different background color from it.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Snippet 2.2: Add the Controls to Panel and Set Background Color add(BtnPrev); add(BtnNext); setBackground(color); //Snippet 2.3: Set Flow Layout to the Panel FlowLayout layout = new FlowLayout(); setLayout(layout); //Snippet 3: Register the buttons with Action Listener BtnNext.addActionListener(parent); BtnPrev.addActionListener(parent); |
4. Setup the Frame Window
4.1 Imports and Derivation
Our panel class takes CardLayoutWindow as its parent. Now, we will derive this class from the java.awt.Frame. Note our derived class implements WindowListener so we can discard the window and quit the application. The class and required imports are below:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Snippet 04: Required Imports for the Frame Window import java.awt.Button; import java.awt.CardLayout; import java.awt.Color; import java.awt.Frame; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; public class CardLayoutWindow extends Frame implements WindowListener |
4.2 Card Layout Setup
The frame window declares a CardLayout reference, and the constructor creates actual object. Then in the button handlers we make use of it to navigate between the cards.
|
1 2 |
//Snippet 05: Hold reference to Card Layout Manager CardLayout CardManager; |
After setting the frame window size and location, we create four of our Cards with four different colors. Then, we create CardLayout and assign that to our frame window using the setLayout method. The add method takes two parameters. The first parameter is the name which we gave to the card and the second one is our card object. We add all our four cards to the frame window.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//Sample 06: Setup the Frame Window super(FrameTitle); setSize(400, 300); setLocation(100,100); addWindowListener(this); //Sample 07: Create four Panel Containers CardPanel card1 = new CardPanel(this, Color.RED); CardPanel card2 = new CardPanel(this, Color.BLUE); CardPanel card3 = new CardPanel(this, Color.GREEN); CardPanel card4 = new CardPanel(this, Color.YELLOW); //Sample 08: Set Card Layout to the Window and add the Panels //From now on they are cards. CardManager = new CardLayout(); setLayout(CardManager); add("Red Card", card1); add("Blue Card", card2); add("Green Card", card3); add("Yellow Card", card4); CardManager.show(this, "Green Card"); |
The below picture shows how Card Layout stacks the Panels (The below picture does not show the yellow card)
4.3 Window Listener
After adding all the cards, we use the show method of the Card Layout Manager to display the green card. The second parameter expects a card name which we provided while adding the card through add method. Next, we have to provide implementation for the Window Listener which is below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//Snippet 09: Frame Window Handlers @Override public void windowActivated(WindowEvent e) {} @Override public void windowClosed(WindowEvent e) {} @Override public void windowClosing(WindowEvent e) { this.dispose(); } @Override public void windowDeactivated(WindowEvent e) {} @Override public void windowDeiconified(WindowEvent e) {} @Override public void windowIconified(WindowEvent e) {} @Override public void windowOpened(WindowEvent e) {} |
5. Flip Cards or Switch Cards using Card Layout
The Frame window class maintains the Panels through Card Layout Manager. In the layout manager perspective, each Panel is a card. Now, we will handle the buttons. The Frame window class need to implement the ActionListener interface to handle the button events. We change the declaration as shown below:
|
1 2 3 4 5 |
public class CardLayoutWindow extends Frame implements WindowListener, //10.1 Action Listener for Button ActionListener { |
In the actionPerformed(ActionEvent ae) event handler, we check the action command to know whether it is Next and Previous. Then, we call next() or previous() method to switch the cards. For example, if card layout manager is showing blue card, the next method will flip the blue card into Green card. In addition, the Card Layout Manager cycles the cards when it reaches the head or tail of the stacked cards. The handler method is below:
|
1 2 3 4 5 6 7 8 9 10 11 |
//Snippet 10.2: Flip Cards @Override public void actionPerformed(ActionEvent ae) { String cmd = ((Button)ae.getSource()).getActionCommand(); if (cmd.equalsIgnoreCase("Next")) CardManager.next(this); if (cmd.equalsIgnoreCase("Prev")) CardManager.previous(this); repaint(); } |
The below video shows how our CardLayout example flip cards using the next and previous buttons.
6. Listings
CardLayoutExample.java
|
1 2 3 4 5 6 7 8 |
public class CardLayoutExample { public static void main(String[] args) { //Snippet 11: Display the Frame Window CardLayoutWindow frame = new CardLayoutWindow("Card Layout Example"); frame.setVisible(true); } } |
CardPanel.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//Snippet 01: Required Imports import java.awt.Button; import java.awt.Color; import java.awt.FlowLayout; import java.awt.Panel; public class CardPanel extends Panel { //Snippet 02: Create the Panel public CardPanel(CardLayoutWindow parent, Color color) { //Snippet 2.1: Create the Controls Button BtnNext = new Button("Next >"); BtnNext.setActionCommand("Next"); Button BtnPrev = new Button("< Prev"); BtnPrev.setActionCommand("Prev"); //Snippet 2.2: Add the Controls to Panel and Set Background Color add(BtnPrev); add(BtnNext); setBackground(color); //Snippet 2.3: Set Flow Layout to the Panel FlowLayout layout = new FlowLayout(); setLayout(layout); //Snippet 3: Register the buttons with Action Listener BtnNext.addActionListener(parent); BtnPrev.addActionListener(parent); } } |
CardLayoutWindow.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
//Snippet 04: Required Imports for the Frame Window import java.awt.Button; import java.awt.CardLayout; import java.awt.Color; import java.awt.Frame; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; public class CardLayoutWindow extends Frame implements WindowListener, //10.1 Action Listener for Button ActionListener { //Snippet 05: Hold reference to Card Layout Manager CardLayout CardManager; public CardLayoutWindow(String FrameTitle) { //Sample 06: Setup the Frame Window super(FrameTitle); setSize(400, 300); setLocation(100,100); addWindowListener(this); //Sample 07: Create four Panel Containers CardPanel card1 = new CardPanel(this, Color.RED); CardPanel card2 = new CardPanel(this, Color.BLUE); CardPanel card3 = new CardPanel(this, Color.GREEN); CardPanel card4 = new CardPanel(this, Color.YELLOW); //Sample 08: Set Card Layout to the Window and add the Panels //From now on they are cards. CardManager = new CardLayout(); setLayout(CardManager); add("Red Card", card1); add("Blue Card", card2); add("Green Card", card3); add("Yellow Card", card4); CardManager.show(this, "Green Card"); } //Snippet 09: Frame Window Handlers @Override public void windowActivated(WindowEvent e) {} @Override public void windowClosed(WindowEvent e) {} @Override public void windowClosing(WindowEvent e) { this.dispose(); } @Override public void windowDeactivated(WindowEvent e) {} @Override public void windowDeiconified(WindowEvent e) {} @Override public void windowIconified(WindowEvent e) {} @Override public void windowOpened(WindowEvent e) {} //Snippet 10.2: Flip the Cards @Override public void actionPerformed(ActionEvent ae) { String cmd = ((Button)ae.getSource()).getActionCommand(); if (cmd.equalsIgnoreCase("Next")) CardManager.next(this); if (cmd.equalsIgnoreCase("Prev")) CardManager.previous(this); repaint(); } } |
Tags: actionPerformed, AWT, CardLayout, windowClosing
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.