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 can contain different components at different times, for example, in a tabbed dialog box. 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, for example a TabsetControl, a ListControl, or a ChoiceControl. The state of the controlling component determines which component the CardLayout displays. The user makes the choice by selecting something on the UI, such as a tab.
Creating a CardLayout container in the UI Designer
To create a CardLayout container:
- Create a new project with the Application Wizard.
- Select the frame file in the Navigation Pane then click the Design tab at the bottom of the AppBrowser to open the UI Designer.
- Add a panel (either an AWT Panel or a JBCL BevelPanel ) to your UI in the UI Designer and set its layout property to CardLayout.
- Drop a new panel into the CardLayout panel. This new panel will completely fill up the CardLayout panel.
Note: The first component you add to a CardLayout panel will always fill the panel.
- Set the layout property for this new panel to XYLayout, then add whatever components you want to it.
- Next, in the Component Tree, select the CardLayout panel again.
- Select a panel on the Component Palette, then use Shift+Click to add it to stack in CardLayout panel.
- Set this second panel to XYlayout and add some components to it.
- Repeat steps 6-8 for each new panel you want to add to the stack.
Now that you have a stack of panels in a CardLayout container, you need to add a controlling component to your UI so the user can switch the focus between each of the panels.
Creating controls to change the CardLayout panels
The steps below demonstrate how to hook up a TabsetControl to these panels.
- On the Controls page of the Component Palette, select a TabsetControl and draw it above the CardLayout panel, stretching it to approximately the same width as the panel. You won't see any tabs yet.
- With the TabSetControl still selected, click on the labels property in the Inspector and click the ellipsis button
to open the labels property editor.
- Enter a tab label for each panel you added to the CardLayout container. Put one label per line as in the example below:
Now you should see the labeled tabs in the UI Designer.
- Next, you need to associate each tab with a particular panel in the CardLayout container. To do this, you have to create some events. With the TabSetControl selected, click on the Events tab in the Inspector.
- Scroll down to the selectionChanged event, select it, then double-click to create the event stub. JBuilder will switch focus in the AppBrowser to the source code and locate the cursor to this new event-handling method:
void tabsetControl1_selectionChanged(borland.jbcl.model.VectorSelectionEvent e) {
}
In the body of the event-handling method, type the following:
if (tabsetControl1.getSelectedTab() == "One") {
cardLayout1.show(bevelPanel2, "bevelPanel3");
}
else if (tabsetControl1.getSelectedTab() == "Two") {
cardLayout1.show(bevelPanel2, "bevelPanel4");
}
else if (tabsetControl1.getSelectedTab() == "Three") {
cardLayout1.show(bevelPanel2, "bevelPanel5");
}
where bevelPanel2 is the panel with CardLayout, and bevelPanel 3, 4, and 5 are the stack of panels inside the CardLayout. If your panels are named differently, just substitute your names for the ones in the section above.
- Save your files, then click the run button
on the Main Window toolbar. Click the tabs to change the panels.
If you use a ListControl rather than a TabsetControl, you would still use the selectionChanged event, and the body of the event-handling method would look like this:
void listControl1_selectionChanged(borland.jbcl.model.VectorSelectionEvent e) {
if (listControl1.get(listControl1.getSubfocus()) == "One") {
cardLayout1.show(bevelPanel2, "bevelPanel3");
}
else if (listControl1.get(listControl1.getSubfocus()) == "Two") {
cardLayout1.show(bevelPanel2, "bevelPanel4");
}
else if (listControl1.get(listControl1.getSubfocus()) == "Three") {
cardLayout1.show(bevelPanel2, "bevelPanel5");
}
}
If you use a ChoiceControl, you would use the itemStateChanged event and the body of the event-handling method would look like this:
void choiceControl1_itemStateChanged(java.awt.event.ItemEvent e) {
if (choiceControl1.getSelectedItem()== "One") {
cardLayout1.show(bevelPanel2, "bevelPanel3");
}
else if (choiceControl1.getSelectedItem()== "Two") {
cardLayout1.show(bevelPanel2, "bevelPanel4");
}
else if (choiceControl1.getSelectedItem()== "Three") {
cardLayout1.show(bevelPanel2, "bevelPanel5");
}
}
Specifying the gap surrounding a CardLayout container
Using the Component Inspector, you can specify the amount of horizontal and vertical gap surrounding a stack of components in a CardLayout.
- Select the cardLayout object in the Component Tree, displayed immediately below the container it controls.
- Click hgap (horizontal gap) or vgap (vertical gap) property in the Inspector.
- Enter the number of pixels you want for the gap.
- Press ENTER or click anywhere else in the Inspector to register the changes.