Basic Layout Managers

A Container is an area where Components can be placed. Each Container has a layout manager associated with it. The layout manager provides basic capabilities that are easier to us than determining the exact position and size of every Component.

Each Container can have only one layout at any given time. Different containers in the same program can have different layouts.

All applets use the Panel container. A Panel provides space into which an applet can place any component, including other panels.

To place a component onto a panel we must add() the component to the Panel's layout manager.

The form that the add() method takes is different for various layout managers.

To get the width and height of any component use the size() method. The size() method returns an instance of the Dimension class.

For example:

JButton    button = new JButton("demo"); 
Dimension d      = button.getSize(); 
int       width  = d. width,
          height = d. height;

The basic layout managers are:

FlowLayout
BorderLayout
GridLayout

1. FlowLayout

This is the default layout for applets. Components are added from left to right in the order in which they are added to the container. When the side of a container is reached the next component is added at the start of the next row in the container.

To create a FlowLayout use:

FlowLayout()
FlowLayout(int alignment)    // FlowLayout.LEFT, FlowLayout.Right or FlowLayout. Center 
FlowLayout(int alignment, int horizontalGapInPixels, int verticalGapInPixels)

FlowLayout Example: (Run Applet)

import javax.swing.*;

public class FlowLayoutDemo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();

            final JButton button1 = new JButton("button one");
            final JButton button2 = new JButton("button two");
            final JLabel message = new JLabel("message");

            this.add(button1);
            this.add(message);
            this.add(button2);
        }
    }
}

2. BorderLayout

Border layouts allow for up to five components to be added at positions identified by : "Center", "North", "South", "East" and "West".

Components placed at "North", "South", "East" and "West" will always position themselves at tight as they can to their respective edges. Components placed at the "Center" will always expand to fill as much space as posible.

To create a BorderLayout use:

BorderLayout()
BorderLayout(int horizontalGapInPixels, int verticalGapInPixels)

BorderLayout Example: (Run Applet)

import java.awt.*;
import javax.swing.*;

public class BorderLayoutDemo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();

            final JButton center = new JButton("Center");
            final JButton north = new JButton("North");
            final JButton south = new JButton("South");
            final JButton east = new JButton("East");
            final JButton west = new JButton("West");

            setLayout(new BorderLayout());

            add("Center", center);
            add("North", north);
            add("South", south);
            add("East", east);
            add("West", west);
        }
    }
}

3. GridLayout

The GridLayout divides the container into a grid of rows and columns where all rows are of uniform size and all columns are of uniform size.

To create a GridLayout use:

GridLayout(int rows, int columns)
GridLayout(int rows, int columns, int horizontalGapInPixels, int verticalGapInPixels)

GridLayout Example: (Run Applet)

import java.awt.*;
import javax.swing.*;

public class GridLayoutDemo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();

            final Button button00 = new Button("position 0,0");
            final Button button01 = new Button("position 0,1");
            final Button button02 = new Button("position 0,2");
            final Button button10 = new Button("position 1,0");
            final Button button11 = new Button("position 1,1");
            final Button button12 = new Button("position 1,2");

            this.setLayout(new GridLayout(3, 2));

            this.add(button00);
            this.add(button01);
            this.add(button02);
            this.add(button10);
            this.add(button11);
            this.add(button12);
        }
    }
}