L5

CS396N - Web Programming

Spring 2002

Chapter 12 - Layout Managers

Layout Managers

Layout managers are used to place components in a container in an orderly manner.
The AWT package provides five classes, which are used to create layout managers.

FlowLayout
GridLayout
BorderLayout
CardLayout
GridBagLayout

The following steps are taken to create a layout manager:

Step 1: First declare an object (layout_manager object) of one of the classes listed above.

Step 2: Initialize the layout_manager object using new.

Step 3: Install the layout_manager object, using the setLayout() method of the Container

class:

setLayout(layout_manager object);

Any components added subsequently will be arranged according to the description of the layout_manager object.

The FlowLayout class

A FlowLayout manager arranges components in a left-to-right flow.
Fields

Field	Type	Description
*CENTER (1)*	public final static int	Centers each row of components.
*LEFT (0)*	public final static int	Left justifies each row of components.
*RIGHT (2)*	public final static int	Right justifies each row of components.

Steps in defining a FlowLayout manager

Step 1:

FlowLayoutmanager

FlowLayoutmanager flowlayout_object;

Step 2: Initialize the flowlayout_object using new and a constructor:

Constructor	Arguments	Description
*FlowLayout()*	None	Creates a new flow layout manager with centered alignment and a default 5-pixel horizontal and vertical gap.
*FlowLayout(align)*	align - int	Creates a new flow layout manager with indicated alignment and a default 5-pixel horizontal and vertical gap.
*FlowLayout(align,hgap,vgap)*	align - int hgap - int vgap - int	Creates a flow layout manager with the indicated alignment and the indicated horizontal and vertical gaps (in pixels).

Step 3: Install the flowlayout_object using the add() method:

setLayout(flowlayout_object);

Note
1. For applets FlowLayout is the default layout manager (centered).
2. The FlowLayout manager keeps buttons in their natural size.
3. In specifying the alignment, you can either use the actual number (0,1 or 2) or the name of the static fields.

Example

import java.applet.Applet;
import java.awt.*;

public class FlowTest extends Applet {
public void init() {
    for(int i=1; i<6; i++) {
      add(new Button("Button " + i));
    }
}
}

GridLayout manager

Commonly used layout manager

Causes the container components to be laid out in a rectangular grid (along rows and columns)

The container is divided into equal sized cells: one component into each cell.

Steps in defining a GridLayout manager:

Step 1: Declare a GridLayout object:
GridLayout gridlayout_object;
Step 2: Initialize gridlayout_object using new and a constructor:

Constructor	Arguments	Description
*GridLayout(rows,cols)*	rows - int cols - int	Creates a grid layout with the specified number of rows and columns.
GridLayout(rows,cols,hgap,vgap)	rows - int cols - int hgap - int vgap - int	Creates a grid layout with specified number of rows and columns, and with specified gaps (in pixels).

Step 3: Install the gridlayout_object using the add() method: setLayout(flowlayout_object); Note

If there are more components than the number of grids defined, the GridLayout manager

keeps the specified number of rows, but increases the number of columns to accommodate all components.

If there are more grids than the number of components, the GridLayout manager keeps the specified number of rows, but reduces the number of columns to accommodate the specified number of components

Example

import java.applet.Applet;
import java.awt.*;

public class GridTest extends Applet {
public void init() {
    setLayout(new GridLayout(2,3)); // 2 rows, 3 cols
    add(new Button("Button One"));
    add(new Button("Button Two"));
    add(new Button("Button Three"));
    add(new Button("Button Four"));
    add(new Button("Button Five"));
    add(new Button("Button Six"));
}
}

The BorderLayout Class

The BorderLayout manager divides the container into five partitions: North, South, East, West and Center.

Field name	Type	Description
*North*	public static final String	North partition
*South*	public static final String	South partition
*East*	public static final String	East partition
*West*	public static final String	West partition
*Center*	public static final String	Center partition

Steps in defining a BorderLayout manager:

Step 1: Declare a BorderLayout object:

BorderLayout borderlayout_object;

Step 2: Initialize the borderlayout_object using new and a constructor:

Constructor	Arguments	Description
*BorderLayout()*	None	Creates a border layout
*BorderLayout(hgap,vgap)*	hgap - int vgap - int	Creates a border layout with specified horizontal and vertical gaps (in pixels).

Step 3: Install the gridlayout_object using the add() method:
setLayout(flowlayout_object);

Syntax for adding a component:

add("partition",component_object);
Where partition is one of North, South, East, West, or Center.

component_object is the component being added.

Example

import java.applet.Applet;
import java.awt.*;

public class BorderTest extends Applet {
public void init() {
    setLayout(new BorderLayout());
    add(new Button("Button 1"), BorderLayout.NORTH);
    add(new Button("Button 2"), BorderLayout.SOUTH);
    add(new Button("Button 3"), BorderLayout.EAST);
    add(new Button("Button 4"), BorderLayout.WEST);
    add(new Button("Button 5"), BorderLayout.CENTER);
}
}

The CardLayout Class

A cardLayout manager arranges components on several cards.
Points to note:

Each card holds only one component.
Only one card is visible at a time.
Each card will have a name associated with it.
You can see any card you want – using the name of the card.
You can flip through the cards in a specific order.

Constructor	Arguments	Description
*CardLayout()*	None	Creates a new card layout
*CardLayout(hgap,vgap)*	hgap – int vgap – int	Creates a new card layout with the specified horizontal and vertical gaps (in pixels).

Syntax for adding a component:

add("name", component_object)

Where, name (String) is the "name of card" being added.
component_object is the component object being added.

Method	Arguments	Description
*first(parent)*	parent - container use this if applet is the container	Shows the first card
*last(parent)*	parent - container use this if applet is the container	Shows the last card
*next(parent)*	parent - container use this if applet is the container	Shows the next card
*previous(parent)*	parent - container use this if applet is the container	Shows the previous card
*show(parent,name)*	name (String) - name of the card. parent - container use this if applet is the container	Shows the card with specified name.

Example 1

//The following program creates 10 buttons and arranges them using
//CardLayout manager. Each time you click, the next card will be
//displayed.

import java.awt.*;
import java.applet.*;
import java.awt.event.*;
public class Layout5 extends Applet implements ActionListener{
   Button b1,b2,b3,b4,b5,b6,b7,b8,b9,b10;
   CardLayout clom;
   public void init(){
   b1 = new Button("What is CGI?");
   b2 = new Button("Common Gateway Interface");
   b3 = new Button("What is FTP?");
   b4 = new Button("File Transfer Protocol");
   b5 = new Button("What is HTML?");
   b6 = new Button("HyperText mark-up Language");
   b7 = new Button("What is URL?");
   b8 = new Button("Uniform Resource Locator");
   b9 = new Button("What is VRML?");
   b10 = new Button("Virtual Reality Modeling Language");
   b1.addActionListener(this);
   b2.addActionListener(this);
   b3.addActionListener(this);
   b4.addActionListener(this);
   b5.addActionListener(this);
   b6.addActionListener(this);
   b7.addActionListener(this);
   b8.addActionListener(this);
   b9.addActionListener(this);
   b10.addActionListener(this);
   clom = new CardLayout();
   setLayout(clom);
   add("1",b1);
   add("2",b2);
   add("3",b3);
   add("4",b4);
   add("5",b5);
   add("6",b6);
   add("7",b7);
   add("8",b8);
   add("9",b9);
   add("10",b10);
}

public void actionPerformed(ActionEvent event){
clom.next(this);
}

}

Example 2

import java.awt.*;
import java.applet.*;
import java.awt.event.*;

public class Layout6 extends Applet implements ActionListener{
        Button first,last,next,previous;
        Button b1,b2,b3,b4,b5,b6,b7,b8,b9,b10;
        CardLayout cards;
        Panel panel1,panel2;
        public void init(){
             first = new Button("first");
             last = new Button("last");
             next = new Button("next");
             previous = new Button("previous");
             b1 = new Button("What is CGI?");
             b2 = new Button("Common Gateway Interface");
             b3 = new Button("What is FTP?");
             b4 = new Button("File Transfer Protocol");
             b5 = new Button("What is HTML?");
             b6 = new Button("HyperText mark-up Language");
             b7 = new Button("What is URL?");
             b8 = new Button("Uniform Resource Locator");
             b9 = new Button("What is VRML?");
             b10 = new Button("Virtual Reality Modeling Language");
             first.addActionListener(this);
             last.addActionListener(this);
             next.addActionListener(this);
             previous.addActionListener(this);
             panel1 = new Panel();
             panel2 = new Panel();
             cards = new CardLayout();
             panel1.setLayout(cards);
             panel2.setLayout(new GridLayout(1,4,20,20));
             panel1.add("1",b1);
             panel1.add("2",b2);
             panel1.add("3",b3);
             panel1.add("4",b4);
             panel1.add("5",b5);
             panel1.add("6",b6);
             panel1.add("7",b7);
             panel1.add("8",b8);
             panel1.add("9",b9);
             panel1.add("10",b10);
             panel2.add(first);
             panel2.add(last);
             panel2.add(next);
             panel2.add(previous);
             add(panel1);
             add(panel2);

}

public void actionPerformed(ActionEvent event){

if event.getActionCommand().equals("first"))
cards.first(panel1);

if (event.getActionCommand().equals("last"))
cards.last(panel1);

if (event.getActionCommand().equals("next"))
cards.next(panel1);

if (event.getActionCommand().equals("previous"))
cards.previous(panel1);

}
}

The GridBagLayout

GridbagLayout manager is a flexible layout manager that aligns components in a rectangular grid
GridBagLayout associates components with special characteristics (such as the size, horizontal and vertical gaps etc.).
GridBagConstraints class associates special characteristics to a component.

The GridBagConstraints class

GridBagConstraints class specifies constraints for components that are laid out using the GridBagLayout class.
GridBagLayout manager arranges components in a rectangular area made up of rectangular cells.
Cells are associated with coordinates.

Coordinates of a cell at row I, and column J are (I,J).
Top left corner cell has coordinates (0,0).

Field name

Type

Description

anchor

int

Appropriate value is assigned to this field to specify the component's alignment in the display area.

Valid values are:

GridBagConstraints.CENTER (10)

GridBagConstraints.NORTH (11)

GridBagConstraints.NORTHEAST(12)

GridBagConstraints.EAST(13)

GridBagConstraints.SOUTHEAST(14)

GridBagConstraints.SOUTH(15)

GridBagConstraints.SOUTHWEST(16)

GridBagConstraints.WEST(17)

GridBagConstraints.NORTHWEST(18)

Note
Use the symbolic names or the number.

Default is GridBagConstraints.CENTER.

fill

int

Specifies if the component has to be padded in horizontal or vertical directions to fit the space.

GridBagConstraints.NONE

GridBagContraints.BOTH

GridBagConstraints.HORIZONTAL

GridbagConstraints.VERTICAL

Default is GridBagConstraints.NONE.

Gridheightgridwidth

int

This field specifies the number of columns the component should occupy.

Note

The value GridBagConstraints.REMAINDER indicates that the component being added is the last component in that row. This has two consequences: (a) the component occupies the rest of the area in that row and (b) the next component goes in the next row.

The value GridConstraints.RELATIVE indicates that the component being added is the last but one component in that row.

The default is 1 – meaning one grid.

gridx

int

Specifies the x coordinate (column number) of the cell the component is to occupy.

Note

The value GridConstraints.RELATIVE implies that the component is to be added to the right of the component added previously to that container. This is the default value.

gridy

int

Specifies the y coordinate (row number) of the cell the component is to occupy.

Note:

The value GridConstraints.RELATIVE implies that the component is to be added below the component previously added to that container. This is the default value.

Example:six buttons and two text fields

Button 1	Button 2		Button 3
First text field			Button 4
Button 5		Button 6
Second text field

Define the cell coordinates for each component.

Button1 is in (0,0), Button2 is in (1,0), …., First text field is in (0,1), ….

Create an object gridbag1 of the GridBagLayout class:

GridBagLayout gridbag1 = new GridBagLayout();

Install the GridBagLayout:

setLayout(gridbag1);

Create an object gbc1 of the GridbagConstraints class:

GridBagConstraints gbc1 = new GridBagConstraints();

Define desired values for the fields of the object created.
Associate the GridBagConstraints object with the component component1 which is to have the characteristics defined in the GridBagConstraints object:

Grridbag1.setConstraints(component1,gbc1);

Finally add the component:

add(component1);

Example

Program creates six buttons, and two text boxes.
Constraints are defined for the eight buttons:

Component	Constraints	Meaning
Button b1	fill = BOTH	Pads areas both horizontally and vertically
Button b2	fill = BOTH	Pads areas both horizontally and vertically
Button b3	fill = BOTH gridwidth = 2	Pads areas both horizontally and vertically Last component in the row
TextField t1	fill = BOTH gridwidth = REMAINDER	Pads areas both horizontally and vertically Occupies two horizontal cells
Button b4	fill = BOTH gridwidth = 1	Pads areas both horizontally and vertically Last component in the row
Button b5	fill = BOTH gridwidth = REMAINDER	Pads areas both horizontally and vertically Occupies one cell
Button b6	fill = BOTH	Pads areas both horizontally and vertically Last component in the row
Textfield t2		Pads areas both horizontally and vertically

import java.awt.*;
import java.applet.*;

public class Layout7 extends Applet{

GridBagLayout gridbag1 = new GridBagLayout();
GridBagConstraints gbc1 = new GridBagConstraints();

             Button b1 = new Button("one");
             Button b2 = new Button("two");
             Button b3 = new Button("three");
             Button b4 = new Button("four");
             Button b5 = new Button("five");
             Button b6 = new Button("six");

TextField t1 = new TextField("New York");
TextField t2 = new TextField("Westchester");

public void init(){
setLayout(gridbag1);

                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(b1,gbc1);
                add(b1);

                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(b2,gbc1);
                add(b2);

                gbc1.gridwidth = GridBagConstraints.REMAINDER;
                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(b3,gbc1);
                add(b3);

                gbc1.gridwidth = GridBagConstraints.REMAINDER;
                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(t1,gbc1);
                add(t1);

                gbc1.gridwidth = GridBagConstraints.REMAINDER;
                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(b4,gbc1);
                add(b4);

                gbc1.gridwidth = GridBagConstraints.REMAINDER;
                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(b5,gbc1);
                add(b5);

                gbc1.gridwidth = GridBagConstraints.REMAINDER;
                gbc1.fill = GridBagConstraints.BOTH;
                gridbag1.setConstraints(b6,gbc1);
                add(b6);

                add(t2);
             }
   }

Turning Off the Layout Manager

import java.applet.Applet;
import java.awt.*;

public class NullTest extends Applet {
public void init() {
    setLayout(null);
    Button b1 = new Button("Button 1");
    Button b2 = new Button("Button 2");
    Button b3 = new Button("Button 3");
    Button b4 = new Button("Button 4");
    Button b5 = new Button("Button 5");
    b1.setBounds(0, 0, 150, 50);
    b2.setBounds(150, 0, 75, 50);
    b3.setBounds(225, 0, 75, 50);
    b4.setBounds(25, 60, 100, 40);
    b5.setBounds(175, 60, 100, 40);
    add(b1);
    add(b2);
    add(b3);
    add(b4);
    add(b5);
}
}

Effective Use of Layout Managers

Use Nested Containers
Turn off the layout manager for some containers
Use a custom layout manager
Adjust the empty space around components