CardLayout

CardLayout places components (usually panels) on top of each other in a stack like a deck of cards. You see only one at a time, and you can flip through the panels by using another control to select which panel comes to the top.

Example

CardLayout is a good layout to use when you have an area that contains different components at different times. This gives you a way to manage two or more panels that need to share the same display space.

CardLayout is usually associated with a controlling component, such as a check box or a list. The state of the controlling component determines which component the CardLayout displays. The user makes the choice by selecting something on the UI.

Creating a CardLayout container

The following example of a CardLayout container controlled by a checkbox demonstrates how to create the container in the UI designer, then hook up a checkbox to switch the panels. This example uses the JPanel and JCheckBox components from the Swing page of the component palette.
  1. Create a new project and application with the Application wizard.
  2. Select the frame1.java file in the project pane, then click the Design tab at the bottom of the AppBrowser to open the UI designer.
  3. Add a panel (jPanel1) to the contentPane in the UI designer.
  4. Set its layout property to XYLayout.
  5. Add a panel (jPanel2) to the lower half of JPanel1.
  6. Set its layout to CardLayout.
  7. Drop a new panel (jPanel3) onto this CardLayout panel by clicking jPanel2 in the component tree. This new panel completely fills up the CardLayout panel.

    Note: The first component you add to a CardLayout panel always fills the panel. To add additional panels to it, click the CardLayout panel in the component tree to drop the component, rather than clicking in the UI designer.

  8. Change its background color property or add UI components to it so it's distinguishable.
  9. Drop another panel (jPanel4) onto jPanel2 in the component tree. Notice that there are now two panels under jPanel2 in the component tree.
  10. Change the background color of jPanel4 or add components to it.

Creating the controls

Now that you have a stack of two panels in a CardLayout container, you need to add a controlling component to your UI, such as a JList or JCheckBox, so the user can switch the focus between each of the panels.

  1. Add a JCheckBox (jCheckBox1) to jPanel1 that will be used to toggle between the two panels in the CardLayout container.
  2. Select the Events tab in the Inspector for jCheckBox1 and double-click the actionPerformed event to create the event in the source code.
  3. Add the following code to the jCheckBox1_actionPerformed(ActionEvent e) method :
    if (jCheckBox1.isSelected())
       ((CardLayout)jPanel2.getLayout()).show(jPanel2,"jPanel4");
    else
      ((CardLayout)jPanel2.getLayout()).show(jPanel2,"jPanel3");
    

  4. Compile and run your program. Click the check box on and off to change the panels in the CardLayout container.

Specifying the gap

Using the Inspector, you can specify the amount of horizontal and vertical gap surrounding a stack of components in a CardLayout.
  1. Select the CardLayout object in the component tree, displayed immediately below the container it controls.

  2. Click hgap (horizontal gap) or vgap (vertical gap) property in the Inspector.
  3. Enter the number of pixels you want for the gap.
  4. Press ENTER or click anywhere else in the Inspector to register the changes.


OverlayLayout2

This is a feature of JBuilder Professional and Enterprise.

OverlayLayout2 is Swing's OverlayLayout, wrapped as a Bean so it can be selected as a layout in the Inspector. It is very much like the CardLayout in that it places the components on top of each other.

Unlike CardLayout, where only one component at a time is visible, the components can be visible at the same time if you make each component in the container transparent. For example, you could overlay multiple transparent images on top of another in the container to make a composite graphic.

For more information, see the Swing documentation on OverlayLayout.