CSCI A348/548
Lab Notes Seven

Fall 2000

Installing Java applets.
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 lab7) 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/httpd/htdocs/lab7
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/httpd/htdocs/lab7
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/httpd/htdocs/lab7
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.

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 to the user 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.

8. Answer this question: can you do the same with JavaScript.

If no, why?

If yes, how, and is that approach better or worse?

Remember, this won't be on the exam, but it's an anticipation of the next assignment.

Last updated on October 11, 2000, by Adrian German for A348/A548