CS396N - Web Programming
Spring 2002
Chapter 12 - Layout Managers

Layout Managers


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.
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:
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 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
    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:
  • Syntax for adding a component:
  • 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).
    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.
      1. 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:
      1. GridBagLayout gridbag1 = new GridBagLayout();
    3. Install the GridBagLayout:
      1. setLayout(gridbag1);
    4. Create an object gbc1 of the GridbagConstraints class:
      1. 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:
      1. Grridbag1.setConstraints(component1,gbc1);
    7. Finally add the component:
      1. 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