6.02 - Component Layouts


Layout Policies

If we want to position textboxes, buttons and checkboxes on a window like in Figure 6.1, “Example GUI: Font Dialog”, we need a way to organize these components in the window. A layout policy allows us a way to describe the order that we want to display these components, allowing a structure for placing these components on the application. In the last example we used a FlowLayout, as it is a very easy layout manager, that just adds the components to the application in the order in which you use the add() method.

It is possible to change the layout of the components using a layout manager, the most common layouts are:

  • FlowLayout

  • GridLayout

  • BorderLayout

FlowLayout (java.awt.FlowLayout)

FlowLayout arranges components left-to-right top-to-bottom, much like the "centred text" button in Microsoft Word for Windows, where each line is filled and centered until the line is full. In a flow layout form each component takes its preferred size.

Figure 6.9. A Flow Layout Example


123456789101112131415161718192021222324252627282930
package ee402;

import java.awt.*;

@SuppressWarnings("serial")
public class FlowLayoutApp extends Frame {

        public FlowLayoutApp() {
                super("FlowLayout");
                this.setLayout(new FlowLayout());
                
                 Button button1 = new Button("Button 1");
                 Button button2 = new Button("Button 2");
                 Button button3 = new Button("Button 3");
                 Button button4 = new Button("Button 4");
                 Button button5 = new Button("Button 5");
                 add(button1);
                 add(button2);
                 add(button3);
                 add(button4);
                 add(button5);
                
                this.pack();
                this.setVisible(true);
        }

        public static void main(String[] args) {
                new FlowLayoutApp();
        }
}

GridLayout (java.awt.GridLayout)

GridLayout lays out the components in a rectangular grid. The container that you apply the layout to, divides the area into equal sized squares and each component that you add is sized to fit that square. If you look at Figure 6.10, “A Grid Layout Example” you will notice that the buttons have been scaled larger to fit the grid area exactly in (a). This can be difficult to get used to as when you scale the window as in (b) the buttons will resize to fill the space.

You must specify the number of rows and columns in the grid. So to construct a 3x2 grid as in Figure 9.10, “A Grid Layout Example” I used new GridLayout(0,2) to construct the nx2 GridLayout object. If you place a 0 for either the row or the column value to the constructor then you will have unlimited rows or columns. For example, new GridLayout(0,2) will construct a GridLayout object with 2 columns, but an unlimited number of rows.

The order that you use the add() method is still important as it adds the components to the grid from left-to-right top-to-bottom.

Figure 6.10. A Grid Layout Example

   
(a) preferred size (b) dragged and scaled


123456789101112131415161718192021222324252627282930
package ee402;

import java.awt.*;

@SuppressWarnings("serial")
public class GridLayoutApp extends Frame {

        public GridLayoutApp() {
                 super("GridLayout");
                 this.setLayout(new GridLayout(0,2));
                
                 Button button1 = new Button("Button 1");
                 Button button2 = new Button("Button 2");
                 Button button3 = new Button("Button 3");
                 Button button4 = new Button("Button 4");
                 Button button5 = new Button("Button 5");
                 add(button1);
                 add(button2);
                 add(button3);
                 add(button4);
                 add(button5);
                
                this.pack();
                this.setVisible(true);
        }

        public static void main(String[] args) {
                new GridLayoutApp();
        }
}

BorderLayout (java.awt.BorderLayout)

BorderLayout arranges a container into five regions, North, South, East, West and Center. Each region can have either one or zero components. If you do not place a component in the region then it will not be displayed. When we are adding components to a container we could write something like:

 Button testButton = new Button("Test Button");
 this.add("North", testButton);
 
 //or using add in another way
 
 Button testButton = new Button("Test Button");
 this.add(testButton, BorderLayout.NORTH);
 

When you add a component to the BorderLayout the components are added according to the components preferred size and the BorderLayout's preferred size. For Example as in Figure 6.11, “A Border Layout Application”, a button added to the North will have the preferred height of the Button object, but it will have the preferred width of the BorderLayout container area. If you look at Figure 6.11, “A Border Layout Application” you will also notice that the "Button 3" object has its preferred width (in both (a) and (b)) of the Button object, but it has the preferred height of the "West" region of the BorderLayout container area.

Figure 6.11. A Border Layout Application

  
(a) The preferred Application Size (b) When the Application is Scaled


BorderLayoutApp.java

123456789101112131415161718192021222324252627282930
package ee402;

import java.awt.*;

@SuppressWarnings("serial")
public class BorderLayoutApp extends Frame {

        public BorderLayoutApp() {
                 super("BorderLayout");
                 //this.setLayout(new BorderLayout()); default layout for a Frame
                
                 Button button1 = new Button("Button 1");
                 Button button2 = new Button("Button 2");
                 Button button3 = new Button("Button 3");
                 Button button4 = new Button("Button 4");
                 Button button5 = new Button("Button 5");
                 add(button1, BorderLayout.NORTH);
                 add(button2, BorderLayout.SOUTH);
                 add(button3, BorderLayout.EAST);
                 add(button4, BorderLayout.WEST);
                 add(button5, BorderLayout.CENTER);
                
                this.pack();
                this.setVisible(true);
        }

        public static void main(String[] args) {
                new BorderLayoutApp();
        }
}

There is one other Layout Manager that is commonly used - the GridBagLayout. It allows components to be aligned vertically and horizontally without requiring the components to be the same size. You can see more information on this Layout Manager in the Java API documentation under java.awt.GridBagLayout.

The Panel Container (java.awt.Panel)

Panel is the simplest form of container. A container is a component that can contain further components, or even other panels. The default layout for a Panel is the FlowLayout. Using Panel components allows us to develop quite advanced layouts as we can embed layouts within layouts. You can create a Panel object using:

	Panel p = new Panel();		//for a simple panel
	
	//or
	
	Panel P = new Panel(new BorderLayout()); //change the layout

These notes are copyright Dr. Derek Molloy, School of Electronic Engineering, Dublin City University, Ireland 2013-present. Please contact him directly before reproducing any of the content in any way.
ċ
BorderLayoutApp.java
(1k)
Derek Molloy,
12 Nov 2013, 04:21
ċ
FlowLayoutApp.java
(1k)
Derek Molloy,
12 Nov 2013, 04:21
ċ
GridLayoutApp.java
(1k)
Derek Molloy,
12 Nov 2013, 04:21
Comments