Layouts
Layouts
-
While buttons, lists, and other controls are the most obvious parts of
a GUI, they alone do not make that GUI effective. A poor arrangement of
buttons, or a random collection of text entry fields, can make an application
as difficult to use as one that uses a command-line interface.
-
To help you define the layout of your application, the JDK provides a set
of layout managers. These objects are responsible for positioning and sizing
components within a container, regardless of the platform or the screen
size.
-
Most layout managers ask each component in the container how much space
it requires and arranges the components on the screen as best it can, based
on the components' sizes and on the space available.
-
Thus, if you put three Button objects in a container such as a Panel, the
layout manager of the Panel will determine where the three buttons will
be placed and how large they should be.
-
If the user resizes the panel, the layout manager will again be responsible
for organizing the layout of the interface given the new space requirements.
-
This is a crucial task because to calculate the sizing and placement of
components on every platform and for every screen size would be a programming
task of Herculean proportions. The beauty of layout managers is that once
you define the overall logic of the interface layout (which type of layout
manager you will use), the layout manager does all the grunt work for you.
-
However, since layout managers arrange the components in a container by
themselves, they may also override any attempt you make to set the size
or placement of a component in a container. This happens more often than
not. If you use a BorderLayout for instance, and you place a component
in the center and try to set its size, your request to set the size of
the component in the center will be ignored. The layout manager will place
it at whatever size it determines the component should be. Thus, to some
degree, what is gained in convenience with layout managers is lost in control.
Nevertheless, in the hands of a nimble programmer layout managers can be
powerful and essential tools.
-
In addition to handling the layout of components in a container, layout
managers also manage keyboard navigation. Keyboard navigation is the mechanism
that allows a user to move through the components in a user interface using
only the keyboard. Keyboard navigation is an important part of your interface
because not every display allows mouse input. In addition, in some applications
like data entry, using keyboard navigation is far more convenient than
using a mouse.
-
The theory of keyboard navigation is this: At any point in time, only one
interface component can "listen" to the keyboard for keyboard events (the
user hitting a key for example). The component that is listening to the
keyboard is said to have "keyboard focus", or just "focus". Typically,
the component that has focus identifies itself by displaying a location
cursor that is oftentimes a highlighted border that surrounds the component.
Whichever component has focus is the component that is acted upon by the
user. Thus, if a text field has focus and the user types in some text,
the text will be sent to that text field component for display and/or processing.
-
When a user "moves focus" from one component to another with the keyboard
(such as by hitting the arrow, tab, or HOME/END keys), the layout manager
is involved to decide which component to move to.
JDK Layout Managers
Flow Layout
-
The Flow layout organizes its components in horizontal rows from left to
right and from top to bottom according to the available space. Each row
is centered by default but you can easily set the alignment
-
As in most layout managers, components are sized to their preferred size
unless there is insufficient space, in which case, the components are clipped.
import java.awt.*;
public class FlowLayoutExample
{
public static void main(String[] args)
{
Frame baseFrame = new Frame();
FlowLayout layout = new FlowLayout();
baseFrame.setLayout(layout);
baseFrame.reshape(10,10,200,200);
baseFrame.setTitle("Flow Layout Example");
Button one = new Button("one");
Button two = new Button("two");
Button three = new Button("three");
Button four = new Button("four");
Button five = new Button("five");
baseFrame.add(one);
baseFrame.add(two);
baseFrame.add(three);
baseFrame.add(four);
baseFrame.add(five);
baseFrame.show();
}
}
Grid Layout
-
GridLayout places components in a two-dimensional grid in which every component
is placed at the same size. Thus, it is ideal for laying out objects in
rows and columns, where each cell in the layout has the same size such
as a calculator keypad or a calendar. Components are added to the layout
from left to right and from top to bottom.
import java.awt.*;
public class GridLayoutExample
{
public static void main(String[] args)
{
Frame baseFrame = new Frame();
GridLayout layout = new GridLayout(2,2);
baseFrame.setLayout(layout);
baseFrame.reshape(10,10,200,200);
baseFrame.setTitle("Grid Layout Example");
Button one = new Button("one");
Button two = new Button("two");
Button three = new Button("three");
Button four = new Button("four");
baseFrame.add(one);
baseFrame.add(two);
baseFrame.add(three);
baseFrame.add(four);
baseFrame.show();
}
}
Border Layout
-
BorderLayout provides a flexible way of positioning components along the
edges of a window. Specifically, it defines five areas, "NORTH", "SOUTH",
"EAST", "WEST" that specify the edges of the window and "CENTER" for the
remaining interior space. A component may be placed in one of the locations
by giving the area as the constraint when the component is added to the
layout manager. It is useful to know that not all the regions need to be
filled. If an area is not used, it relinquishes its space to the regions
around it.
-
Make sure that you do not add multiple components to any one area because
only one can be displayed. If you do add multiple components, only the
last one added is displayed. If you want to display multiple components
within a BorderPanel area, you should add them to a separate Panel and
add the panel to the area.
-
This idea of relinquishing space is important when understanding how the
border layout decides which components in the layout get precedent over
others when those components are vying for available space. The pecking
order works like this. First, the components in the NORTH and SOUTH are
placed at their preferred height. Next, the components in the EAST and
WEST are placed at their preferred width. Finally, the component in the
CENTER is placed at its preferred width and height, "if possible". Otherwise,
the CENTER component will just be placed so that it uses all remaining
space. Thus, if the NORTH, SOUTH, EAST, and WEST components take up all
the available space, the CENTER component won't be visible at all. Similarly,
if the NORTH and SOUTH components take up the entire height of the window,
the EAST, WEST, and the CENTER components will not be visible.
import java.awt.*;
public class BorderLayoutExample
{
public static void main(String[] args)
{
Frame baseFrame = new Frame();
BorderLayout layout = new BorderLayout(2,2);
baseFrame.setLayout(layout);
baseFrame.reshape(10,10,200,200);
baseFrame.setTitle("Border Layout Example");
Button one = new Button("one");
Button two = new Button("two");
Button three = new Button("three");
Button four = new Button("four");
Button five = new Button("five");
baseFrame.add(one, "Center");
baseFrame.add(two, "North");
baseFrame.add(three, "South");
baseFrame.add(four, "East");
baseFrame.add(five, "West");
baseFrame.show();
}
}
Card Layout
-
The Card Layout is used to create a group of tabs that you can flip through
like many of the options or preferences dialogs you will see in modern
applications. Of course, Java does not have anything as nice looking as
the typical windows tab widget, but it does at least provide the functionality.
Since it is impossible to demonstrate the functionality of a CardLayout
visually (you must play with it), we won't show a picture here. If you
are interested in a card layout, just check out the online documentation.
-
In the meantime, here is a simple example (we will talk about the action()
method later):
import java.awt.*;
public class CardLayoutExample extends Frame
{
public CardLayout layout;
public Panel cardPanel;
public CardLayoutExample()
{
setTitle("Card Layout Example");
Panel navigationPanel = new Panel();
navigationPanel.add(new Button("<"));
navigationPanel.add(new Button(">"));
navigationPanel.setBackground(Color.black);
add(navigationPanel, "North");
cardPanel = new Panel();
layout = new CardLayout();
cardPanel.setLayout(layout);
add(cardPanel, "South");
Panel p1 = new Panel();
Panel p2 = new Panel();
Panel p3 = new Panel();
Button b1 = new Button("1");
Button b2 = new Button("2");
Button b3 = new Button("3");
p1.add(b1);
p2.add(b2);
p3.add(b3);
cardPanel.add("first", p1);
cardPanel.add("second", p2);
cardPanel.add("third", p3);
}
public static void main(String[] args)
{
Frame f = new CardLayoutExample();
f.reshape(10,10,200,200);
f.show();
}
public boolean action(Event evt, Object obj)
{
if (obj.equals("<"))
{
layout.previous(cardPanel);
}
else if (obj.equals(">"))
{
layout.next(cardPanel);
}
else return super.action(evt,obj);
return true;
}
}
Grid Bag Layout
-
The GridBagLayout is a complex layout manager. Actually, complex is putting
it mildly. Though some AWT programmers swear by it, they are few and far
between. In fact, I rarely use it at all.
-
For example, even if you understand it and design your interface using
it, if another programmer comes along and needs to modify the code you
have written, they need to delve into the intricacies of the complex arrangement
of constraints you needed to perform in order to make everything lay out
correctly. This can be a pretty heavy burden, especially if they are assigned
the task of changing the layout itself.
-
Furthermore, all the things you can do with GridBagLayout you can also
do with a combination of other layout managers.
-
So, instead of delving into the intricacies, details and nuances of the
GridBagLayout, I will briefly describe it and suggest you avoid it in favor
of a combination of the other layout managers. You can refer to the online
documentation for full details on how it works if you are really interested
in using it.
-
The GridBagLayout is described by some as a grid that allows you to place
components in rows and columns but also allows individual components to
span over rows or columns, so that they don't necessarily exist only in
a single cell. This would make it seem rather simple, however it is not.
There are 11 variables that are used to place and determine the size of
each component. How these variables are interpreted is determined by the
constraints of other components within the grid. It's not simply a mater
of creating a GridBagLayout that is 20-by-20 grid, for example and then
placing components in the various cells. There is a complex interaction
of weights, positions, insets, etc. for each component where its layout
depends on the layouts of other components in the container.
Additional Resources:
Exercise
Six
Table of Contents
Graphics
|