Lesson 5.6 Panels and Layouts

Using Panels and Layout Managers

It's true that Java doesn't lend itself well to WYSIWYG [What You See Is What You Get] layout because the actual program may run on different hardware than the hardware that you design it on. Like HTML pages, Java programs should not be tied to the hardware that they were created on.

In Java, instead of positioning items visually, pixel-by-pixel, you use a layout manager object to arrange and size your components on the screen according to a set of rules. 

The FlowLayout Class

If a component won’t fit on a row, then FlowLayout starts a new row. FlowLayout layout managers come in three different varieties, left-aligned, right-aligned, and center aligned. The default version--the one you get if you don't do anything--is center-aligned.

Changing Layouts

When you call setLayout(), you pass a layout manager object, which you can construct in your init() method like this:

Here's a program that lets you exercise the different versions of FlowLayout, to see how they behave.

TestFlow.java

// Test the FlowLayout class import java.awt.*; import java.applet.*; public class TestFlow extends Applet {   Button addBtn     = new Button("Add");   Button leftBtn    = new Button("Left");   Button rightBtn   = new Button("Right");   Button centerBtn  = new Button("Center");   FlowLayout mgr;   int nButtons = 4;   public void init()   {     add(addBtn);     add(leftBtn);     add(rightBtn);     add(centerBtn);   }   public boolean action(Event ev, Object o)   {     if (ev.target == addBtn)     {       add(new Button("Button # "+nButtons++));     }     else if (ev.target == leftBtn)     {       mgr = new FlowLayout(FlowLayout.LEFT);       setLayout(mgr);     }     else if (ev.target == rightBtn)     {       mgr = new FlowLayout(FlowLayout.RIGHT);       setLayout(mgr);     }     else if (ev.target == centerBtn)     {       mgr = new FlowLayout(FlowLayout.CENTER);       setLayout(mgr);     }     invalidate();     validate();     return true;   } }

Back to Top

Examining TestFlow

• The applet first creates four Buttons named addBtn, leftBtn, centerBtn, and rightBtn, and then adds them to its surface.
• It uses the Java 1.0 action() method, which you learned about in Lesson 5.5, "Action".
• Inside the action() method, a ladder-style if-else-if statement takes a separate action for each Button pressed.
• If the Button pressed is the addBtn, then a new Button is added to the applet.
• If the Button pressed is the leftBtn, rightBtn, or centerBtn, then an appropriate FlowLayout layout manager is constructed and applied to the applet, using setLayout().
• Once the changes have been made to the applet, it is told to "rearrange" all of its Buttons, using the "magic" incantation:
  

invalidate(); validate();

• These messages force the layout manager to layout the applet and force any newly added Buttons to appear as well.

Back to Top

Running TestFlow

To run the TestFlow applet, first add a few new Button objects by pressing the "Add" button. Then, arrange them in different ways by clicking on the "Left", "Right", or "Center" buttons.

BorderLayout

You create a BorderLayout layout manager just like you do any other object--using a constructor. BorderLayout has several different constructors, but the default constructor is fine for now:

Once you've constructed a BorderLayout layout manager, you can instruct your applet to use it by sending the setLayout() message, just as you did for FlowLayout:

Back to Top

Adding Components

• In Java 1.0 [if you are using the action() method], use:
  

add(direction, component);


where direction is "North", "South", "East", "West", or "Center", and component is your Button or Label.

• In Java 1.1, you use the same syntax, but reverse the position of direction and component
• In Java 1.1 and Java 2, you can use the five constants BorderLayout.EAST, BorderLayout.WEST, BorderLayout.NORTH, BorderLayout.SOUTH and BorderLayout.CENTER in place of typing in the String literals. 

TestBorder.java

Here's an example that adds four buttons to the top, left, right, and bottom, and places another button in the center:

When you run the applet, it looks like this:

Back to Top

Introducing Panels

A Panel object acts like a container for other components. You can add objects to a Panel just the same way you add them to an applet. [In fact, the Applet class is a specialized subclass of Panel.]

The default layout manager for a Panel is FlowLayout so that objects are sized naturally. Once you've added all your buttons and labels to your Panel, you can then add the Panel to your applet that uses BorderLayout. The result? The Panel swells up, but the components it contains retain their natural size.

Here's a piece of code that shows you how to add several buttons to the top of an applet to create a "toolbar".

public void init() {   setLayout(new BorderLayout());   // 1. Create a Panel object   Panel p = new Panel();    // 2. Add two Buttons to the Panel   p.add(new Button("One"));   p.add(new Button("Two"));   // 3. Add your Panel to the applet   add("North", p); }

Introducing TextArea

The TextArea class is very useful when you need to create a more extensive "dialog" with the user than a single line of text allows. You can use the TextArea to display instructions, and to keep the user informed concerning the progress of your application. You'll use a TextArea for this purpose in the homework assignment for this unit.

To create a TextArea object, you can use several different constructors, but the most useful is the one allows you to specify the number of rows and columns that you'd like displayed. 

For instance, here's an example that creates a TextArea big enough to hold eight lines of text, with each line of text [roughly] 40 characters wide.

Unfortunately, when working with BorderLayout, the TextArea swells up like every other component, so there's really no benefit to specifying a specific size--especially if you are going to place your TextArea in the "Center" position, as is often the case.

Back to Top

TextArea Operations

where the argument to setText() is the empty String. [Two pairs of double-quotes, with no intervening spaces.]

You can add text to the end of a TextArea by using the append() method in Java 1.1, and the appendText() method in Java 1.0. like this:

Here's an example program, TestTA.java, that puts together several of the different skills used in this section. It uses a BorderLayout, has a TextArea in the center, has a toolbar built using a Panel at the top, and it uses the Java 1.0 action() method.

Something to Talk About

Using the code from TestBorder.java as a starting point, show us the code you'd write in the init() method to create an applet that looks like this:

This is the last section of this lesson.

Back to Top