- 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 hat 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
- The JDK provides support for several
layouts including the FlowLayout, GridLayout, BorderLayout,
and GridBagLayout.
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.
Previous Page |
Next Page
|