Computer Graphics

Lecture 8a - 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:  Declare a FlowLayoutmanager object:

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

1. 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.

2. 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.

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).

• You can flip through the cards in a specific order.

• 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

1. Define the cell coordinates for each component.

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

2. Create an object gridbag1 of the GridBagLayout class:

GridBagLayout gridbag1 = new GridBagLayout();

3. Install the GridBagLayout:

setLayout(gridbag1);

4. Create an object gbc1 of the GridbagConstraints class:

GridBagConstraints gbc1 = new GridBagConstraints();

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

Grridbag1.setConstraints(component1,gbc1);

7. 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