Panels and Layouts

Panels

So what's up with Panels?

Well your application or applet can utilize multiple layout strategies with Panels. "Every Container can have its own Layout scheme". And own fonts, background, drawing space, etc.

We go into detail about these two and we will use Sun's CardTest(copyrighted by them) program as a starting point.

CardTest source code

To view this applet you need a Java-enabled browser

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

class CardPanel extends Panel 
{
	// This method called create ask for a layout(i.e BorderLayout)
	// and returns a Panel
	// In the process creates five buttons each laid out in a different
	// area
    	Panel create(LayoutManager layout) 
	{
		Panel p = new Panel();
		p.setLayout(layout);
		p.add("North",   new Button("one"));
		p.add("West",   new Button("two"));
		p.add("South",  new Button("three"));
		p.add("East",   new Button("four"));
		p.add("Center", new Button("five"));
		return p;
    	}

Here the panels are added to the CardPanel. This sub-class of Panel behaves much like a 'tabbed-dialog' you see in Netscape.

	
	// The constructor creates six different panels from "one to "six"
	// each with a different layout scheme
    	CardPanel() 
	{
		setLayout(new CardLayout());
		add("one", create(new FlowLayout()));
		add("two", create(new BorderLayout()));
		add("three", create(new GridLayout(2, 2)));
		add("four", create(new BorderLayout(10, 10)));
		add("five", create(new FlowLayout(FlowLayout.LEFT, 10, 10)));
		add("six", create(new GridLayout(2, 2, 10, 10)));
    	}

	// The preferred size of the panel. Not always adhered to.
    	public Dimension preferredSize() 
	{
		return new Dimension(200, 100);
    	}
}

These examples can be used in your application or applet:

class ToolBar extends Panel
{
	// The constructor - called first when object is created
	public ToolBar()
	{
		setLayout(new FlowLayout());

		// Adds three buttons to the panel, which are
		// laid out according to FlowLayout
		add(new Button("Open"));
		add(new Button("Save"));
		add(new Button("Close"));

		// A Choice component which needs to be
		// added to the panel after the choices have
		// been included.
		Choice c = new Choice();
		c.addItem("Times Roman");
		c.addItem("Helvetica");
		c.addItem("System"); 
		add(c);

		// Add one last button
		add(new Button("Help"));
	}
}

To view this applet you need a Java-enabled browser

class StatusBar extends Panel
{
	private Label info;
	private Label other;

	// The constructor 
	public StatusBar()
	{
		setLayout(new FlowLayout());

		// Creates two instances of Label and assigns
		// them to 'info' and 'other'. Then adds them to
		// the panel.

		// We use this constructor of
		// Label(String string)
		add(info = new Label("StatusBar created"));
		add(other = new Label("Other info"));
	}

	public void showStatus(String status)
	{
		info.setText(status);
	}
}

To view this applet you need a Java-enabled browser

Add these variables to your MyApp class. These don't create instance of the ToolBar and StatusBar as they would in C++, but rather ALL Java objects must be created with "new".

StatusBar sb;
ToolBar tb;

And add the following lines in your constructor, removing previous junk.

add("North", tb = new ToolBar());
add("South", sb = new StatusBar());

And this to your event handler to handle "ACTION_EVENT"s which are button clicks, choice selections, menu selections, etc.

case Event.ACTION_EVENT:
{
	// evt.arg contains the label of the MenuItem, Button, Choice, etc.
	sb.showStatus(evt.arg.toString());
	return true;
}

Thus the source code should look like this

[Q & A's]

Q: What do you do with Panels?
A: Generally you contain Components and lay them out, not much else.
Q: What can you have in a Panel?
A: All Components and this includes Frame, Window, Dialog, etc. But this is strange to have a Panel the parent to a Frame. (This is how its done if you want a applet to have a Frame)

Layouts
Layouts specify how components are to be "laid out".
The following are examples from Sun(I couldn't explain it any better): Check their tutorial
BorderLayout

BorderLayout is the default layout manager for all Windows, such as Frames and Dialogs. It uses five areas to hold components: north, south, east, west, and center. All extra space is placed in the center area. Here's a picture of a program that puts one button in each area.

CardLayout

Use the CardLayout class when you have an area that can contain different Components at different times. CardLayouts are commonly tied to Choices, with the state of the Choice determining which Panel (group of Components) the CardLayout displays. Here are two pictures of a program that uses a Choice and CardLayout in this way.

FlowLayout

FlowLayout is the default layout manager for all Panels. It simply lays out components from left to right, centering them within their row and, if necessary, starting new rows. Both Panels in the CardLayout figure above use FlowLayouts.

GridBagLayout

GridBagLayout is the most sophisticated, flexible layout manager we provide. It aligns components vertically and horizontally, without requiring that the components be the same size. Here's a picture of a program that uses a GridBagLayout to manage ten buttons in a panel.

GridLayout

GridLayouts simply make a bunch of Components have equal size, displaying them in the requested number of rows and columns. Here's a picture of a program with a Panel that uses a GridLayout to control the display of 5 buttons.

Doing Without a Layout Manager

You can position Components using absolute coordinates without using a layout manager. Here's a picture of a program with a panel that sets its layout manager to null and then positions three buttons.

Creating a Custom Layout Manager

Instead of using one of our layout managers, you can write your own. Layout managers must implement the LayoutManager interface, which specifies the five methods every layout manager must define. Here's a picture of a program that uses a custom layout manager to position components diagonally across a panel.

Some more examples of a custom layouts(These are not mine, please contact the original author):

AbsoluteLayout.java
RelativeLayout.java

Test applet for RelativeLayout

XyLayout.java

[Q & A's]

Q: Why not fixed co-ordinates instead of relative positions?
A: Because something that looks fine on an hi-res X-Terminal(X is not WYSIWYG-friendly either) looks like bad on a PC. Small images and text that look fine a low-res monitor are far too small to read on a hi-resolution monitor.
Q: Are layouts the solution?
A: The given layouts are usuable solution, but a layout where the component sizes(and pixel) are based the current font is desired. This means once you "layout" a design of yours in a 12pt font and it will 'look the same' with a 18pt font. Regardless of pixel size or monitor size. This is what Windows and OS/2 does, but it is not 'perfect' nor is it really that great. A better solution is to use pixels-per-inch and scale components, etc I've found apps using this method to be 95% similar of differing resolutions.
Q: Why would you want to use a custom layout?
A: When the current batch of layouts are not sufficient.
Q: What's next?
A: When we have tools such as GUI builders that generate all of the layout information for use, then the Java(and the AWT) will be accepted by the masses of programers.

[Next] [Prev] [Home]

Nelson Yu
nelson@cs.ualberta.ca
Last modified: Feb 21 1996