GRAPHICS
PROGRAMMING-
~ LAYOUT
MANAGERS
W
e create several components like push buttons, checkboxes, tadio buttons etc., in GUI.
. Mter creating thesecompo.nents, they should bep~aced in the frame (in AWT) or container
(in swing). While arranging them in the frame or container, they can be arranged in a
particular manner by using layout managers. JavaSoft people have created a· LayoutManager
interfac~ in java. awtpackage which is implemented in various classes which provide various types
of layouts to arrange the components.
What is a layout manager? £,.
A layout manager is a class that is useful to arrange components in a particular manner in a frame or .
container.
The following classes represent the layout managers-in Java:
o FlowLayout
o BorderLayout
o CardLayout
o GridLayout
o GridBagLayout
o BoxLayout
To set a particular layout, we should fIrst create an object to the layout class and pass the object to
setLayout () method. For example, to set FlowLayout to the container that holds the components,
we can write:
https://E-next.in
5241 Chapter 29
FlowLayout
FlowLayout is useful to arrange the components in a line one after the other. When a line is filled
with components, they are automatically placed in the next line. This is the default layout in applets
and panels.
To create FlowLayout, we can use the following ways:
.' o FlowLayout obj = new FlowLayout();
This creates flow layout. By· rtefault, the gap between components will be 5 pixels and the
components are centered in the first line..
o FlowLayout obj = new FlowLa~'ollt (int alignment);
Here, the alignment Of components can be specified. To arrange the components starting from left
right, we can use FlowLayout.LEFT. To adjust the components towards right, we can use
FlowLayo~t.RIGHT and for center alignment, we can use FlowLayout. CENTER.
o FlowLayout obj = new FlowLayout(int alignment, int hgap, int vgap);
Here, the hgap and 'vgap specify the space between components. hgap represents horizontal gap
and vgap repre~ents vertical gap in pixels.
Program 1: Write a program to create a group of push buttons and arrange them in the container
using flow layout manager. The buttons are right justified.
https://E-next.in
Graphics Programming - Layout Managers 525
Output:
BorderLayout .
BorderLayout is useful to arrange the components in the 4 borders of the frame as well as in the
center. The borders are identified with the names of directions. The top .border is specified as
'North', the right side border 'East', the bottom one as 'South' and the left one as 'West'. The center
is represented as 'Center'. See Figure 29.1. .
To create a BorderLayoui:, we ·can use the following ways:
o BorderLayout obj "= ·new BorderLayout();
This creates a BorderLayout object without any gaps 1:)etween the components.
o BorderLayout obj = new BorderLayout(int hgap, int vgap);
Here, hgap represents horizontal gap and vgap represents vertical gap between components in
pixels.
While adding the components to the cO!ltainer the direction should be specified, as:
c.aoCl orl:W com onen-t • C 1$ con fner
Here, the component is added in the container in North direction.
We can also add the component in North direction, as shown here:
c.aa. com onen BoroerLa ut.NORTH1·
In . the preceding" statement, we are specifying the direction with the constant;
BorderLayout.NORTH. Similarly, other constants EAST, WEST, SOUTH, CENTER. can be used.
https://E-next.in
5261 Chapter 29
North
West Center East ~
-
~.
.
South
-
-
Figure 29.1 Direction of components in BorderLayout
Program 2: Write a program to create a group of push buttons and add them to the container _
using BorderLayout.
https://E-next.in
Graphics Programming - Layout Managers 1527·
Output:
In preceding program, the components are arranged in the four borders as well as in the center of
the container.
CardLayout
A CardLayout object is a layout manager which treats each component as a card. Only one card is
visible at a time, and the container acts as a stack of cards, The first cQmponent added to a
CardLayout object is the visible component when the container is first displayed.
To create CardLayout object, we can use the following ways:
o CardLayout obj = new CardLayout();
Here, the card layout object is created without any gaps between the components .
.., 0 CardLayout· obj = new CardLayoD.t (int hgap, int vgap);
The preceding statement creates a card layout with the specified horizontal and vertical gaps
between the components.
o While adding ·components to the container, we can use addO method as: .
c.a a . car name· mont·
o To retrieve the cards one by one, the following methods can be used: .
~. void first (container) : to retrieve the first card.
• void last (container) : to retrieve the last card.
• void next (container) : to go to the next card.
• void previous (container) : to go back to previous card.
https://E-next.in
5281 Chapter-29
• void show (containEC'r, ~. cardname") : to see a particular card with the name
specified.
Program 3: Write a program to create a: group of push buttons and add them to the- container u . _
CardLayout.
https://E-next.in
Graphics Programming - Layout Managers 529
Output:
In preceding program, the components are arranged on 4 cards whose names are First card, Second
card, Third card and Fourth card. When a button on a card is clicked, the next card is displayed.
Observe the preceding output. if the Buttonl is clicked there, the next card with Button2 will be
displayed as shown here.
Using a Layout Inside Another Layout
It is possible to use a layout inside another layout. For example, we can set a particular layout to a
group of components and that group can be added to a frame or container by using another layout.
In the previous program, we used card layout to display push buttons on each card. Suppose we
want to display a group of components on the second. card. How can we do this? First, we should
wTite a class which extends JPanel class. JPariel class is useful to create a panel to which a group
of components can be attached, as see here:
c ass panel ext~n 5 Jpan€l
https://E-next.in
530 IChapter 29
The default layout used by a panel -is flow layout. If we want any other layout, we Can set it using
setLayout () method.
In MyPanel class, we should create the components and attach them to panel, as:
Now, create an object to MyPanel and pass that object as a component to the contmner by using
card layout, as: ~
Since, we are creating MyPanel object, and it contains a group of components, all those components
are attached to the Second card.
In Program 4, we create a container with the card layout manager. Then, a push button is- added to
the fIrst card. In case of second card, we want to add a group of components, a text fIeld, a check
box and a push button. We want to add these components to the second card by using border
layout. F;or this purpose, we create a panel and add the components by using border layout
manager. Then, we add the panel object to the second card.
Program 4: Write a program to add a group of components: a text fIeld, a check box and a push
button, using border layout to a panel. Then the panel object is added in the container which uses
card layout.
https://E-next.in
Graphics Programming - Layout Managers I 531
Output:
- When the preceding button onfirst·card·is clicked, the user is -led to second card wllere three
components are displayed by ~sing border layout, as shown here.
https://E-next.in
5321 Chapter 29
°Check box
GridLayout
GridLayout is useful to divide the container into a two-dimensional grid form that contains severe:
rows and columns. The container is divided into equal-sized rectangles, and one component
placed in eacfl. rectangle.
To 'create GridLayout object, we can write as:
o GridLayout obj = new GridLayout();
This creates a grid layout with a default. of one column per componerit, in a single row.
o GridLayout obj = new GridLayout(int ro~s, int cols);
This creates a grid layout with specified number of rows and columns.
o GridLayout obj = new GridLayout(int rows, int eols, int hgap, int vgap);
H~re, hgap represents horizontal gap between components and vgap represents vertical
between components. .
Program 5: Write a program to create five push buttons and add them to the content pane u .
border layout manager. -
https://E-next.in
Graphics Programming - Layout Managers 533
Output:
javac GrioLayoutDemo.Java
. GrigL~ID'Q.
-.--,
Button l' Button 3
Button 4 Button 6
Button 9-
Figure 29.6 (a) Filling horizontally
Figure 29.6 (b) Filling vertically
https://E-next.in
5361 Chapter 29
Figure 29.6 (c) Filling in both directions
o GridBagConstraints. insets; This constraint is useful to leave some space around the
component at the four edges of component. This space is left around the component and the
boundary of its display area. insets is the object of Insets class, so it is created as:
Here, we are leaving Spx at top of the component, lOpx at left, lSpx at bottom and 20px at the ri
. ofthe component. See Figure 29.7.
By default, it is given as:
Ins ·ts . s t new- nsetsQ
di5play area
Button 5
10 20
15
Ins.ets insets = newInsets(5,10,15,20);
Figure 29.7 The effect of insets constraint
o GridBagConstraints. ipadx, GridBagConstraints. ipady: ipadx and ipady are useful
leave space horizontally and vertically within the component. After adding the space,
components size width-wise and height-wise will increase. Default value is O. What happe
when ipadx and ipady values are set to a component is shown in Figure 29.8.
ipadx=O ipadx = ioo
ipady=O ipady= 0
(original size) (original size +'100 px ipadx=O
width-wise) ipady =100
(ori&.inalsize + 100 px
height-wise)
Figure 29.8 The effect of ipadx and ipady constraints
https://E-next.in
-
Graphics Programming - Layout Managers 537
Program 6: This program is designed to display 5 push buttons using grid bag: layout manager at
certain positions. Please observe the output of the- program first and then observe one by one the
constraints set to the buttons. - - --
https://E-next.in
538 1Chapter29
https://E-next.in
Graphics Programmin!
".''\
"
BoxLayout
BoxLayout of j avax. swing package allows multiple components I
horizontally. The components will not wrap so, for example, a ver1
will stay vertically arranged when the frame is resized. We can cr
the combinations shown below:
o BoxLayout box = new BoxLayout (JPanel object, axis-o]
Here, all the components which are inside a JPanel object are an
This 'axis-orientation' can be:
o BoxLayout . X_AXIS: Here, components are arranged along x-a
o BoxLayout. Y_AXIS: Here, components are arranged along y-a
o BoxLayouLLINE_AXIS: Here, components are arrangedIike Iil
o BoxLayout. PAGE~AXIS: Here, components are arrangedIike Iil
Program 7: Write a program to understand the usage of BoxLayout
https://E-next.in
540 IChapter 29
This program uses box layout to arrange some. components. along x-axis and 'some m(L~
components along y-axis. The components which are arranged along x-axis are added inside =
JPanel object where box layout is used and that object is added to content pane. Similarly,
components which are arranged along y-axis are added inside another JPanel object where
https://E-next.in
Graphics Programming - Layout Managers I· 541
layout is used and that object is also added to content pane. The two JPanel objects ·are created
which are adde9 to the content pane by using flow lay!?ut.
Box Class
BoxLayout is implemented with the help of Box class defined in j avax. swing package. We can
imagine the Box class object as an invisible area where the components can be placed by using box
layout: Box class provides basically two types of boxes, horizontai box and vertical box.
The following methods help us to work With box layout:
o To create a box where the components' are arranged from left to right, we can use
createHorizontalBox () method, as:
C H
o In· case, we want to arrange the components vertically from top to bottom, we can use
crea~eVeriticalBox() method.
Box
o Now, the components can be added to Box object using add () method.
. adO c0mP-0nent ;
o The size of components can .be set by using setPrefeq:edSize (), setMinimumSize () and
setMaximumSize () methods ofJComponent class..'. '
• setPreferredSize () : This method tells the container to use some preferred size for
tile component so that the component fits nicely in the container.
• s~tMinimumSize () : This method sets some minimum size of the component.
• setMaximumSize (): This method sets the maximum size of the component.
Similarly, to retrieve the size of components, we can use getPreferredSize (), getMinimumSi ze ()
and getMaximumSiz'e
.
() methods. . '
o By default, there will be no space left between the components in a box layout. To add space we
need fillers. There are three types of fillers defined itl Box class'.
• Struts:. to leave some space between components.
I).add Box.createHo
https://E-next.in
5421 Chapter 29
This strut leaves horizontal space of 20px between the components in the box.
This method adds a vertical space of 20px between the co~p(me~ts in the box.
I:J Rigid areas: to leave some space between components and also to set the vertical size of
box. .
:Ape-a new O:llnenslQn 5721J ~
This method leaves a fIxed rectangular space of 5px width and 20px height between
components.
I:J Glue: to separate componen!s as much as possible.
This method throws the components maximum distance that is possible horizontally.
a a Box crea
This method adds vertical glue in the box so that the components are kept at a maxim~m dis~
that is possible vertically.
Let us design a program to understand how to use Box class:
o First, we create a horizontal box to place components, for example, a label and a text fIeld. F
this purpose, we_create the components, i.e., a label and text field, as:
·Then, we set the maximum size of the text.fIeld to the preferre~ size, as:
.5 tMronmt! z r
Then, we create a horizontal box and add the components in the box, as:
Suppose, we wish to leave some horizontal space between the label and text fIeld, we: can :use
strut as:
eate 0 0 t oR
o In the same way, we create a second horizontal box to place another label and a text fIeid.
same steps described earlIer can be used in this case also. .
Finally, We create a third horizontal boxwhere we want to place two push buttons.
Now, we create a vertical box and add the preceding three horizontal boxes inside it, as:
https://E-next.in
Graphics Programming - Layout Managers 543
D To leave some v'erticalspace between the three· horizontal boxes, we can add a vertical strut
between the -boxes as: 0 • - - ~ - - .• .
The preceding steps are shown in Fiiure 29:9 and are implemented in Program 8.
Figure 20.9 Components arranged using Box claSS.
Program 8: Write a program to create three horizontal boxes with components and finally add them·
inside another vertical box. . . .• . .
b https://E-next.in
5441 Chapter 29
Output:
> Javac Boxoemo.java
> java Boxoemo
Conclusion-
Layout managers are useful to arrange a group of components in a particular manner -in a cont .
as wished by the programmer. FlowLayout is the simplest layout manager and GridBagLayout is
most flexible and complex layout manager among all other layouts. While working with a group
components, the programmer should first plan his output and accordingly decide which lay
should be used in a particular application. Then only he can start writing his program.
https://E-next.in
