Lesson 3: GUI design

Introduction

In this lesson we concern ourselves with the placement of GUI components in a Window. In designing the look of our GUI, we need to control the size of the window the applet runs in as well as the placement of various GUI objects inside. The new material considered in this lesson includes:

• loading and displaying images.
• using flow layout managers.
• creating a heirarchy with Panels.
• passing parameters to your applet.

Images

There is a great deal of support for loading, manipulating and displaying images in Java. The file formats gif and jpeg are, in particular, straight forward to load and display. Images are stored in a java program in a instance of the Image class. The applet function getImage returns an instance. The image may be loaded across the net and hence take some time to be obtained. For this reason, the getImage function returns immediately and works on loading the image in the background. The applet will be informed of the completion of this.

Layout Managers

In the last lesson, there was no specific mention of where the Buttons and TextFields were going to be placed. We could have, if we decided, specifically told the Applet the exact location (x,y) in pixels where to place the GUI objects, but instead we left it to Applet's default Layout Manager to decide. Since java programs are meant to be run on many different platforms, it is better to use a manager.

There are many kinds of Layout managers, the default one being the FlowLayout manager. The flow layout just adds the objects in from left to right, and when it runs out of room, it sticks the next object on the next line. The manager will also center all of the objects. The default manager is then much like a word processor. As you type (add words), it tries to fit all the words onto one line. If it runs out of room, it places the object onto the next line, and so on.

Other Layout styles include the BorderLayout, which divides the screen into a grid - wast, center, west, north, and south, the GridLayout, the GridBagLayout, the CardLayout, and so on. We will use the BorderLayout for this applet. The default layout manager is called a FlowLayout.

Containers: Applets and Panels

We will examine the code line by line. The following code needs to be saved in a file called lesson3.java.

// file:   Lesson3.java
// type:   Java code
// note:   Doing a Layout and using images
// author: Gregory C. Walsh
// date:   11/23/97

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

public class Lesson3 extends Applet implements ActionListener{
    Image walsh[];
    Button front, top, left, right;
    WalshView view;  // WalshView is an inner class (see details below)...
    Font f1;

    public void init () {
	walsh = new Image[4];

	// Download the four images .....

	for(int i = 0; i < 4; i++) 
	    walsh[i] = getImage(getDocumentBase(),"walsh"+i+".jpg");

	// Generate the GUI objects with initial states

	front = new Button( "+");
	top   = new Button( "Mug Shot Project" );
	left  = new Button("<");
	right = new Button(">");

	// Create canvas that will display images ....

	view  = new WalshView(0);

	// Set the font on the GUI

	f1 = new Font("TimesRoman",Font.PLAIN,16);
	front.setFont(f1);
	top.setFont(f1);
	left.setFont(f1);
	right.setFont(f1);

        // Configure the appearance of the GUI

	setLayout(new BorderLayout() );
	add("North",top);
	add("Center",view);
	add("West",left);
	add("East",right);
	add("South",front);

        // Connect buttons to action listeners ....

	front.addActionListener(this);
	top.addActionListener(this);
	right.addActionListener(this);
	left.addActionListener(this);
    }

    // Action listener for the buttons ....

    public void actionPerformed(ActionEvent e) {

	String command = e.getActionCommand();

	if(command == "+") {
	    view.image = 0;
	    view.repaint();
	}

	if(command == "<") {
	    view.image = 1;
	    view.repaint();
	}

	if(command == ">") {
	    view.image = 2;
	    view.repaint();
	}

	if(command == "Mug Shot Project") {
	    view.image = 3;
	    view.repaint();
	}
    }

    // WalshView : This inner class displays an image on a canvas....

    public class WalshView extends Canvas {
	int image;

	public WalshView(int i) {
	    image = i;
	}
	public void paint(Graphics g) {
	    g.drawImage(walsh[image], 0, 0, this);
	}
    }
}

Points to note are as follows:

1. The new parts of code in this applet are found in the init() function. We have also created an inner class WalshView which is an extension of a canvas. We overide its paint function to draw the appropriate image in its place. As before, it creates instances of each of the graphics objects to be used.

2. The files before compilation are:

       Lesson3.java
       walsh0.jpg walsh1.jpg walsh2.jpg walsh3.jpg
   

   After compilation, the program files are:

       Lesson3.java
       Lesson3.class
       Lesson3$WalshView.class
       walsh0.jpg walsh1.jpg walsh2.jpg walsh3.jpg
   

   Notice how the bytecode for the inner class is put in its own file.

3. We set the layout manager for the main window by calling the

       setLayout(new BorderLayout())
   

   method of the container (the Applet). We created the layout object right in the call to set the layout. The default layout is FlowLayout.

4. GUI components are added to the container by calling its add method, as is done in the following lines. Your project will most likely have a more complicated look. using a greater variety of GUI object types.

Originally developed in 1999 by Greg Walsh
Modified slightly in April 2001 by Mark Austin
Copyright © 1999-2001, Departments of Civil and Mechanical Engineering, University of Maryland