Page 38

Getting Started

(This material can be found at http://graphics.lcs.mit.edu/6.837/f96/problem_sets/problem_sets.html.)

Non-networked (i.e., as an applet)

You are given the HTML file draw.html and the Java file Draw.java.
At the athena prompt, compile Draw.java:
% javac Draw.java
Run the resulting applet from your shell:
% appletviewer draw.html
Or from Netscape:
% Netscape draw.html
In either case, click on the UI buttons, and drag in the drawing area to select drawing modes and draw, respectively.

Networked (i.e., as standalone server application and multiple client applets)

The drawing program also has a mode in which you can connect multiple drawing applets so that anything drawn in one applet will appear in all others. To do so, we use a helper program which accepts connections on port 4321. Any input on a connection is echoed to all other connections. Since this is like a simple "chat" program, I call it "chatServer", although we'll be using it to broadcast characters encoding graphics events, rather than text.

You are given the Java file chatServer.java.
Compile it:
% javac chatServer.java
Run the resulting application from your shell:
% java chatServer
(Note that it runs as a standalone program, not as an applet.)
To see chatServer in operation, do
% telnet localhost 4321
from several windows, or invoke
% telnet hostname 4321
from a different machine, where hostname is the machine on which the chatServer is running. Anything you type into any of the telnet windows should be echoed to all others. Exit each of the telnet sessions by typing
control-] quit.
Then, with the chatServer still running, start up several drawing applets as before:
% appletviewer draw.html
Connect each applet to the chatServer by moving the mouse into the text field of each connection window (which should read localhost) and pressing the Enter key. (If the applet is running on a different machine from the chatServer, you will need to explicitly enter the latter's hostname.)
Now draw in one applet, and the results should be echoed to all other applets.
Kill the chatServer using ctrl-C in the invoking shell.

Program Internals

Draw is an applet that lets you draw lines, ovals, text, and colored circles on the screen. In addition, it allows you to connect multiple drawing programs together over the network to provide a collaborative drawing environment.

The program is structured as multiple object-oriented classes:

Draw: this is the top-level class and extends the Java Applet class. This class provides a top-level window and user interface. The method Draw.init() sets things up, after which the Draw class simply waits for, then processes, user events.

DrawingCanvas: this class extends the Java Canvas class. It provides a double-buffered drawing area using instances backingImg and backingGraphics of the Image and Graphics respectively. Mouse and keypress events are passed to an object that does the actual drawing.

DrawObject: this superclass and its subclasses do most of the work. A DrawObject processes mouse events and causes appropriate primitives to be rendered to the DrawingCanvas. In addition, this class provides remote drawing support by transmitting and receiving strings which encode other sessions' events. This class is subclassed to provide operations such as DrawLine, DrawCircle, etc. Each of these classes must implement the mouseDown(), mouseUp(), mouseDrag(), and keyPress() methods (which are abstract classes in the DrawObject base class, the equivalent of pure virtual methods in C++).

DrawConnection: this class waits for incoming remote drawing invocations. It extends the Java Thread class, so it runs as a separate thread; otherwise the Draw applet would hang while DrawConnection waited for incoming data.

The User Interface

The user interface is defined in Draw. The screen is divided into three parts: a Panel of buttons (instance variable buttonpanel) to the left, the DrawingCanvas to the right, and a Panel of option controls on the bottom. The buttonpanel contains buttons for the different drawing modes. The optionpanel (an instance of Panel) contains a Choice to select the color, a Checkbox to select fill mode, a TextField to specify the network connection, and various Labels.

Network Connections

The structure of the network connections is motivated by the implementation of Java security in applets and stand-alone applications. An applet can't listen on random sockets, but a stand-alone application can. Thus, a stand-alone application (chatServer) does the listening on sockets to tie the Draw applets together. Each Draw applet connects to the chatServer; each applet sends its encoded drawing events to the chatServer, which relays the events to all other applets.

Note: an applet running with appletviewer can connect to any host, but an applet running under Netscape can only connect to the same host that is providing the applet. Thus, if you load the applet's page locally with a path //localhost/..., you must specify localhost as the hostname. However, if you load the applet's page from foo.mit.edu, you must run the chatServer on foo.mit.edu and specify foo.mit.edu as the hostname.