CS 4773 Object Oriented Systems
Layouts

The examples L1.java through L4.java are available in /usr/local/courses/cs4773/spring99/examples/set3

Previous Topic: Applets

Layout Managers
BorderLayout
Nested Layouts
GridLayout
GridLayout with an Array of Buttons
FlowLayout
CardLayout
GridBagLayout

Next Topic: Threads

Layout Managers

How to place buttons and other widgets.

The following are the basic layout managers:

BorderLayout

BorderLayout allows you to place things around the border:

Here is an example applet:


/* < applet code = "L1" WIDTH = 300 HEIGHT = 200 >
   < /applet >
*/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class L1 extends Applet implements ActionListener {

   Button N = new Button("NORTH");
   Button S = new Button("SOUTH");
   Button E = new Button("EAST");
   Button W = new Button("WEST");
   Button C = new Button("CENTER");

   public void init() {
      setup_layout();
   }

   private void setup_layout() {
      setLayout(new BorderLayout());
      setBackground(Color.red);
      setForeground(Color.white);

      add("North", N);
      add("South", S);
      add("Center", C);
      add("West", W);
      add("East", E);

      N.addActionListener(this);
      S.addActionListener(this);
      E.addActionListener(this);
      W.addActionListener(this);
      C.addActionListener(this);
   }

   public void actionPerformed(ActionEvent e) {
      if (e.getSource() == N) {
         showStatus("North button pushed");
      }
      else if (e.getSource() == S) {
         showStatus("South button pushed");
      }
      else if (e.getSource() == E) {
         showStatus("East button pushed");
      }
      else if (e.getSource() == W) {
         showStatus("West button pushed");
      }
      else if (e.getSource() == C) {
         showStatus("Center button pushed");
      }
    
   }
}

Click Here to run this applet.

Both Netscape and Internet Explorer fail to have the button inherit the background color of the parent panel, although it works in the appletviewer and hotjava browser. You can do the following to set the background of the buttons separately: 

      N.setBackground(Color.red);
      S.setBackground(Color.red);
      E.setBackground(Color.red);
      W.setBackground(Color.red);
      N.setBackground(Color.red);
Click Here to run the applet with this modification.

Note that in Internet Explorer the text comes out in black rather than in white.

Nested Layouts

Layouts can be nested. 
/* < applet code = "L2" WIDTH = 300 HEIGHT = 200 >
   < /applet >
*/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class L2 extends Applet implements ActionListener {

   Button N = new Button("NORTH");
   Button S = new Button("SOUTH");
   Button E = new Button("EAST");
   Button W = new Button("WEST");

   Button PN = new Button("P NORTH");
   Button PS = new Button("P SOUTH");
   Button PE = new Button("P EAST");
   Button PW = new Button("P WEST");
   Button PC = new Button("P CENTER");

   public void init() {
      setup_layout();
   }

   private void setup_layout() {
      Panel p = new Panel();

      setLayout(new BorderLayout());
      setBackground(Color.red);
      setForeground(Color.white);

      p.setBackground(Color.lightGray);
      p.setLayout(new BorderLayout());

      add("North", N);
      add("South", S);
      add("Center", p);
      add("West", W);
      add("East", E);

      p.add("North", PN);
      p.add("South", PS);
      p.add("Center", PC);
      p.add("West", PW);
      p.add("East", PE);

      N.addActionListener(this);
      S.addActionListener(this);
      E.addActionListener(this);
      W.addActionListener(this);
      PN.addActionListener(this);
      PS.addActionListener(this);
      PE.addActionListener(this);
      PW.addActionListener(this);
      PC.addActionListener(this);
   }

   public void actionPerformed(ActionEvent e) {
      if (e.getSource() == N) {
         showStatus("North button pushed");
      }
      else if (e.getSource() == S) {
         showStatus("South button pushed");
      }
      else if (e.getSource() == E) {
         showStatus("East button pushed");
      }
      else if (e.getSource() == W) {
         showStatus("West button pushed");
      }
      if (e.getSource() == PN) {
         showStatus("Panel North button pushed");
      }
      else if (e.getSource() == PS) {
         showStatus("Panel South button pushed");
      }
      else if (e.getSource() == PE) {
         showStatus("Panel East button pushed");
      }
      else if (e.getSource() == PW) {
         showStatus("Panel West button pushed");
      }
      else if (e.getSource() == PC) {
         showStatus("Panel Center button pushed");
      }
    
   }
}

Click Here to run this applet.

Click Here to run this applet with the individual colors modified.

GridLayout

Gridlayout puts widgets in rectangular arrays. 
/* < applet code = "L3" WIDTH = 300 HEIGHT = 200 >
   < /applet >
*/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class L3 extends Applet implements ActionListener {

   Button N = new Button("NORTH");
   Button S = new Button("SOUTH");
   Button E = new Button("EAST");
   Button W = new Button("WEST");

   Button P00 = new Button("P 0 0");
   Button P01 = new Button("P 0 1");
   Button P02 = new Button("P 0 2");
   Button P10 = new Button("P 1 0");
   Button P11 = new Button("P 1 1");
   Button P12 = new Button("P 1 2");

   public void init() {
      setup_layout();
   }

   private void setup_layout() {
      Panel p = new Panel();

      setLayout(new BorderLayout());
      setBackground(Color.red);
      setForeground(Color.white);

      p.setBackground(Color.lightGray);
      p.setLayout(new GridLayout(2,3));

      add("North", N);
      add("South", S);
      add("Center", p);
      add("West", W);
      add("East", E);

      p.add(P00);
      p.add(P01);
      p.add(P02);
      p.add(P10);
      p.add(P11);
      p.add(P12);

      N.addActionListener(this);
      S.addActionListener(this);
      E.addActionListener(this);
      W.addActionListener(this);
      P00.addActionListener(this);
      P01.addActionListener(this);
      P02.addActionListener(this);
      P10.addActionListener(this);
      P11.addActionListener(this);
      P12.addActionListener(this);
   }

   public void actionPerformed(ActionEvent e) {
      if (e.getSource() == N) {
         showStatus("North button pushed");
      }
      else if (e.getSource() == S) {
         showStatus("South button pushed");
      }
      else if (e.getSource() == E) {
         showStatus("East button pushed");
      }
      else if (e.getSource() == W) {
         showStatus("West button pushed");
      }
      else if (e.getSource() == P00) {
         showStatus("Panel 0 0 button pushed");
      }
      else if (e.getSource() == P01) {
         showStatus("Panel 0 1 button pushed");
      }
      else if (e.getSource() == P02) {
         showStatus("Panel 0 2 button pushed");
      }
      else if (e.getSource() == P10) {
         showStatus("Panel 1 0 button pushed");
      }
      else if (e.getSource() == P11) {
         showStatus("Panel 1 1 button pushed");
      }
      else if (e.getSource() == P12) {
         showStatus("Panel 1 2 button pushed");
      }
    
   }
}

Click Here to run this applet.

Click Here to run this applet with the individual colors set.

GridLayout with an Array of Buttons

It is tedious to write out the six center panel buttons. Here is a way to do it with an array: 
/* < applet code = "L3a" WIDTH = 300 HEIGHT = 200 >
     < PARAM NAME = PANELWIDTH VALUE = 3 >
     < PARAM NAME = PANELHEIGHT VALUE = 2 >
   < /applet >
*/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class L3a extends Applet implements ActionListener {

   int PanelWidth;
   int PanelHeight;
 
   Button N = new Button("NORTH");
   Button S = new Button("SOUTH");
   Button E = new Button("EAST");
   Button W = new Button("WEST");

   Button[][] PButtons;

   public void init() {
      PanelWidth = Integer.parseInt(getParameter("PANELWIDTH"));
      PanelHeight = Integer.parseInt(getParameter("PANELHEIGHT"));
      PButtons = new Button[PanelHeight][PanelWidth];
      for (int i=0;i < PanelHeight;i++)
         for (int j=0;j < PanelWidth;j++)
            PButtons[i][j] = new Button("P "+i+" "+j);
      setup_layout();
   }

   private void setup_layout() {
      Panel p = new Panel();

      setLayout(new BorderLayout());
      setBackground(Color.red);
      setForeground(Color.white);

      p.setBackground(Color.lightGray);
      p.setLayout(new GridLayout(PanelHeight,PanelWidth));

      add("North", N);
      add("South", S);
      add("Center", p);
      add("West", W);
      add("East", E);

      N.addActionListener(this);
      S.addActionListener(this);
      E.addActionListener(this);
      W.addActionListener(this);
      for (int i=0;i < PanelHeight;i++)
         for (int j=0;j < PanelWidth;j++) {
            p.add(PButtons[i][j]);
            PButtons[i][j].addActionListener(this);
      }
   }

   public void actionPerformed(ActionEvent e) {
      if (e.getSource() == N) {
         showStatus("North button pushed");
      }
      else if (e.getSource() == S) {
         showStatus("South button pushed");
      }
      else if (e.getSource() == E) {
         showStatus("East button pushed");
      }
      else if (e.getSource() == W) {
         showStatus("West button pushed");
      }
      else {
         for (int i=0;i < PanelHeight;i++)
            for (int j=0;j < PanelWidth;j++) 
               if (e.getSource() == PButtons[i][j])
                  showStatus("Panel "+i+" "+j+" button pushed");
      }
   }
}
This applet behaves exactly like the last one.

Click Here to run this applet.

Click Here to run this applet with the individual colors set.

One advantage of doing it this way is that you can change the number of buttons in the HTML without recompiling. Here is a new HTML file: 

   < applet code = "L3ac" WIDTH = 300 HEIGHT = 200 >
     < PARAM NAME = PANELWIDTH VALUE = 5 >
     < PARAM NAME = PANELHEIGHT VALUE = 4 >
   < /applet >
It produces the following:

Click Here to run this applet.

Click Here to run this applet with the individual colors set.

FlowLayout

Flowlayout lays out panels left to right then top to bottom, placing as many panels in a row as will fit. 
/* < applet code = "L4" WIDTH = 300 HEIGHT = 200 >
   < /applet >
*/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class L4 extends Applet implements ActionListener {

   Button N = new Button("NORTH");
   Button S = new Button("SOUTH");
   Button E = new Button("EAST");
   Button W = new Button("WEST");

   Button P00 = new Button("P 0 0");
   Button P01 = new Button("P 0 1");
   Button P02 = new Button("P 0 2");
   Button P10 = new Button("P 1 0");
   Button P11 = new Button("P 1 1");
   Button P12 = new Button("P 1 2");

   Button Q1 = new Button("Queue 1");
   Button Q2 = new Button("Q 2");
   Button Q3 = new Button("Queue 3");
   Button Q4 = new Button("Q 4");
   Button Q5 = new Button("Queue 5");
   Button Q6 = new Button("Q 6");
   Button Q7 = new Button("Queue 7");
   Button Q8 = new Button("Q 8");

   public void init() {
      setup_layout();
   }

   private void setup_layout() {
      Panel p = new Panel();
      Panel q = new Panel();

      setLayout(new BorderLayout());
      setBackground(Color.blue);
      setForeground(Color.white);

      p.setBackground(Color.lightGray);
      p.setLayout(new GridLayout(2,3));

      q.setBackground(Color.gray);
      q.setLayout(new FlowLayout());

      AddAndAction(q,Q1);
      AddAndAction(q,Q2);
      AddAndAction(q,Q3);
      AddAndAction(q,Q4);
      AddAndAction(q,Q5);
      AddAndAction(q,Q6);
      AddAndAction(q,Q7);
      AddAndAction(q,Q8);

      AddAndAction("North", this, N);
      add("Center",q);
      add("South",p);
      AddAndAction("West", this, W);
      AddAndAction("East", this, E);

      AddAndAction(p,P00);
      AddAndAction(p,P01);
      AddAndAction(p,P02);
      AddAndAction(p,P10);
      AddAndAction(p,P11);
      AddAndAction(p,P12);
   }

   public void AddAndAction(Panel p, Button b) {
      p.add(b);
      b.addActionListener(this);
   }

   public void AddAndAction(String str, Panel p, Button b) {
      p.add(str, b);
      b.addActionListener(this);
   }

   public void actionPerformed(ActionEvent e) {
      if (e.getSource() == N) {
         showStatus("North button pushed");
      }
      else if (e.getSource() == S) {
         showStatus("South button pushed");
      }
      else if (e.getSource() == E) {
         showStatus("East button pushed");
      }
      else if (e.getSource() == W) {
         showStatus("West button pushed");
      }
      else if (e.getSource() == P00) {
         showStatus("Panel 0 0 button pushed");
      }
      else if (e.getSource() == P01) {
         showStatus("Panel 0 1 button pushed");
      }
      else if (e.getSource() == P02) {
         showStatus("Panel 0 2 button pushed");
      }
      else if (e.getSource() == P10) {
         showStatus("Panel 1 0 button pushed");
      }
      else if (e.getSource() == P11) {
         showStatus("Panel 1 1 button pushed");
      }
      else if (e.getSource() == P12) {
         showStatus("Panel 1 2 button pushed");
      }
      else if ( (e.getSource() == Q1) ||
                (e.getSource() == Q2) ||
                (e.getSource() == Q3) ||
                (e.getSource() == Q4) ||
                (e.getSource() == Q5) ||
                (e.getSource() == Q6) ||
                (e.getSource() == Q7) ||
                (e.getSource() == Q8) ) {
         showStatus("Center Button "+((Button)e.getSource()).getLabel()+
                    " pushed");
      }
    
   }
}

Click Here to run this applet.

Click Here to run this applet with the individual colors set.

CardLayout

This shows only one component in the container at a time.
Methods allow you to change which component is shown.
You can move through them in sequence, forward or back, or move to a particular one.

The folowing methods allow you to change which component is shown:

The first argument to the add is a string which is used by show to show a particular component.

For example, 

   CardLayout CLayout;
   p.setLayout(CLayout = new CardLayout());
   p.add("Name 1",P1);
Allows you to show this component by executing 
   CLayout.show(p,"Name 1");
Here is an example applet: 
/* < applet code = "L5" WIDTH = 300 HEIGHT = 200 >
   < /applet >
*/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class L5 extends Applet implements ActionListener {

   Button N = new Button("NORTH = Previous");
   Button S = new Button("SOUTH = Next");
   Button E = new Button("EAST = Last");
   Button W = new Button("WEST = First");

   Button P1 = new Button("FIRST -> Second");
   Button P2 = new Button("SECOND -> First");
   Button P3 = new Button("THIRD -> First");

   Panel p;
   CardLayout CLayout;

   public void init() {
      setup_layout();
   }

   private void setup_layout() {
      p = new Panel();

      setLayout(new BorderLayout());
      setBackground(Color.red);
      setForeground(Color.white);

      p.setBackground(Color.lightGray);
      p.setLayout(CLayout = new CardLayout());

      add("North", N);
      add("South", S);
      add("Center", p);
      add("West", W);
      add("East", E);

      p.add("Name 1",P1);
      p.add("Name 2",P2);
      p.add("Name 3",P3);

      N.addActionListener(this);
      S.addActionListener(this);
      E.addActionListener(this);
      W.addActionListener(this);
      P1.addActionListener(this);
      P2.addActionListener(this);
      P3.addActionListener(this);
   }

   public void actionPerformed(ActionEvent e) {
      if (e.getSource() == N) {
         CLayout.previous(p);
         showStatus("North button pushed");
      }
      else if (e.getSource() == S) {
         CLayout.next(p);
         showStatus("South button pushed");
      }
      else if (e.getSource() == E) {
         CLayout.last(p);
         showStatus("East button pushed");
      }
      else if (e.getSource() == W) {
         CLayout.first(p);
         showStatus("West button pushed");
      }
      else if (e.getSource() == P1) {
         CLayout.show(p,"Name 2");
         showStatus("Card P1 button pushed");
      }
      else if (e.getSource() == P2) {
         CLayout.show(p,"Name 1");
         showStatus("Card P2 button pushed");
      }
      else if (e.getSource() == P3) {
         CLayout.show(p,"Name 1");
         showStatus("Card P3 button pushed");
      }
    
   }
}

Click Here to run this applet.

Click Here to run this applet with the individual colors set.

GridBagLayout

This is the most complicated and flexible of the layout managers.

It allows layout out cells in a grid in which the the rows and columns do not have to have the same width.

This will be discussed at a later time.

Next topic: Threads