Panels

Up to this point you have been writing applets which are a subclass of a panel that run in a browser rather than as a stand-alone application. You have placed different components on this panel or applet which utilized the default layout for an applet. In order to write more sophisticated applets, it will be necessary to create layouts on your panels to divide them up into different regions. Panels enable you to do this and they can be nested within other panels to help organize your layout.

Consider the applet below:

Choose values that range between 0 and 255, pushing enter after each input. The colors will be mixed and painted on the applet canvas on the right.

The applet itself is a panel. In fact, it extends the panel class so that the panel will run in a browser. The applet or panel is then divided into two sections. It's layout is set for 1 row and 2 columns with 10 pixels between each row and column. The left side of this applet is a panel that has a layout of its own. The right side is a canvas. A canvas is a component that is used for creating custom graphic components. In this applet it is used to paint a background color based on the user's input values for red, green, and blue. (These values may range from 0 to 255). Let's return to the left panel again. It's layout is set for 3 rows and two columns with 10 pixels between each row and column. The following components are added: label, textbox, label, textbox, label, and textbox. They are added from left to right, top to bottom.

When you add components to a container, layout managers are used to tell the AWT where to place your components relative to the others. This allows your applet or application to be platform-independent which is an important feature of the Java language. There are five different types of layout managers in the AWT which are explained in the glossary so you can access them easily whenever you need them. They are FlowLayout, GridLayout, BorderLayout, CardLayout, and GridBagLayout. There is an applet to illustrate all five layout managers on the "frames" page.

 

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

public class panels Applet

{
Panel values;
TextField red = new TextField(5);
TextField green = new TextField(5);
TextField blue = new TextField(5);
Canvas mixture;

Import all the facilities of the AWT and applet that Java has to offer.

Create an applet called panels.

Declare the global variables values and mixture which are a panel and canvas respectively. Create 3 instances of the class textfield called red, green, and blue.

public void init()
{
setLayout(new GridLayout(1,2,10,10));
mixture = new Canvas();
mixture.setBackground(new Color(0,0,0));
red.setText("0");
green.setText("0");
blue.setText("0");
values = new Panel();
values.setLayout(new GridLayout(3,2,10,10));
values.add(new Label("Red Value:"));
values.add(red);
values.add(new Label("Green Value:"));
values.add(green);
values.add(new Label("Blue Value:"));
values.add(blue);
add(values);
add(mixture);
}
The init method sets the layout for the applet.

The GridLayout is set for 1 row, 2 columns, with 10 pixels between rows and columns.
An instance, mixture, of the Canvas class is created.
The textboxes red, green, and blue are initialized with string "0"
An instance, values, of the Panel class is created.
The GridLayout on Panel values is set for 3 rows, 2 columns with 10 pixels between each row and column..

The 3 labels and 3 textboxes are added to the values Panel.

Then the values panel and mixture canvas are added to the applet..

public boolean action(Event evt, Object whatAction)
{
if((evt.target instanceof TextField))
{
setcolor();
return true;
}
return false;
}
When an action takes place this method tests for it.

If the action was an instance of TextField, setcolor is called and true is returned,

otherwise return false.
public void setcolor()
{
String r = red.getText();
String g = green.getText();
String b = blue.getText();
Color c = new Color(Integer.parseInt(r),Integer.parseInt(g),Integer.parseInt(b));
mixture.setBackground(c);
mixture.repaint();
}
The setcolor method retrieves the strings that were input in the red, green, and blue textboxes

A new color is created by combining the values (after being converted to integers.)

The background of the canvas is set to this new color.

To work universally in every browser, the canvas must be repainted.
public Insets insets()
{
return new Insets(10,10,10,10);
}
}
This method overrides the inset method whose default is 0 to inset the panel and canvas 10 pixels from the outside border.

 

The easiest way to obtain the code for this Applet is to click here and copy the contents of the screen that loads in your browser , paste it in a text editor and save it in a file called "panels.java".

After compiling this program we need to create an HTML page with a reference to the class file. It will require a graphic window that is large enough to contain the panel (with its labels and textboxes) and the canvas. (width-400 and height-150).

Save the HTML code in the same directory as the class file.

When you load the HTML file in your browser the applet will execute as below.

Back to Java AWT Containers

Back to the Table of Contents