Section 7.2
More about Layouts and Components
SWING INCLUDES A VARIETY of GUI components. We have already encountered a few of these, such as JApplet, JButton, and JPanel. In then next few sections, we will be studying Swing components in more detail.
Most Swing components are defined by subclasses of the class javax.swing.JComponent. A JComponent cannot stand on its own. It must be contained in some other component. We have seen, for example, that JPanels can act as containers for other JComponents. At the top level of this containment hierarchy are classes such as JApplet. A JApplet is not a JComponent, but it can serve as a container for JComponents. A JApplet is a top-level container that is meant to appear on a Web page. In Section 7, we'll see two more top-level container classes, JFrame and JDialog, which can be used to create independent windows on the computer screen.
The basic properties of components and containers are actually defined by the AWT classes java.awt.Component and java.awt.Container. Occasionally, you will see these classes used in Swing. For example, the getContentPane() method in a JApplet has a return type of Container rather than JPanel or JComponent as you might expect.
A JPanel is a container that is itself a JComponent.
A JPanel can contain other components, and it can in turn
be contained in another component.
The fact that panels can contain other panels means that you
can have many levels of components
containing other components, as shown in the illustration on
the right. Several other classes, such as Box
and TabbedPane, also define components that can be
used as containers. This leads to two questions: How are
components added to a container? How are their
sizes and positions controlled?
The sizes and positions of the components in a container are usually controlled by a layout manager. Different layout managers implement different ways of arranging components. There are several predefined layout manager classes, including FlowLayout, GridLayout, BorderLayout, BoxLayout, CardLayout and GridBagLayout. All these classes are defined in the package java.awt. It is also possible to define new layout managers, if none of these suit your purpose. Every container is assigned a default layout manager when it is first created. For JPanels, the default layout manager belongs to the class FlowLayout. The content pane of a JApplet uses a BorderLayout by default. You can change the layout manager of a container using its setLayout() method.
It is even possible to set the LayoutManager of a container to be null. This allows you to take complete charge of laying out the components in the container. I will discuss this possibility and give an example in the last part of Section 4.
As for adding components to a container, that's easy. You just use one of the container's add() methods. There are several add() methods. Which one you should use depends on what type of LayoutManager is being used by the container, so I will discuss the appropriate add() methods as I go along.
I have often found it to be fairly difficult to get the exact layout that I want in my applets and windows. I will briefly discuss several layout manager classes here, but using them well will require practice and experimentation.
FlowLayout
A FlowLayout simply lines up its components without trying to be particularly neat about it. After laying out as many items as will fit in a row across the container, it will move on to the next row. The components in a given row can be either left-aligned, right-aligned, or centered, and there can be horizontal and vertical gaps between components. If the default constructor, "new FlowLayout()" is used, then the components on each row will be centered and the horizontal and vertical gaps will be five pixels. The default layout for a JPanel uses gaps of this size. The constructor
FlowLayout(int align, int hgap, int vgap)
can be used to specify alternative alignment and gaps. The possible values of align are FlowLayout.LEFT, FlowLayout.RIGHT, and FlowLayout.CENTER. A nifty trick is to use a very large value of hgap. This forces the FlowLayout to put exactly one component in each row, since there won't be room on a single row for two components and the horizontal gap between them. The appropriate add() method for FlowLayouts has a single parameter of type Component, specifying the component to be added.
For example, suppose that we wanted an applet to contain one button, located in the upper right corner of the applet. The default layout manager for an applet's content pane is a BorderLayout. We need to give the content pane a FlowLayout with right alignment. This will shove the button to the right edge of the applet. The following init() method will do this:
public void init() {
getContentPane().setLayout( new FlowLayout(FlowLayout.RIGHT, 5, 5) );
getConetntPane().add( new JButton("Press me!") );
}
Note again that it is the applet's content pane that actually holds components, and it is the content pane that needs a layout manager. It is an error to try to set a layout manager for a JApplet itself.
BoxLayout and the Box Class
A BoxLayout simply lines up components in a single horizontal row or in a single vertical column. BoxLayouts are generally used with objects belonging to the class javax.swing.Box. A Box is just a container that uses a BoxLayout. The Box class contains two static methods for creating boxes:
Box.createHorizontalBox();
and
Box.createVerticalBox();
These methods are used instead of a constructor to create box objects. For example, if you want a Box to contain a horizontal row of components, you can create it with the command:
Box hbox = Box.createHorizontalBox();
Components are added to a box using an add() method with one parameter, which specifies the component that is to be added. The Box class has several static methods that can be used to create specialized components for adding space to a box layout. For example, if width is an integer, then Box.createHorizontalStrut(width) creates a component that is invisible except that it has the specified width and so takes up that amount of horizontal space. You can add a horizontal strut between two components in a horizontal box layout to leave space between the components. Similarly, Box.createVerticalStrut(height) creates an invisible component that has the specified height. For example, the following commands create a Box that contains four (useless) buttons in a horizontal row, with ten pixels of space between the second and third button:
Box hbox = Box.createHorizontalBox();
hbox.add( new JButton("First") );
hbox.add( new JButton("Second") );
hbox.add( Box.createHorizontalStrut(10) );
hbox.add( new JButton("Third") );
hbox.add( new JButton("Fourth") );
Horizontal Boxes can be used for the "toolbars" that you see in many graphical user interfaces.
BorderLayout
A BorderLayout places one component in the center
of a container. This central component is surrounded by
up to four other components that border it to the "North",
"South", "East", and "West",
as shown in the diagram at the right. Each of the four bordering
components is optional. The layout manager first allocates
space to the bordering components. Any space that is left over
goes to the center component.
If a container uses a BorderLayout, then components should be added to the container using a version of the add() method that has two parameters. The first parameter is the component that is being added to the container. The second parameter specifies where the component is to be placed. It must be one of the constants BorderLayout.CENTER, BorderLayout.NORTH, BorderLayout.SOUTH, BorderLayout.EAST, or BorderLayout.WEST. If the second parameter is omitted, then BorderLayout.CENTER is used by default. For example, the following code creates a panel with drawArea as its center component and with scroll bars to the right and below:
JPanel panel = new JPanel();
panel.setLayout(new BorderLayout());
// To use BorderLayout with a JPanel, you have
// to change the panel's layout manager; otherwise,
// a FlowLayout is used. Alternatively, you
// can provide the layout manager as a
// parameter to the constructor:
// panel = new JPanel( new BorderLayout() );
panel.add(drawArea, BorderLayout.CENTER);
// Assume drawArea already exists.
panel.add(hScroll, BorderLayout.SOUTH);
// Assume hScroll is a horizontal scroll bar
// component that already exists.
panel.add(vScroll, BorderLayout.EAST);
// Assume vScroll is a vertical scroll bar
// component that already exists.
Sometimes, you want to leave space between the components in a container. You can specify horizontal and vertical gaps in the constructor of a BorderLayout object. For example, if you say
panel.setLayout(new BorderLayout(5,7));
then the layout manager will insert horizontal gaps of 5 pixels between components and vertical gaps of 7 pixels between components. The horizontal gap is inserted between the center and west components and between the center and east components; the vertical gap is inserted between the center and north components and between the center and south components. (The default layout for a JApplet's content pane is a BorderLayout with no horizontal or vertical gap.)
GridLayout
A GridLayout lays out components in a grid of
equal sized rectangles. The illustration shows how the components
would be arranged in a grid layout with 3 rows and 2 columns.
If a container uses a GridLayout, the appropriate
add method takes a single parameter of type Component
(for example: add(myButton)).
Components are added to the grid in the order shown; that
is, each row is filled from left to right before going on the
next row.
The constructor for a GridLayout with R rows and C columns takes the form "new GridLayout(R,C)". If you want to leave horizontal gaps of H pixels between columns and vertical gaps of V pixels between rows, use "new GridLayout(R,C,H,V)" instead.
When you use a GridLayout, it's probably good form to add just enough components to fill the grid. However, this is not required. In fact, as long as you specify a non-zero value for the number of rows, then the number of columns is essentially ignored. The system will use just as many columns as are necessary to hold all the components that you add to the container. If you want to depend on this behavior, you should probably specify zero as the number of columns. You can also specify the number of rows as zero. In that case, you must give a non-zero number of columns. The system will use the specified number of columns, with just as many rows as necessary to hold the components that are added to the container.
Horizontal grids, with a single row, and vertical grids, with a single column, are very common. For example, suppose that button1, button2, and button3 are buttons and that you'd like to display them in a horizontal row in a panel. If you use a horizontal grid for the panel, then the buttons will completely fill that panel and will all be the same size. The panel can be created as follows:
JPanel buttonBar = new JPanel();
buttonBar.setLayout(new GridLayout(1,3));
// (Note: The "3" here is pretty much ignored, and
// you could also say "new GridLayout(1,0)".
// To leave gaps between the buttons, you could use
// "new GridLayout(1,0,5,5)".)
buttonBar.add(button1);
buttonBar.add(button2);
buttonBar.add(button3);
You might find this button bar to be more attractive than the ones in the examples in the Section 6.6, which used the default FlowLayout layout manager.
GridBagLayout
A GridBagLayout is similar to a GridLayout in that the container is broken down into rows and columns of rectangles. However, a GridBagLayout is much more sophisticated because the rows do not all have to be of the same height, the columns do not all have to be of the same width, and a component in the container can spread over several rows and several columns. There is a separate class, GridBagConstraints, that is used to specify the position of a component, the number of rows and columns that it occupies, and several additional properties of the component.
Using a GridBagLayout is rather complicated, and I have used it on exactly two occasions in my own Java programming career. I will not explain it here; if you are interested, you should consult a Java reference.
CardLayout
CardLayouts differ from other layout managers in that in a container that uses a CardLayout, only one of its components is visible at any given time. Think of the components as a set of "cards". Only one card is visible at a time, but you can flip from one card to another. Methods are provided in the CardLayout class for flipping to the first card, to the last card, and to the next card in the deck. A name can be specified for each card as it is added to the container, and there is a method in the CardLayout class for flipping directly to the card with a specified name.
Suppose, for example, that you want to create a JPanel that can show any one of three JPanels: panel1, panel2, and panel3. Assume that panel1, panel2, and panel3 have already been created:
cardPanel = new JPanel();
// assume cardPanel is declared as an instance variable
// so that it can be used in other methods
cards = new CardLayout();
// assume cards is declared as an instance variable
// so that it can be used in other methods
cardPanel.setLayout(cards);
cardPanel.add(panel1, "First");
// add panel1 with name "First"
cardPanel.add(panel2, "Second");
// add panel2 with name "Second"
cardPanel.add(panel3, "Third");
// add panel3 with name "Third"
Elsewhere in your program, you could show panel1 by saying
cards.show(cardPanel, "First");
or
cards.first(cardPanel);
Other methods that are available are cards.last(cardPanel), cards.next(cardPanel), and cards.previous(cardPanel). Note that each of these methods takes the container as a parameter. To use a CardLayout effectively, you'll need to have instance variables to record both the layout manager (cards in the example) and the container (cardPanel in the example). You need both of these objects in order to flip from one card to another.
An Example
To finish this survey of layout managers, here is an applet that demonstrates layout managers of various types:
The applet itself uses a BorderLayout with vertical gaps of 3 pixels. These gaps show up in blue. The Center component of the applet is a JPanel, which uses a CardLayout as its layout manager. The layout contains eight cards. Each card is itself another panel that contains several buttons. Each card uses a different type of layout manager (several of which are extremely stupid choices for laying out buttons).
The North component of the applet is a JComboBox, which contains the names of the eight panels in the card layout. The user can switch among the cards by selecting items from this menu. The South component of the applet is a JLabel that displays an appropriate message whenever the user clicks on a button or chooses an item from the JComboBox.
The source code for this applet is in the file LayoutDemo.java. It consists mainly of a long init() method that creates all the buttons, panels, and other components and lays out the applet.
Borders and Insets
Swing makes it very easy to add decorative borders around the edges of a JComponent. The class javax.swing.BorderFactory contains a large number of static methods for creating borders. For example, the function
BorderFactory.createLineBorder(Color.black)
returns an object that represents a one-pixel wide black line around the outside of a component. If comp is a JComponent, a border can be added to comp using its setBorder() method. For example:
comp.setBorder( BorderFactory.createLineBorder(Color.black) );
When a border has been set for a JComponent, the border is drawn automatically, without any further effort on the part of the programmer. The border is drawn along the edges of the component, just inside its boundary. The layout manager of a JPanel or other container will take the space occupied by the border into account. The components that are added to the container will be displayed in the area inside the border. I don't recommend using a border on a JPanel that is being used as a drawing surface. However, if you do this, you should take the border into account. If you draw in the area occupied by the border, that part of your drawing will be covered by the border.
Here are some of the static methods that can be used to create borders:
- BorderFactory.createEmptyBorder(top,left,bottom,right) -- leaves an empty border around the edges of a component. Nothing is drawn in this space, so the background color will appear in the area occupied by the border. The parameters are integers that give the width of the border along the top, left, bottom, and right edges of the component. This is actually very useful when used on a JPanel that contains other components. It puts some space between the components and the edge of the panel.
- BorderFactory.createLineBorder(color,thickness) -- draws a line around all four edges of a component. The first parameter is of type Color and specifies the color of the line. The second parameter is an integer that specifies the thickness of the border. If the second parameter is omitted, a line of thickness 1 is drawn.
- BorderFactory.createMatteBorder(top,left,bottom,right,color) -- is similar to createLineBorder, except that you can specify individual thicknesses for the top, left, bottom, and right edges of the component.
- BorderFactory.createEtchedBorder() -- creates a border that looks like a groove etched around the boundary of the component. The effect is achieved using lighter and darker shades of the component's background color, and it does not work well with every background color.
- BorderFactory.createLoweredBevelBorder() -- gives a component a three-dimensional effect that makes it look like it is lowered into the computer screen. As with an EtchedBorder, this only works well for certain background colors.
- BorderFactory.createRaisedBevelBorder() -- similar to a LoweredBevelBorder, but the component looks like it is raised above the computer screen.
- BorderFactory.createTitledBorder(title) -- creates a border with a title. The title is a String, which is displayed in the upper left corner of the border.
There are many other methods in the BorderFactory class, most of them providing variations of the basic border styles given here. The following applet shows six components with six different border styles. The text in each component is the command that created the border for that component:
Since a JApplet is not a JComponent, it's not possible to set a Border object for a JApplet. There is, however, another way to add a border of color around the edges. An applet can use "insets" to leave space around the edges of the applet where the background color of the applet will show through. To do this, define the method public Insets getInsets() in your subclass of JApplet. This method should return an object of type Insets, which specifies the width of the border along the top, left, bottom, and right edges of the applet. The system will call your method to determine how much space to leave. For example, if your subclass of JApplet includes the method definition:
public Insets getInsets() {
return new Insets(5,5,5,5);
}
then there will be a 5-pixel-wide border around the edges of the applet where the background color of the applet will show. To specify the color, you can set the applet's background color in its init() method. Note that Insets should not be used with JComponents. For a JComponent, you can use BorderFactory.createEmptyBorder() to accomplish the same thing.
The LayoutDemo applet uses Insets to leave a 3-pixel border around the outside of the applet, where the blue background color of the applet shows through. This is different from the 3-pixel blue gap between the components in the applet's content pane, where the blue gap is a feature of the content pane's BorderLayout. It's the background color of the content pane, not of the applet, that shows though the spaces in the BorderLayout. To set up the colors, the init() method of the applet sets the background color for both the applet and for its content pane to blue. Since the default layout used for a content pane has no vertical gap, the init() method also installs a different layout manager for the content pane. All this is done with the following commands:
setBackground(Color.blue);
getContentPane().setBackground(Color.blue);
getContentPane().setLayout(new BorderLayout(3,3));