16. Graphical User Interfaces

16.7. Containers and Layout Managers

A Container is a component that can contain other components. Be- cause containers can contain other containers, it is possible to create a hierarchical arrangement of components, as we did in the second ver- sion of our Converter interface. In its present form, the hierarchy for Converter consists of a JFrame as the top-level container (Fig. 13.14). Contained within the frame is a KeyPad (subclass of JPanel), which con- tains 12 JButtons. Most GUIs will have a similar kind of containment hierarchy.

 

 

 

Figure 13.20: A Container con- tains Components.

 

,,

import j avax . swing . ;// P a c k a g e s u s e d

import j ava . awt . ;

import j ava . awt . event . ;

public c l a s s Converter extends JFrame// V e r s i o n 2

implements Action Listener , KeyPadClient {

private JLabel prompt = new JLabel ( Distance in miles : ) ;

private J T e x t F i e l d input = new J T e x t F i e l d ( 6 ) ;

private JText Area display = new JText Area ( 1 0 , 2 0 ) ; private JButton convert = new JButton ( Convert ! ) ; private KeyPad keypad = new KeyPad ( t h i s ) ;

 

public Converter ( )

get Content Pane ( ) . set Layout ( new FlowLayout ( ) ) ; get Content Pane ( ) . add ( prompt ) ;

get Content Pane ( ) . add ( input ) ;

get Content Pane ( ) . add ( convert ) ; get Content Pane ( ) . add ( display ) ; get Content Pane ( ) . add ( keypad ) ; display . setLineWrap ( t rue ) ;

display . s e t E d i t a b l e ( fa l s e ) ;

convert . add Action Listener ( t h i s ) ; input . add Action Listener ( t h i s ) ;

} // C o n v e r t e r ( )

public void action Performed ( ActionEvent e )

double miles =

Double . valueOf ( input . get Text ( ) ) . doubleValue ( ) ;

double km = Metric Converter . milesToKm ( miles ) ; display . append ( miles + miles equals +

km + kilometers n” ) ; input . s e t T e xt ( ”” ) ;

} // a c t i o n P e r f o r m e d ( )

public void keypress Callback ( S t r i n g s )

i f ( s . equals ( ”C” ) )

input . s e t T e xt ( ”” ) ;

e ls e

input . s e t T e xt ( input . get Text ( ) + s ) ;

}

public s t a t i c void main ( S t r i n g args [ ] ) Converter f = new Converter ( ) ;

f . s e t S i z e ( 4 0 0 , 3 0 0 ) ; f . s e t V i s i b l e ( t rue ) ;

f . addWindowListener ( new WindowAdapter ( )

public void windowClosing ( WindowEvent e ) System . e x i t ( 0 ) ;// Q u i t t h e a p p l i c a t i o n

}

} ) ;

} // m a i n ( )

// C o n v e r t e r

\J

Figure 13.18: The second version of the Converter class, which imple- ments the GUI shown in Figure 13.19.

 

A Container is a relatively simple object whose main task is primarily to hold its components in a particular order. It has methods to add and remove components (Fig. 13.20). As you can see from these methods, a container keeps track of the order of its elements, and it is possible to refer to a component by its index order.

Layout Managers

The hard work of organizing and managing the elements within a con- tainer is the task of the layout manager. Among other tasks, the layout manager determines

The overall size of the container.

The size of each element in the container.

The spacing between elements.

The positioning of the elements.

Although it is possible to manage your own layouts, it is not easy to do. For most applications you are much better off by learning to use one of the AWT’s built-in layouts. Table 13.3 gives a brief summary of the available layouts. We will show examples of FlowLayout, GridLayout, and BorderLayout. Some of the widely used Swing containers have a default layout manager assigned to them (Table 13.4).

To override the default layout for any of the JApplet, JDialog, JFrame, and JWindow containers, you must remember to use the getContentPane(). The correct statement is

,,

 

J

 

The GridLayout Manager

It is simple to remedy the layout problem that affected the keypad in the most recent version of the Converter program. The problem

 

TABLE 13.3 Some of Java’s AWT and Swing layout managers.

ManagerDescription

java.awt.BorderLayoutArranges elements along the north, south, east, west,

and in the center of the container.

java.swing.BoxLayoutArranges elements in a single row or single column. java.awt.CardLayoutArranges elements like a stack of cards, with one visible at a time. java.awt.FlowLayoutArranges elements left to right across the container. java.awt.GridBagLayoutArranges elements in a grid of variably sized cells (complicated). java.awt.GridLayoutArranges elements into a two-dimensional grid of equally sized cells. java.swing.OverlayLayout Arranges elements on top of each other.

 

TABLE 13.4 Default layouts for some of the common Swing containers.

Container Layout Manager

JApplet BorderLayout (on its content pane)

JBox BoxLayout

JDialog BorderLayout (on its content pane) JFrame BorderLayout (on its content pane) JPanel FlowLayout

JWindow BorderLayout (on its content pane)

 

was caused by the fact that as a subclass of JPanel, the KeyPad uses a default FlowLayout, which causes its buttons to be arranged in a row. A more appropriate layout for a numeric keypad would be a two- dimensional grid, which is exactly the kind of layout supplied by the java.awt.GridLayout. Therefore, to fix this problem, we need only set the keypad’s layout to a GridLayout. This takes a single statement, which should be added to the beginning of the KeyPad() constructor:

,

 

This statement creates a GridLayout object and assigns it as the layout manager for the keypad. It will ensure that the keypad will have four rows and three columns of buttons (Fig. 13.21). The last two arguments in the constructor affect the relative spacing between the rows and the columns. The higher the number, the larger the spacing. As components are added to the keypad, they will automatically be arranged by the manager into a

4 3 grid.

Note that for a JPanel, the setLayout() method applies to the panel

itself. Unlike the top-level containers, such as JFrame, other containers

 

don’t have content panes. The same point would apply when adding components to a JPanel: They are added directly to the panel, not to a content pane. Confusion over this point could be the source of bugs in your programs.

 

 

JAVA DEBUGGING TIP

Content Pane. Top-level containers, such as

JFrame, are the only ones that use a content pane. For other containers, such as JPanel, components are added directly to the container itself.

 

As its name suggests, the GridLayout layout manager arranges com- ponents in a two-dimensional grid. When components are added to the container, the layout manager starts inserting elements into the grid at the first cell in the first row and continues left to right across row 1, then row 2, and so on. If there are not enough components to fill all cells of the grid, the remaining cells are left blank. If an attempt is made to add too many components to the grid, the layout manager will try to extend the grid in some reasonable way in order to accommodate the components. How-


Figure 13.21: This version of the metric converter GUI uses a key- pad for mouse-based input. It has an attractive overall layout.

 

ever, despite its effort in such cases, it usually fails to achieve a completely appropriate layout.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

North

 

 

 

WestCenterEast

 

 

 

South

 

 

Figure 13.22: Arrangement of components in a border layout. The relative size of the areas will vary.


GUI Design Critique

Although the layout in Figure 13.21 is much improved, there are still some deficiencies. One problem is that the convert button seems to be mis- placed. It would seem to make more sense if it were grouped with the keypad rather than with the input text field.

A more serious problem results from the fact that we are still using a FlowLayout for the program’s main window, the JFrame. Among all of Java’s layouts, FlowLayout gives you the least amount of control over the arrangement of the components. Also, FlowLayout is most sensitive to changes in the size and shape of its container.

The BorderLayout Manager

One way to fix these problems is to use a BorderLayout to divide the frame into five areas: north, south, east, west, and center, as shown in Figure 13.22. The BorderLayout class contains two constructors:

,,

 

J

The two parameters in the second version of the constructor allow you to insert spacing between the areas.

Components are added to a BorderLayout by using the add(Compo- nent, String) method found in the Container class. For example, to set the application window to a border layout and to add the keypad to its east area, we would use the following statements:

,,

 

 

 

 

 

 

Containment hierarchy


J

In this version of the add() method, the second parameter must be a cap- italized String with one of the names, “North,” “South,” “East,” “West,” or “Center.” The order in which components are added does not matter.

One limitation of the BorderLayout is that only one component can be added to each area. That means that if you want to add several compo- nents to an area, you must first enclose them within a JPanel and then

 

add the entire panel to the area. For example, let’s create a panel to contain the prompt and the text field and place it at the north edge of the frame:

,,

 

 

 

J

The same point would apply if we want to group the keypad with the convert button and place them at the east edge. There are several ways these elements could be grouped. In this example, we give the panel a border layout and put the keypad in the center and the convert button at the south edge:

,,

 

 

 

J

Given these details about the BorderLayout, a more appropriate de- sign for the converter application is shown in Figure 13.23. Notice that the border layout for the top-level JFrame uses only the center, north, and east areas. Similarly, the border layout for the control panel uses just the center and south areas.

 

 

 

 

Input


 

JLabel


 

JTextField


 

KeyPad JPanel

 

 

Containment Hierarchy JFrame(Border)

Input JPanel(Flow)

Prompt JLabel Input JTextField

Control JPanel(Border) KeyPad JPanel(Grid)

12 Button

Convert JButton Display JTextArea


Figure 13.23: A border layout de- sign for the metric converter pro- gram. The dotted lines show the panels.

 

 

 

JFrame


Control panel


JButtons

 

 

 

 

In a BorderLayout, when one (or more) border area is not used, then one or more of the other areas will be extended to fill the unused area. For example, if West is not used, then North, South, and Center will extend to the left edge of the Container. If North is not used, then West, East, and Center will extend to the top edge. This is true for all areas except Center. If Center is unused, it is left blank.

 

 

 

 

Figure 13.24: The metric con- verter, showing its appearance when a border design is used.


Figure 13.24 shows the results we get when we incorporate these changes into the program. The only changes to the program itself occur in the constructor method, which in its revised form is defined as follows:

,,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Problem statement


J

This layout divides the interface into three main panels, an input panel, display panel, and control panel, and gives each panel its own layout. In addition, the control panel contains the keypad panel. Thus, the contain- ment hierarchy for this design is much more complex than in our original design.

 

SELF-STUDY EXERCISES

EXERCISE 13.6 The border layout for the top window uses the north, center, and east regions. What other combinations of areas might be used for these three components?

EXERCISE 13.7 Why wouldn’t a flow layout be appropriate for the control panel?