Lecture 2

Announcements
Introduction to Java programming
Fun with graphics
The canvas
Graphics primitives
Magic words
Simple event handling
Naming
Working with the location of the mouse

Announcements

None today.

Introduction to Java programming

Many of our first programs will simply respond to high-level commands such as a press of a mouse button or a mouse movement. If we want a program to react to the pressing of the mouse, we have to tell it what to do when we press the mouse.

Consider, for example, the following simple program that draws a box on the screen when we click the mouse.

Demo 1. MakeBox

Fun with graphics

This semester we'll be working with graphics a great deal. It's natural to want to work with graphic objects like shapes, lines, text, pictures, etc. They're fun.

In addition to being fun because they involve graphics, our programs will be fun because they're applets. That is, they're the kind of Java program that can be embedded in a web page.

The canvas

When you write a program in this class, you should think of it as an object that responds to actions like mouse presses, movements, etc. You'll specify what the program should do by giving it a list of commands to follow in response to each of those actions.

Many of those commands will involve things like placing graphical objects in a window (on the screen). You should think of that window as a canvas. In fact, we'll call it a canvas. In order to place something on the canvas, you'll naturally need to tell the program where to put it. To do so, all you have to do is specify the location in terms of x and y coordinates. The only trick is that the coordinate system is upside down. The upper left corner of the canvas is position (0,0). As you move to the right, you get to higher and higher x coordinates. As you move down, you go to higher and higher y coordinates. (Normally, moving down from the origin would get you into the range of negative y values!)

Graphics primitives

The basic objects you can draw are:

FramedRect
FilledRect
FramedOval
FilledOval
Line
Text

and this is how you'll build these:

   new FramedRect(10, 10, 40, 60, canvas);
   new Line(x1, y1, x2, y2, canvas);
   new Text("hello there", x, y, canvas);

That is, any time you want to create a new framed rectangle, you'll specify that you want a new FramedRect, with its upper left corner at the x coordinate 10, the y coordinate 10, with a width of 40, and a height of 60. You also have to say where you'd like it placed -- on the canvas, naturally.

In the case of a line, you'll specify the x and y coordinates of each endpoint.

For text you'll give the actual text you'd like displayed. You'll need to put quotes around the text, but the quotes won't actually appear on the canvas. Now let's look carefully at a program that does nothing but display a box on the screen.

Demo 2. Simplest Box

Magic words

You should have noticed the line "new FilledRect(...." in the program that dispayed a box. But you certainly also noticed that there were many other lines in the program as well. It might look like there are a large number of magic words required to make this program acceptable to the computer, but the overall structure is really quite simple.

We first tell Java that we'll need some to make use of things that we haven't written. Those are the magic lines beginning with "import". For now, we'll always include those lines for you, so you won't need to think about them.
The whole thing is called a "class" specification because it describes a class of running programs that all behave in the same way.
After the word "class" is a name for this class of program. Since it makes a box, MakeBox is an appropriate name.
We next say that our program extends WindowController. This gives us the canvas on which we'll be able to draw.
The body of the class specification is composed of a "method" specification. A method specification describes how the program should behave in a particular circumstance. In this case, the one method tells Java what to do when the program "begin"s to run. It draws a box.

Simple event handling

We said earlier that a program will be an object that responds to actions such as the pressing of the mouse. A program like the one we just looked at -- that draws a box and does nothing more -- really isn't much fun at all.

There are seven mouse actions with which you can asociate a method within a program that extends WindowController. They are:

   public void onMouseClick(Location point)
   public void onMouseEnter(Location point)
   public void onMouseExit(Location point)
   public void onMousePress(Location point)
   public void onMouseRelease(Location point)
   public void onMouseMove(Location point)
   public void onMouseDrag(Location point)

If you look back to the program for our first demo, you'll see that it contains a method "onMousePress". In it we say that on a mouse press, the detail that the program should carry out is the drawing of a box.

Naming

OK, now say we want to write a program that will do the following: if the mouse is pressed, it will print the word "down" in red and the word "up" in gray; if the mouse is released, the word "up" will be red and the word "down" will be gray.

One command we need to know is that to set something's color we say:

   setColor(Color.xxx);

but whose color do we set? How do we specify which text is to be red and which is to be gray? We need a way of identifying each of them. This involves three steps:

Declaration of a name.

Declarations are formed by placing the name or names to be introduced after the name of the type of object with which the new name(s) will be associated.
Declarations like this enable Java to help you by detecting some of your typos.

Associating a value with the name.

This is done using an instruction called an assignment statement. It consists of
- the name you wish to associate a meaning with,
- an equal sign,
- a description of the meaning / value to be associated with the name.

Demo 3. MouseIndicator

Declaration of a name

   private FilledRect myRect;
   private FramedOval redOval, blackOval;

Associating a value with that name:

   myRect = new FilledRect(10,10,30,20,canvas);

Working with the location of the mouse

There's more to the mouse than simply its movements. We might actually care about its location. Fortunately, we can get at this information and use it.

Demo 4. Improved MakeBox