Laying the Board

Hang on folks, here we have the programs dished out; the explanation will soon follow. Or for the people in the know, This page is under construction . A brief, clunky note about the programs is made to pass for an explanation, but we will be here soon (and hope you will be too!) with more explanatory stuff. As regards now, the programs will probably speak for themselves. :) See you soon. So long.

What is a Layout ?

In a layman's terminology, a layout is, as the word suggests, a feature that specifies how all the components are supposed to be placed (or laid out) on the screen. And that's about the size of it. With that nugget of wisdom in your armoury, behold your induction in to the world of Layouts (sounds too formal?)

import java.applet.*;
import java.awt.*;
public class zzz extends Applet
{	Button a,b,c,d,e;
        public void init()
        {	a = new Button("aa");
                b = new Button("bb");
                c = new Button("cc");
                d = new Button("dd");
                e = new Button("ee");
                add(a); add(b); add(c); add(d); add(e);
                list();
        }
}

This program, as you must have figured out, will display five buttons in the window. Owing to the list() , in the DOS mode there will be a display of the current components and current layout. We suggest whenever you want to see the layout-related information, the list() comes in quite handy. Getting on with the layouts, just for the record, the following layouts are given to you by Java...(and if there are more, it'll probably take us a little more sleuthing)

BorderLayout

The BorderLayout divides the screen into five parts - east, west, north, south and center. The components can be placed in any of these parts of the screen. This will be clearer with the following code...

        public void init()
        {
                setLayout(new BorderLayout());
                a=new Button("aa");
                b=new Button("bb");
                c=new Button("cc");
                d=new Button("dd");
                e=new Button("ee");
                add("North",a);add("South",b);add("West",c);add("East",d);
                add("Center",e);
                list();
        }
	public boolean mouseUp(Event e, int x, int y)
        {
                list();
                return true;
        }

As you must have noticed, it adds the button to the different borders and the center button takes up all the space. The mouseUp() does not work because of the whole center being occupied. Scrap off the center button e , and the mouseUp() function will miraculously start working. Also note that if the positions (north, south etc.) are not mentioned in the add(), you will not see any effect.

FlowLayout

This one lays out all the components in a sequence. For example, if I have five buttons and I use flowlayout, the buttons will be placed one after the other. If there are more components than can fit into a single row, they are taken on the next row.

  setLayout(new FlowLayout());

Now consider this program to be sturdier with the concept of flow layouts...

import java.applet.*;
import java.awt.*;
public class zzz extends Applet
{	Button a, b, c, d, e;
        public void init()
       {	setLayout(new FlowLayout());
                a = new Button("aa");
                b = new Button("bb");
                c = new Button("cc");
                d = new Button("dd");
                e = new Button("ee");
                add(a); add(b); add(c); add(d); add(e);
                list();
        }
}

GridLayout

The GridLayout, if my humble opinion counts, is a rather stoogy one. It simply makes the components appear as a blob of rows and columns. As though that's not enough, it also requires them to be the same size and if they are not, it compulsively resizes them. Try this...

  setLayout(new GridLayout());

That will give an error "Constructor of GridLayout not found in java.awt.GridLayout". This means that there are more parameters to be passed to the GridLayout constructor. And these are the rows and columns.

setLayout(new GridLayout(2,3));

GridBagLayout

This one is a smart one and yep, it is flexible too. It pigeonholes the components vertically or horizontally, as you require. And it does not ask for them all to be the same size. This one will be clear soon.

CardLayout

A little cheesy one, but really good in handling multiple components at different times. This will be clearer with an example very soon too.

  setLayout(new CardLayout());

Laying the Groundwork

import java.applet.*;
import java.awt.*;

public class zzz extends Applet
{	protected void f(String s, GridBagLayout l, GridBagConstraints r)
        {	Button n = new Button(s);
                l.setConstraints(n, r);
                add(n);
        }
        public void init()
        {	GridBagLayout  g = new GridBagLayout();
                GridBagConstraints i = new GridBagConstraints();
                setLayout(g);
                f("aa", g, i);
                f("bb", g, i);
                f("cc", g, i);
                f("dd", g, i);
                f("ee", g, i);
        }
}

Now when you run this program, all the buttons appear clubbed together. If we want some spacing, something called the weightx has to be given a value. This, by default, is zero.

                i.weightx=1.0;

This command after the setLayout() . Now the buttons will appear seperated with a gap of 1.0 units.

        public void init()
        {
                GridBagLayout  g = new GridBagLayout();
                GridBagConstraints i = new GridBagConstraints();
                setLayout(g);
                i.fill=GridBagConstraints.BOTH;
                i.weightx=1.0;
                f("aa",g,i);
                f("bb",g,i);
                f("cc",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                f("dd",g,i);
                f("ee",g,i);

        }

GridBagConstraints fill - BOTH/HORIZONTAL/VERTICAL - stretches the button to cover up the spaces between the buttons that came as a result of the weightx . The buttons become larger and are joined. The dd button takes the remaining space on the screen. The ee button - new row touching both the vertical sides because the gridwidth=REMAINDER

        public void init()
        {
                GridBagLayout  g = new GridBagLayout();
                GridBagConstraints i = new GridBagConstraints();
                setLayout(g);
                i.fill=GridBagConstraints.BOTH;
                i.weightx=1.0;
                f("aa",g,i);
                f("bb",g,i);
                f("cc",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                f("dd",g,i);
                i.weightx=0.0;
                i.gridwidth=GridBagConstraints.RELATIVE;
                f("ee",g,i);
        }

The noteworthy points in this program are BOTH, REMAINDER and RELATIVE. Try to figure out how they work; We'll be here with the elaboration soon.

        public void init()
        {
                GridBagLayout  g = new GridBagLayout();
                GridBagConstraints i = new GridBagConstraints();
                setLayout(g);
                i.fill=GridBagConstraints.BOTH;
                i.weightx=1.0;
                f("aa",g,i);
                f("bb",g,i);
                f("cc",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                f("dd",g,i);
                i.weightx=0.0;
                i.gridwidth=GridBagConstraints.RELATIVE;
                f("ee",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                f("ff",g,i);
        }

Next program

        public void init()
        {
                GridBagLayout  g = new GridBagLayout();
                GridBagConstraints i = new GridBagConstraints();
                setLayout(g);
                i.fill=GridBagConstraints.BOTH;
                i.weightx=1.0;
                f("aa",g,i);
                f("bb",g,i);
                f("cc",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                f("dd",g,i);
                i.gridwidth=1;
                i.gridheight=2;
                i.weighty=1.0;
                f("ee",g,i);
        }

        public void init()
        {
                GridBagLayout  g = new GridBagLayout();
                GridBagConstraints i = new GridBagConstraints();
                setLayout(g);
                i.fill=GridBagConstraints.BOTH;
                i.weightx=1.0;
                f("aa",g,i);
                f("bb",g,i);
                f("cc",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                f("dd",g,i);
                i.gridwidth=1;
                i.gridheight=2;
                i.weighty=1.0;
                f("ee",g,i);
                i.gridwidth=GridBagConstraints.REMAINDER;
                i.weighty=0.0;
                i.gridheight=1;
                f("ff",g,i);
                f("gg",g,i);
        }

After all this, let us have one for the Cardlayout as well...

import java.awt.*;
import java.applet.Applet;

class ccc extends Panel {

    ccc() {
        Panel p;
        p = new Panel();
        p.setLayout(new BorderLayout());
	p.add("North",   new Button("one"));
	p.add("West",   new Button("two"));

        Panel q;
        q = new Panel();
        q.setLayout(new FlowLayout());
        q.add("North",   new Button("one"));
        q.add("West",   new Button("two"));

        Panel r;
        r = new Panel();
        r.setLayout(new GridLayout(2,1));
        r.add("North",   new Button("one"));
        r.add("West",   new Button("two"));


	setLayout(new CardLayout());
        add("one", p);
        add("two", q);
        add("third",r);
    }

}

public class zzz extends Applet {
    ccc  c;
    public zzz()
    {
	setLayout(new BorderLayout());
        c=new ccc();
        add("Center", c);
	Panel p = new Panel();
	p.setLayout(new FlowLayout());
	add("South", p);
	p.add(new Button("first"));
	p.add(new Button("next"));
	p.add(new Button("previous"));
	p.add(new Button("last"));
    }

    public boolean action(Event e, Object o)
    {
            if ("first".equals(o))
            {
                ((CardLayout)c.getLayout()).first(c);
	    }
            else if ("next".equals(o))
            {
                ((CardLayout)c.getLayout()).next(c);
	    }
            else if ("previous".equals(o))
            {
                ((CardLayout)c.getLayout()).previous(c);
	    }
            else if ("last".equals(o))
            {
                ((CardLayout)c.getLayout()).last(c);
	    }
    	return true;
    }

}

If all this gawky clump of programs has you stumped, you can quibble your etc. etc. to us or just grope on to the next chapter "Mama! My own Layout". Don't call your mama, however, until you have read the next chapter...
Back to the Java Page

Vijay Mukhi's Computer Institute
B-13, Everest Building, Tardeo, Bombay 400 034, India.
http://www.neca.com/~vmis
e-mail: vmukhi@giasbm01.vsnl.net.in