Layout Examples

 

This page contains simple example applets that demonstrate Layout Managers.

Flow Layout

import java.applet.Applet;
import java.awt.*;
/* Class illustrates simple Flow Layout of three components.
Since Flow Layout is the default one for Applets (and Panels),
it does not have to be set explicitly here.  */
public class Flow1 extends Applet
{
  public void init()
  {
// if you wanted to explicitly set the Flow Layout Manager you would type
//  setLayout ( new FlowLayout() );  or... 
//  this.setLayout ( new FlowLayout() );
    Label label = new Label("Name:");       // create a Label
    add(label);                             // add it
    TextField tf = new TextField("Java");   // create a TextField
    add(tf);                                // add it
    Button b = new Button("OK");            // create a Button
    add(b);                                 // and add it  
  }
}

Example 1 - If the width of the html page is wide enough, these three components will flow from left to right in one row.  See it here.

Example 2 -  The html page is narrower than the first example.  See it here.

Example 3 - Even narrower.  See it here.

Example 4 - This flow example changes the default alignment used when adding the components.  It uses right alignment.

import java.applet.Applet;
import java.awt.*;
public class Flow2 extends Applet
{
  public void init()
  {
    setLayout(new FlowLayout(FlowLayout.RIGHT));
    for (int i = 0; i < 4; i++)
      add(new Button("Button #" + i));
  	
  }
}

Here is a html page with this applet.

And here is the same applet in a narrower page.


Grid Layout

import java.applet.Applet;
import java.awt.*;
public class Grid extends Applet
{
  public void init()
  {                           
    // we must explicitly set GridLayout as the manager
                       
    setLayout (new GridLayout(5, 3));    // 5 rows, 3 columns, no gaps
    for (int row = 0; row < 5; row ++)
    {
      add (new Label("Label " + row));
      add (new Button("Button " + row));
      add (new TextField("TextField " + row));
    }
  }
}

Example 1

Example 2 is a narrower page with the same applet.

Example 3 shows what it looks like if we ask for horizontal and vertical gaps betwwen components.


Border Layout

First example puts components at North, West, and East.

import java.applet.Applet;
import java.awt.*;
public class Border1 extends Applet
{
  public void init()
  {                                              
    setLayout (new BorderLayout());
    Label l = new Label("This is NORTH", Label.CENTER);
    l.setBackground(Color.yellow);
    Scrollbar sb1 = new Scrollbar();
    Scrollbar sb2 = new Scrollbar();
    
    add(l, BorderLayout.NORTH);
    add(sb1, BorderLayout.WEST);
    add(sb2, BorderLayout.EAST);
  }
}

See this one here.

Example 2 puts components South, West, and East

Example 3 puts components North, South, East, and West.

Example 4 is like example 3, except a blue panel is added to the Center region.


Card Layout

 

import java.awt.*;
import java.applet.Applet;
import java.awt.event.*;
/* This applet demonstrates using the CardLayout manager.
Pressing one of three buttons will cause a different "card" to be
displayed.
*/
public class Card1 extends Applet implements ActionListener
{
  Panel cardPanel;        // the container that will hold the various "cards"
  Panel firstP, secondP, thirdP;  // each of these panels will constitute the "cards"
  Panel buttonP;                  // panel to hold three buttons
  Button first, second, third;    // the three buttons
  CardLayout ourLayout;           // the card layout object
  
  public void init()
  {
    //create cardPanel which is the panel that will contain the three "cards"
    cardPanel = new Panel();
    //create the CardLayout object
    ourLayout = new CardLayout();    
    //set card Panel's layout to be our Card Layout
    cardPanel.setLayout (ourLayout);
    
    //create three dummy panels (the "cards") to show
    firstP = new Panel();
    firstP.setBackground(Color.blue);
    
    secondP = new Panel();
    secondP.setBackground(Color.yellow);
    
    thirdP = new Panel();
    thirdP.setBackground(Color.green);
    
    //create three buttons and add ActionListener
    first = new Button("First");
    first.addActionListener(this);
    
    second = new Button("Second");
    second.addActionListener(this);
    
    third = new Button("Third");
    third.addActionListener(this);
    
    //create Panel for the buttons and add the buttons to it
    buttonP = new Panel();   // Panel's default Layout manager is FlowLayout
    buttonP.add(first);
    buttonP.add(second);
    buttonP.add(third);
    
    //setLayout for applet to be BorderLayout
    this.setLayout(new BorderLayout());
    //button Panel goes South, card panels go Center
    this.add(buttonP, BorderLayout.SOUTH);
    this.add(cardPanel, BorderLayout.CENTER);
    
    // add the three card panels to the card panel container
    // method takes 1.) an Object (the card) 2.) an identifying String
    // first one added is the visible one when applet appears
    cardPanel.add(firstP, "First");     //blue
    cardPanel.add(secondP, "Second");   //yellow
    cardPanel.add(thirdP, "Third");     //green
    
  }
  
  //------------------------------------
  // respond to Button clicks by showing the so named Panel
  // note use of the CardLayout method show(Container, "identifying string")
  
  public void actionPerformed(ActionEvent e)
  {
    if (e.getSource() == first)
      ourLayout.show(cardPanel, "First");
      
    if (e.getSource() == second)
      ourLayout.show(cardPanel, "Second");
      
    if (e.getSource() == third)
      ourLayout.show(cardPanel, "Third");
  }
} // end class

See this applet here.

 


Mixed Layout

import java.awt.*;
import java.applet.Applet;
public class Mixed extends Applet
{
  /* This example demonstrates nesting of containers inside other containers.
  Each container can have its own Layout Manager. Thus, we can achieve finer
  degress of control over component placement.  The applet is the main container
  and will use a BorderLayout.  It will use three Panels at North, Center, and
  South.  The Center panel itself will contain 2 other panels inside of it.
  */
  
  /* Note how all components are declared as class instance variables. Each method
  in this class can have access to them.  Do not redeclare such a component inside
  of init().
  */
  	
  Panel nPanel, sPanel, cPanel, tcPanel, bcPanel;
  Button one, two, three, four, five, six;
  Label bottom, lbl1, lbl2, lbl3;
  
  public void init()
  {
    nPanel = new Panel();              // north panel will hold three button
    nPanel.setBackground(Color.blue);  // give it color so you can see it
    one    = new Button("One");
    two    = new Button("Two");
    three  = new Button("Three");
/* Here is a bad idea. If you declared here, inside of init,
   Button three = new Button ("Three"); the class instance Button three would be
   "lost". It would LOOK like you had a button three on the applet, but it would
   not generate any action events.
*/
    // setLayout for North Panel and add the buttons
    nPanel.setLayout (new FlowLayout(FlowLayout.CENTER));
    nPanel.add(one);
    nPanel.add(two);
    nPanel.add(three);
    
    sPanel = new Panel();       // south Panel will just hold one Label
    sPanel.setBackground(Color.yellow);  // give it color so you can see it
    bottom = new Label("This is South");
    //set Layout and add Label
    sPanel.setLayout (new FlowLayout(FlowLayout.CENTER));
    sPanel.add (bottom);
    
    cPanel  = new Panel();     // center panel holds two other panels
    tcPanel = new Panel();     // top panel on center panel holds three labels
    tcPanel.setBackground(Color.gray);  // give it color so you can see it
    bcPanel = new Panel();     // bottom panel on center panel hold three buttons
    bcPanel.setBackground(Color.green);  // give it color so you can see it
    
    lbl1 = new Label("One");   // the labels
    lbl2 = new Label("Two");
    lbl3 = new Label("Three");
    
    four = new Button("Four"); // the buttons
    five = new Button("Five");
    six = new Button("Six");
    
    //set Layout for top center Panel and add labels
    tcPanel.setLayout (new GridLayout(1, 3, 5, 5));  // 1 row, 3 columns, 5 pixel gap
    tcPanel.add(lbl1);
    tcPanel.add(lbl2);
    tcPanel.add(lbl3);
    
    //set Layout for bottom center panel and add buttons
    bcPanel.setLayout (new GridLayout(3, 1, 5, 5));  // 3 rows, 1 col, 5 pixel gap
    bcPanel.add(four);
    bcPanel.add(five);
    bcPanel.add(six);
    
    //add two center panels (top and bottom) to the center panel
    cPanel.setLayout(new GridLayout(2, 1));  // 2 rows, 1 col, no gaps
    cPanel.add(tcPanel);
    cPanel.add(bcPanel);
    
    //set Layout for the Applet itself and add the panels
    this.setLayout (new BorderLayout());
    add(nPanel, BorderLayout.NORTH);
    add(sPanel, BorderLayout.SOUTH);
    add(cPanel, BorderLayout.CENTER);
  }
}

And here is the applet itself