More Complicated Layout Systems

Last week we introduced a myriad of Layout Managers--the brokers for the arrangement of your user interface. We discussed how you might use one of the various different layout systems by writing a setLayout() into your applet. Now it's time to talk about specific details of the more complicated layout systems.

Last week we developed a sample applet designed to display the simplest of the layout systems (the one you get by default):

This applet, like others we've discussed here in past weeks, created four buttons in its on-screen area (its Panel) just by using a method called add().

---

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

public class flow extends Applet
{
  Button b1,b2,b3,b4;

  public void init ()
  {
    b1 = new Button ("The First Button");
    b2 = new Button ("Button 2");
    b3 = new Button ("Three");
    b4 = new Button ("4");

    add(b1);
    add(b2);
    add(b3);
    add(b4);
  }
}

---

This example makes the process of creating a button object and then adding it to your applet's interface quite clear. Now, should you want to do something more interesting with your layout, you will encounter some differences with the way you add your components.

The GridLayout system requires only two pieces of information in addition to your standard FlowLayout system: the number of rows and the number of columns in the grid of objects you wish to create on your screen. So by adding one line to our previous example (in init(), right before b1 = new Button...):

setLayout(new GridLayout(2,2));

we create a new GridLayout object--one that knows that it should organize two rows and two columns of buttons and drop it into the setLayout function for our applet. Now we get something that looks like this:

For the BorderLayout, the setup is actually slightly more complicated; in order to use this system, you'll need to use the "two-argument" add() method. Basically, instead of giving relevant information about the layout when creating the layout manager object, we give it when adding components:

add("North",b1);
add("East",b2);
add("South",b3);
add("West",b4);

This makes sense. BorderLayout just wants to know the cardinal direction each thing is closest to. We now have:

Now you've seen how to operate FlowLayout, GridLayout, and BorderLayout. These are the three "simple" layout managers. It's possible you're thinking that they're too simple--but take one final detail into account. The Panels that we've been working with can contain and organize any kind of interface object: buttons, menus, text fields, and, most importantly, other Panels (or other Containers in general).

That's right; in other words, we can combine layouts. All we need to do is create additional Panel objects and add() them.

Since our own applet is a kind of Panel (among other things), when we write lines like setLayout() and add() within it, Java assumes we're calling those methods on our applet itself. Once we create other, additional Panels, we need to be more specific when we call these methods, like so:

          c1 = new Panel();
          c1.setLayout(new GridLayout(2,2));
          c1.add(new Button("New"));

So, when we want to use a panel besides our applet's own, we need to specify which Panel object we're interested in by putting it before our method call.

Below you can see an applet that serves as an example of how you might combine two layouts to get a new effect:

We did this by mixing our BorderLayout applet with our GridLayout applet as follows:

---

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

public class multi extends Applet
{
  Container c1;
  Button b1,b2,b3;

  public void init ()
  {
    c1 = new Panel();
    b1 = new Button ("The First Button");
    b2 = new Button ("Button 2");
    b3 = new Button ("Three");

    setLayout(new BorderLayout());
    add("North",b1);
    add("East",b2);
    add("South",b3);
    add("West",c1);

    c1.setLayout(new GridLayout(2,2));
    c1.add(new Button("An"));
    c1.add(new Button("Entirely"));
    c1.add(new Button("New"));
    c1.add(new Button("Panel"));
  }
}

---

We created a new Panel called c1 and added it to the left-hand side of our BorderLayout. Then we went on to set up c1 itself.

Don't let the simplicity of this example belittle the power of this system; you can create deeply "nested" interface structures as complex as you desire, or at least as complex as your computer's windowing system can handle.

We're still only getting warmed up. Next week, we'll tackle even bigger and better layouts. Stay tuned.

Past installments of Java Jolt