Sample: LayoutManagers
Objectives
This sample illustrates how to build an application using visual composition.
Description
The LayoutManagers sample illustrates using features of visual composition
for the following tasks:
Running the LayoutManagers Sample
This sample contains beans that demonstrate the Java AWT layout managers.
Each bean that has a name that ends with "Page" is an extension of java.awt.Panel
that contains components arranged using the various java layout managers.
The LayoutManagers bean is an applet that shows all of the pages in a java.awt.CardLayout.
A panel of Labels along the top of the applet and a set of Buttons along
the bottom enable you to navigate through the pages giving the appearance
of a notebook.
java.awt.GridBagLayout is the most complex layout manager to use, a
button on the GridBagLayoutPage brings up a dialog that enables you to
experiment with the GridBagConstraints of the GridBagLayout panel.
The dialog is a java.awt.Frame bean called LiveGridBagConstraints.
It uses another bean, GridBagBean, that provides a bean interface to the
java.awt.GridBagConstraints class.
The java.awt.GridBagLayout is the most powerful and most complex of
the AWT layout managers. The key to understanding this layout manager
is to understand the java.awt.GridBagConstraints class which contains each
component's layout settings. There are 14 interdependent settings
with an infinite number of combinations for every component in your GridBagLayout
panel.
The com.ibm.ivj.examples.vc.utilitybeans.GridBagBean class wrappers
the java.awt.GridBagConstraints class and makes it a bean.
The java.awt.GridBagConstraints class is used to store layout settings
for components contained in GridBagLayout panels. A class used
for visual composition should have bean features such as get and set methods
for properties, and the sending of propertyChange events when properties
change. Because GridBagConstraints does not provide these features,
GridBagBean wrappers GridBagConstraints so that it is usable in visual
composition. To use GridBagBean, drop an instance of it on the free-form
surface, set the GridBagConstraints property with a java.awt.GridBagConstraints
object and then access its data members using the get and set methods.
To run this sample:
-
Select the LayoutManagers class from the Projects page.
-
Select the Run button on the tool bar.
To build the LayoutManagers sample:
The classes that are part of the LayoutManagers sample should be built
in the following order:
-
BorderLayoutPage
-
CardLayoutPage
-
FlowLayoutPage
-
GridLayoutPage
-
NullLayoutPage
-
GridBagLayoutPage
-
LayoutManagers
Building the BorderLayoutPage class
-
Create the BorderLayoutPage class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = BorderLayoutPage
-
Superclass = java.awt.Panel
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser
will be displayed, where you can build the user interface as follows:
-
Open the property sheet for BorderLayoutPage
-
Place your cursor over the BorderLayoutPage panel
-
Double-click on BorderLayoutPage
-
Set properties for BorderLayoutPage
-
constraints => width = 600, height = 300
-
layout = BorderLayout
-
background = Magenta
-
Change the palette category to AWT
-
Drop a Label bean in the North portion of BorderLayoutPage. Set properties
for Label1
-
alignment = CENTER
-
text = North
-
(make sure constraints = North)
-
Drop a Button bean in the west portion of BorderLayoutPage. Set properties
for Button1
-
label = West
-
(make sure constraints = West)
-
Drop a Button bean in the east portion of BorderLayoutPage. Set properties
for Button2
-
label = East
-
(make sure constraints = East)
-
Drop a TextField in the south portion of BorderLayoutPage. Set properties
for TextField1
-
background = White
-
text = South
-
(make sure constraints = South)
-
Drop a TextArea in the center portion of BorderLayoutPage. Set properties
for TextArea1
-
background -> RGB red = 230, green = 230, blue = 255
-
Open the String Editor for the text property and enter the following value
(use the Enter key to force a carriage return where noted by <cr>):
This is a BorderLayout.<cr>
It can contain up to five components in five regions:<cr>
North, South, East, West, and Center.<cr><cr>
This panel contains:<cr>
North: aLabel<cr>
West: aButton<cr>
East: aButton<cr>
South: aTextField<cr>
Center: this TextArea
-
(make sure constraints = Center)
-
Make connections to set properties and invoke methods as follows (see Connection
Syntax ):
-
Label1 needs to be repainted when it is resized. This allows a re-centering
of the text in the label.
-
Event-to-method connection
-
Source: Label1 componentResized/event
-
Target: Label1 repaint/method
-
Save the bean and exit:
-
Select Bean from the menu bar
-
Select Save Bean
-
Close the Visual Composition Editor
Building the CardLayoutPage class
-
Create the CardLayoutPage class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = CardLayoutPage
-
Superclass = java.awt.Panel
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser will be displayed, where
you can build the user interface as follows:
-
Set properties for CardLayoutPage
-
layout = BorderLayout
-
background = Cyan
-
Change the palette category to AWT
-
Drop a Label in the North portion of CardLayoutPage. In the property
sheet for Label1 remove the default text.
-
Drop a TextArea in the center portion of CardLayoutPage. Set properties
for TextArea1
-
background = White
-
Open the String Editor for the text property and enter the following value
(use the Enter key to force a carriage return where noted by <cr>):
This entire notebook is implemented using a CardLayout.<cr>
As you click on the tabs (which are labels in a GridLayout)<cr>
a different component of the CardLayout is shown.
-
(make sure constraints = Center)
-
Save the bean and exit:
-
Select Bean from the menu bar
-
Select Save Bean
-
Close the Visual Composition Editor
Building the FlowLayoutPage class
-
Create the FlowLayoutPage class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = FlowLayoutPage
-
Superclass = java.awt.Panel
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser will be displayed, where
you can build the user interface as follows:
-
Set properties for FlowLayoutPage
-
background = Green
-
layout = FlowLayout => hgap=5, vgap=5
-
Change the palette category to AWT
-
Drop a Label in FlowLayoutPage. Set properties for Label1
-
Drop a TextField beside Label1. Set properties for TextField1
-
columns = 20
-
background -> RGB red = 223, green = 255, blue = 223
-
Drop a Label beside TextField1. Set properties for Label2
-
Drop a TextField beside Label2. Set properties for TextField2
-
columns = 20
-
background -> RGB red = 223, green = 255, blue = 223.
-
Drop a Label beside TextField2. Set properties for Label3
-
Drop a TextField beside Label3. Set properties for TextField3
-
columns = 20
-
background -> RGB red = 223, green = 255, blue = 223
-
Drop a TextArea beside TextField3. Set properties for TextArea1
-
background -> RGB red = 223, green = 255, blue = 223
-
columns = 30
-
rows = 5
-
Open the String Editor for the text property and enter the following value
(use the Enter key to force a carriage return where noted by <cr>):
This is a FlowLayout panel.<cr>
Components are laid out sequentially, horizontally until there is no
more room.<cr>
Then a new row is started.<cr>
Try resizing and see what happens.
-
Save the bean and exit:
-
Select Bean from the menu bar
-
Select Save Bean
-
Close the Visual Composition Editor
Building the GridLayoutPage class
-
Create the GridLayoutPage class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = GridLayoutPage
-
Superclass = java.awt.Panel
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser will be displayed, where
you can build the user interface as follows:
-
Set properties for GridLayoutPage
-
constraints => width = 600, height = 300
-
layout = GridLayout -> rows = 5, columns
= 2
-
background = Red
-
Change the palette category to AWT
-
Drop a Label in GridLayoutPage. Set properties for Label1
-
alignment = RIGHT
-
text = All nine of these components_
Note: The underscore represents a blank space.
-
Drop a Label beside Label1. To do this:
-
Press and hold mouse button 1, positioning the crosshair over Label1
-
Move the crosshair until you see a highlighted bar on the right side of
Label1
-
Release mouse button 1
Set properties for Label2
-
alignment = LEFT
-
text = will be sized the same.
-
Drop a Label beside Label2 using the same technique as just described.
Set properties for Label3
-
alignment = CENTER
-
text = Name
-
Drop a TextField beside Label3. Set properties for TextField1
-
background -> RGB red = 230, green = 230, blue = 230
-
Drop a Label beside TextField1. Set properties for Label4
-
alignment = CENTER
-
text = Rank
-
Drop a TextField beside Label4. Set properties for TextField2
-
background -> RGB red = 230, green = 230, blue = 230.
-
Drop a Label beside TextField2. Set properties for Label5
-
alignment = CENTER
-
text = Serial#
-
Drop a TextField beside Label5. Set properties for TextField3
-
background -> RGB red = 230, green = 230, blue = 230.
-
Drop a TextArea beside TextField3. Set properties for TextArea1
-
background = White
-
Open the String Editor for the text property and enter the following value
(use the Enter key to force a carriage return where noted by <cr>):
This is a GridLayout.<cr>
This layout manager arranges components in row-column order where all
components are sized the same.<cr><cr>
Try resizing now.<cr><cr>
This layout manager is best used to layout components of the same type,
like a set of buttons.
-
Make connections to set properties and invoke methods as follows (see Connection
Syntax ):
-
The following connections invoke the repaint method for each of the labels
when they are resized. For Label3, Label4, and Label5 this allows
a re-centering of the text in the label.
-
Event-to-method connection
-
Source: Label1 componentResized/event
-
Target: Label1 repaint/method.
-
Event-to-method connection
-
Source: Label2 componentResized/event
-
Target: Label2 repaint/method
-
Event-to-method connection
-
Source: Label3 componentResized/event
-
Target: Label3 repaint/method.
-
Event-to-method connection
-
Source: Label4 componentResized/event
-
Target: Label4 repaint/method
-
Event-to-method connection
-
Source: Label5 componentResized/event
-
Target: Label5 repaint/method
-
Save the bean and exit:
-
Select Bean from the menu bar
-
Select Save Bean
-
Close the Visual Composition Editor
Building the NullLayoutPage class
-
Create the NullLayoutPage class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = NullLayoutPage
-
Superclass = java.awt.Panel
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser will be displayed, where
you can build the user interface as follows:
-
Set properties for NullLayoutPage
-
background = Yellow
-
constraints -> width = 700, height = 300
-
Change the palette category to AWT
-
Drop a Label in NullLayoutPage in the upper left corner. Set properties
for Label1
-
text = Layout Managers
-
font -> Name = dialog, Style = Bold, Size = 36
-
constraints -> width = 300, height = 40
-
Drop a Label below Label1. Set properties for Label2
-
text = are used to arrange components in a
-
alignment = RIGHT
-
constraints -> width = 210
-
Drop a Label beside Label2. Set properties for Label3
-
text = Container
-
font -> Name = dialog, Style = Bold, Size = 18
-
constraints -> width = 100.
-
Drop a Label below Label2. Set properties for Label4
-
text = When the container is resized, moved,
-
constraints -> width = 210
-
Drop a Label below Label4. Set properties for Label5
-
text = or components are added or removed, the
-
alignment = RIGHT
-
constraints -> width = 250
-
Drop a Label beside Label5. Set properties for Label6
-
text = LayoutManager
-
font -> Name = monospaced, Style = Italic, Size = 18
-
constraints -> width = 150
-
Drop a Label below Label5. Set properties for Label7
-
text = grows, shrinks, aligns, hides, or shows components in a predefined
layout.
-
constraints -> width = 450
-
Drop a Label below Label7. Set properties for Label8
-
text = The layout of this panel is
-
alignment = RIGHT
-
font -> Size = 10
-
constraints -> width = 200
-
Drop a Label beside Label8. Set properties for Label9
-
text = NULL
-
alignment = CENTER
-
background = Orange
-
font -> Style = Bold, Size = 18
-
Drop a Label below Label8 and Label9, spanning them. Set properties
for Label10
-
text = , therefore when you resize it,
-
font -> Size = 10
-
constraints -> width = 225
-
Drop a Label below Label10, resizing it so that it is about the same width
as NullLayoutPage. Set properties for Label11
-
text = the labels remain fixed relative to the page origin.
-
Save the bean and exit:
-
Select Bean from the menu bar
-
Select Save Bean
-
Close the Visual Composition Editor
Building the GridBagLayoutPage class
-
Create the GridBagLayoutPage class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = GridBagLayoutPage
-
Superclass = java.awt.Panel
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser will be displayed, where
you can build the user interface as follows:
-
Set properties for GridBagLayoutPage
-
constraints => width = 600, height = 300
-
layout = GridBagLayout
-
background = Blue
-
Change the palette category to AWT
-
Drop a Label in GridBagLayout. Set properties for Label1
-
alignment = RIGHT
-
text = Name
-
constraints -> anchor = SOUTHWEST (make sure gridX = 0, gridY =
0)
-
Drop a Label below Label1. Set properties for Label2
-
alignment = RIGHT
-
text = Rank
-
constraints -> anchor = SOUTHWEST (make sure gridX = 0, gridY =
1)
-
Drop a Label below Label2. Set properties for Label3
-
alignment = RIGHT
-
text = Serial#
-
constraints -> anchor = SOUTHWEST (make sure gridX = 0, gridY =
2)
-
Drop a TextField beside Label1. Set properties for TextField1
-
background = White
-
columns = 20
-
constraints -> anchor = WEST, insets top = 10 (make sure gridX =
1, gridY = 0)
-
Drop a TextField below TextField1. Set properties for TextField2
-
background = White
-
columns = 20
-
constraints -> anchor = WEST (make sure gridX = 1, gridY = 1)
-
Drop a TextField below TextField2. Set properties for TextField3
-
background = White
-
columns = 10
-
constraints -> anchor = WEST (make sure gridX = 1, gridY = 2)
-
Drop a Button beside TextField1. Set properties for Button1
-
constraints -> fill = VERTICAL, gridHeight = 3, insets top = 20, insets
bottom = 20 (make sure gridX = 2, gridY = 0)
-
label = Tinker with Constraints
-
Drop a TextArea below Label3. Set properties for TextArea1
-
background = White
-
constraints -> fill = BOTH, gridWidth = 3, insets top = 10, insets right
= 10, insets left = 10, insets bottom = 10, weightX = 1.0, weightY = 1.0
(make sure gridX = 0 and gridY = 3)
-
Open the String Editor for the text property and enter the following value
(use the Enter key to force a carriage return where noted by <cr>):
This is GridBagLayout.<cr>
It is the most complex and most powerful of the supplied layout managers.<cr>
This LayoutManager lets you control exactly where components end up
relative to other components,<cr>
their alignment and their use of free space.<cr>
The layout information for each component is kept in the framing spec
as a GridBagConstraint.
-
Add non visual beans as follows:
-
A LiveGridBagConstraints nonvisual bean will be needed.
-
Select Choose Bean from the palette
-
Bean Type = Class
-
Class name = com.ibm.ivj.examples.vc.utilitybeans.LiveGridBagConstraints
-
Click OK
-
Place the bean on the free-form surface beside GridBagLayoutPage.
-
Make connections to set properties and invoke methods as follows (see Connection
Syntax ):
-
The gridBagPanel property in LiveGridBagConstraints1 should be set to the
GridBagLayoutPage panel.
-
Property-to-property connection
-
Source: GridBagLayoutPage this/property
-
Target: LiveGridBagConstraints1 gridBagPanel/property
-
When the user clicks the button that says "Tinker with Constraints", the
LiveGridBagConstraints frame should be opened.
-
Event-to-method connection
-
Source: Button1 actionPerformed/event
-
Target: LiveGridBagConstraints1 show/method
-
Button1 (the "Tinker with Constraints" button) should only be enabled when
the user is not already interacting with LiveGridBagConstraints.
-
Event-to-method connection
-
Source: Button1 actionPerformed/event
-
Target: Button1 enabled/property
-
(Method parameter: boolean)
-
Set Parameter: value=false
When an event is connected to a property, the set method for the property
is invoked. When Button1 is clicked, it is disabled.
-
Event-to-method connection
-
Source: LiveGridBagConstraints1 windowClosed/event
-
Target: Button1 enabled/property
-
(Method parameter: boolean)
-
Set Parameter: value=true
When the LiveGridBagConstraints1 frame is closed, Button1 is enabled.
-
When the GridBagLayoutPage is hidden (for example, when the user has switched
to another page in LayoutManagers), LiveGridBagConstraints1 should be disposed.
-
Event-to-method connection
-
Source: GridBagLayoutPage componentHidden/event
-
Target: LiveGridBagConstraints1 dispose/method
-
Save the bean and exit:
-
Select Bean from the menu bar
-
Select Save Bean
-
Close the Visual Composition Editor
Building the LayoutManagers class
This class demonstrates each of the Java AWT LayoutManagers by displaying
sample panels in a notebook style. By clicking on the tabs at the
top of the notebook or clicking a navigation button at the bottom, you
can select a panel with a different type of layout. You can interact
with the layouts by resizing the applet; for the more complex GridBagLayout,
you can use a special Frame that allows you to tinker with the GridBagConstraints
while your application is running.
This bean is composed of three panels:
-
A FlowLayout panel of Labels that appear as notebook tabs.
-
A GridBagLayout panel of Buttons for navigating forward and back through
the notebook.
-
A CardLayout panel that contains other beans; each is a panel with a different
layout.
-
Create the LayoutManagers class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = LayoutManagers
-
Superclass = java.applet.Applet
-
Select the Browse the class when finished check box
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser will be displayed, where
you can build the user interface as follows:
-
Set properties for LayoutManagers
-
constraints -> width = 800, height = 400
-
layout = BorderLayout
-
Change the palette category to AWT
-
Drop a Panel on the free-form surface. Set properties for Panel1
-
Drop a Label in Panel1. Set properties for Label1
-
Drop a Label beside Label1. Set properties for Label2
-
Drop a Label beside Label2. Set properties for Label3
-
Drop a Label beside Label3. Set properties for Label4
-
Drop a Label beside Label4. Set properties for Label5
-
Drop a Label beside Label5. Set properties for Label6
-
Move Panel1 to the North portion of LayoutManagers (you can move Panel1
in the Beans List)
-
(make sure constraints = North)
-
Drop a Panel on the free-form surface. Set properties for Panel2
-
Drop a Button in Panel2. Set properties for Button1
-
label = |<
-
constraints -> anchor = EAST, weightX = 1.0
-
Drop a Button to the right of Button1. Set properties for Button2
-
Drop a Button to the right of Button2. Set properties for Button3
-
Drop a Button to the right of Button3. Set properties for Button4
-
Move Panel2 to the South portion of LayoutManagers
-
(make sure constraints = South)
-
Drop a Panel in the center portion of LayoutManagers. Set properties
for Panel3
-
Use Choose Bean to drop a NullLayoutPage from your package in Panel3.
-
Use Choose Bean to drop a FlowLayoutPage from your package in Panel3.
-
Use Choose Bean to drop a BorderLayoutPage from your package in
Panel3.
-
Use Choose Bean to drop a GridLayoutPage from your package in Panel3.
-
Use Choose Bean to drop a GridBagLayoutPage from your package in
Panel3.
-
Use Choose Bean to drop a CardLayoutPage from your package in Panel3.
-
Add non visual beans as follows:
-
To move through the various pages in the card layout for Panel3, the show
method will be invoked for the CardLayout that is associated with Panel3.
To do this using connections, you will need to drop a nonvisual CardLayout
bean:
-
Select Choose Bean from the palette
-
Bean Type = Variable
-
Interface/Class name = java.awt.CardLayout
-
Click OK
-
Place the bean on the free-form surface below LayoutManagers
-
Make connections to set properties and invoke methods as follows (see Connection
Syntax ):
-
There will be an association between CardLayout1 and the layout that is
part of Panel3.
-
Property-to-property connection
-
Source: Panel3 layout/property
-
Target: CardLayout1 this/property
-
The labels in Panel1 will be used to switch to different pages in Panel3's
card layout. The background color of each label should match the
background color of the page its associated with.
-
Property-to-property connection
-
Source: NullLayoutPage1 background/property
-
Target: Label1 background/property
-
Property-to-property connection
-
Source: FlowlLayoutPage1 background/property
-
Target: Label2 background/property
-
Property-to-property connection
-
Source: BorderLayoutPage1 background/property
-
Target: Label3 background/property
-
Property-to-property connection
-
Source: GridLayoutPage1 background/property
-
Target: Label4 background/property
-
Property-to-property connection
-
Source: GridBagLayoutPage1 background/property
-
Target: Label5 background/property
-
Property-to-property connection
-
Source: CardLayoutPage1 background/property
-
Target: Label6 background/property
-
The next series of connections will be made to associate a mouse-clicked
event in each of the labels with the displaying of one of the pages in
Panel3's card layout.
-
Event-to-method connection
-
Source: Label1 mouseClicked/event
-
Target: CardLayout1 show/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
-
Method parameter: java.lang.String
-
Parameter source: name
-
Parameter target: NullLayoutPage1 name/property
When there is a mouseClicked event in Label1, NullLayoutPage1 is shown
in Panel3.
-
Event-to-method connection
-
Source: Label2 mouseClicked/event
-
Target: CardLayout1 show/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
-
Method parameter: java.lang.String
-
Parameter source: name
-
Parameter target: FlowLayoutPage1 name/property
When there is a mouseClicked event in Label2, FlowLayoutPage is shown
in Panel3.
-
Event-to-method connection
-
Source: Label3 mouseClicked/event
-
Target: CardLayout1 show/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
-
Method parameter: java.lang.String
-
Parameter source: name
-
Parameter target: BorderLayoutPage1 name/property
When there is a mouseClicked event in Label3, BorderLayoutPage is shown
in Panel3.
-
Event-to-method connection
-
Source: Label4 mouseClicked/event
-
Target: CardLayout1 show/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
-
Method parameter: java.lang.String
-
Parameter source: name
-
Parameter target: GridLayoutPage1 name/property
When there is a mouseClicked event in Label4, GridLayoutPage is shown
in Panel3
-
Event-to-method connection
-
Source: Label5 mouseClicked/event
-
Target: CardLayout1 show/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
-
Method parameter: java.lang.String
-
Parameter source: name
-
Parameter target: GridBagLayoutPage1 name/property
When there is a mouseClicked event in Label5, GridBagLayoutPage is
shown in Panel3.
-
Event-to-method connection
-
Source: Label6 mouseClicked/event
-
Target: CardLayout1 show/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
-
Method parameter: java.lang.String
-
Parameter source: name
-
Parameter target: CardLayoutPage1 name/property
When there is a mouseClicked event in Label6, CardLayoutPage is shown
in Panel3
-
The following connections will allow the user to traverse through the pages
of Panel3 using the buttons in Panel2.
-
Event-to-method connection
-
Source: Button1 actionPerformed/event
-
Target: CardLayout1 first/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
When Button1 is clicked, the first page in Panel3 is displayed.
-
Event-to-method connection
-
Source: Button2 actionPerformed/event
-
Target: CardLayout1 previous/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
When Button2 is clicked, the previous page in Panel3 is displayed.
-
Event-to-method connection
-
Source: Button3 actionPerformed/event
-
Target: CardLayout1 next/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
When Button3 is clicked, the next page in Panel3 is displayed.
-
Event-to-method connection
-
Source: Button4 actionPerformed/event
-
Target: CardLayout1 last/method
-
Method parameter: java.awt.Container
-
Parameter source: parent
-
Parameter target: Panel3 this/property
When Button4 is clicked, the last page in Panel3 is displayed.
-
Save the bean:
-
Select Bean from the menu bar
-
Select Save Bean
You're done building this sample, so now you can try running it!
To do this, click the Run button on the tool bar.