Computer Graphics

Lecture 8a - Layout Managers

Layout Managers


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


The FlowLayout class

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.


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


keeps the specified number of rows, but increases the number of columns to accommodate all 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

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


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

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

add("name", component_object)

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

The GridBagConstraints class

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

  1. Create an object gridbag1 of the GridBagLayout class:

GridBagLayout gridbag1 = new GridBagLayout();

  1. Install the GridBagLayout:

setLayout(gridbag1);

  1. Create an object gbc1 of the GridbagConstraints class:

GridBagConstraints gbc1 = new GridBagConstraints();

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

Grridbag1.setConstraints(component1,gbc1);

  1. Finally add the component:

add(component1);

 

Example

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