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.
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.
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.
frame1.java
file in the project pane, then click the Design tab at the bottom of the AppBrowser to open the UI designer.
jPanel1
) to the contentPane in the UI designer.
layout
property to XYLayout
.
jPanel2
) to the lower half of JPanel1
.
CardLayout
.
jPanel3
) onto this CardLayout
panel by clicking jPanel2
in the component tree. This new panel completely fills up the CardLayout
panel.
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.
background
color property or add UI components to it so it's distinguishable.
jPanel4
) onto jPanel2
in the component tree. Notice that there are now two panels under jPanel2
in the component tree.
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.
JCheckBox
(jCheckBox1
) to jPanel1
that will be used to toggle between the two panels in the CardLayout
container.
jCheckBox1
and double-click the actionPerformed
event to create the event in the source code.
jCheckBox1_actionPerformed(ActionEvent e)
method :
if (jCheckBox1.isSelected()) ((CardLayout)jPanel2.getLayout()).show(jPanel2,"jPanel4"); else ((CardLayout)jPanel2.getLayout()).show(jPanel2,"jPanel3");
CardLayout
container.
CardLayout
.
CardLayout
object in the component tree, displayed immediately below the container it controls.
hgap
(horizontal gap) or vgap
(vertical gap) property in the Inspector.
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
.