CSCI A348/548
Lab Notes Six

Spring 2001 (Second semester 2000-2001)

Applets

Welcome to Lab Six!

We first "create" an applet, and install it on our website.

1. Create the source code of the applet.

For the purpose of this lab you will get the source code from me. We will install a fairly complex applet, and we will ignore the source code for now.

Take the following files 

/u/dgerman/fall2000/lab7/Matrix3D.java
/u/dgerman/fall2000/lab7/XYZApp.java
from my home directory and put them in a special directory (called lab6) under your document root directory of your web server. Once you copy them you have the source code; that makes it as if you have written the source code yourself.
Here's how you do that: 
burrowww.cs.indiana.edu% pwd
/nfs/paca/home/user1/dgerman/apache/apache_1.3.14/htdocs/lab6
burrowww.cs.indiana.edu% cp /u/dgerman/fall2000/lab7/Matrix3D.java .
burrowww.cs.indiana.edu% cp /u/dgerman/fall2000/lab7/XYZApp.java . 
burrowww.cs.indiana.edu% ls -l
total 20
-rw-r--r--   1 dgerman  students     6327 Oct 11 09:32 Matrix3D.java
-rw-r--r--   1 dgerman  students    13161 Oct 11 09:32 XYZApp.java
Please don't overlook the dots (.) at the end of the commands. Thank you.

2. Compile them (prepare the bytecode).

Use javac to compile the source code. This will create a number of .class files that may or may not be in one-to-one with the source code (java) files. The number and names of the .class files can be deduced from the actual contents of the source code files. Of those created XYZApp.class is the main file and we need to make a note of that.
Here's how you do that: 
burrowww.cs.indiana.edu% pwd
/nfs/paca/home/user1/dgerman/apache/apache_1.3.14/htdocs/lab6
burrowww.cs.indiana.edu% ls -l
total 20
-rw-r--r--   1 dgerman  students     6327 Oct 11 09:34 Matrix3D.java
-rw-r--r--   1 dgerman  students    13161 Oct 11 09:34 XYZApp.java
burrowww.cs.indiana.edu% javac *.java
Note: XYZApp.java uses or overrides a deprecated API.  Recompile with "-deprecation" for details.
1 warning
burrowww.cs.indiana.edu% ls -l
total 35
-rw-r--r--   1 dgerman  students     2003 Oct 11 09:35 Atom.class
-rw-r--r--   1 dgerman  students     3683 Oct 11 09:35 Matrix3D.class
-rw-r--r--   1 dgerman  students     6327 Oct 11 09:34 Matrix3D.java
-rw-r--r--   1 dgerman  students     4580 Oct 11 09:35 XYZApp.class
-rw-r--r--   1 dgerman  students    13161 Oct 11 09:34 XYZApp.java
-rw-r--r--   1 dgerman  students     3762 Oct 11 09:35 XYZChemModel.class
burrowww.cs.indiana.edu%
Please note there is a warning. The reason is that this is a very old, very famous applet, using the very first (1.0) Java API. It does not matter, and once we know that we can move on. We will talk more about that later. If your class files are created, move to step 3.

3. Prepare an .html file to distribute the applet.

Create an HTML file (call it index.html) in the same directory that has an applet tag inside it that looks like this: 
<applet code=XYZApp.class width=100 height=100>
<param name=model value=models/benzene.xyz> 
</applet>
Notice the param tag. It communicates important data to the applet, without which the applet won't run.

4. Prepare data for the applet.

Create a directory models inside the folder that contains your Java applets code. Copy all the *.xyz files from 
/u/dgerman/fall2000/lab7
to your models directory. They contain important rendering information for the applet. The fact that the applet is taking this info from a file is part of the actual design of the applet (it's a decision of the original program writer).
Here's how I did it: 
burrowww.cs.indiana.edu% pwd
/nfs/paca/home/user1/dgerman/apache/apache_1.3.14/htdocs/lab6
burrowww.cs.indiana.edu% ls -ld models
ls: models: No such file or directory
burrowww.cs.indiana.edu% mkdir models
burrowww.cs.indiana.edu% ls -ld models
drwxr-xr-x   2 dgerman  students      512 Oct 11 09:40 models
burrowww.cs.indiana.edu% cp /u/dgerman/fall2000/lab7/*.xyz models
burrowww.cs.indiana.edu% ls -l models
total 11
-rw-r--r--   1 dgerman  students     3674 Oct 11 09:40 HyaluronicAcid.xyz
-rw-r--r--   1 dgerman  students      269 Oct 11 09:40 benzene.xyz
-rw-r--r--   1 dgerman  students     2317 Oct 11 09:40 buckminsterfullerine.xyz
-rw-r--r--   1 dgerman  students      460 Oct 11 09:40 cyclohexane.xyz
-rw-r--r--   1 dgerman  students      170 Oct 11 09:40 ethane.xyz
-rw-r--r--   1 dgerman  students       66 Oct 11 09:40 water.xyz
burrowww.cs.indiana.edu%

5. Check your applet over the web.

You should see something like this.

(Or, a more recent version, i.e., this one here).

Remember to use your mouse to rotate the 'benzene' molecule. The HTML doesn't say anything about that (although it should).

6. Improve your HTML interface.

Describe what the page contains and what the user needs to do to interact with it.

7. Show all other molecule models.

I'll let you figure out how.

Now that we have seen this, let's include in our web page an applet from another site.

Take a look at this example from O'Reilly.

Last updated on Feb 14, 2001, by Adrian German for A348/A548