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.Here's how you do that:
Take the following filesfrom my home directory and put them in a special directory (called/u/dgerman/fall2000/lab7/Matrix3D.java /u/dgerman/fall2000/lab7/XYZApp.java
lab11) 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.
Please don't overlook the dots (.) at the end of the commands. Thank you.burrowww.cs.indiana.edu% pwd /nfs/paca/home/user1/dgerman/apache/apache_1.3.20/htdocs/lab11 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 faculty 6327 Oct 11 09:32 Matrix3D.java -rw-r--r-- 1 dgerman faculty 13161 Oct 11 09:32 XYZApp.java
2. Compile them (prepare the bytecode).
UseHere's how you do that:
javacto compile the source code. This will create a number of
.classfiles that may or may not be in one-to-one with the source code (
java) files. The number and names of the
.classfiles can be deduced from the actual contents of the source code files. Of those created
XYZApp.classis the main file and we need to make a note of that.
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. If not, what are you waiting for?burrowww.cs.indiana.edu% pwd /nfs/paca/home/user1/dgerman/apache/apache_1.3.20/htdocs/lab11 burrowww.cs.indiana.edu% ls -l total 20 -rw-r--r-- 1 dgerman faculty 6327 Oct 11 09:34 Matrix3D.java -rw-r--r-- 1 dgerman faculty 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 faculty 2003 Oct 11 09:35 Atom.class -rw-r--r-- 1 dgerman faculty 3683 Oct 11 09:35 Matrix3D.class -rw-r--r-- 1 dgerman faculty 6327 Oct 11 09:34 Matrix3D.java -rw-r--r-- 1 dgerman faculty 4580 Oct 11 09:35 XYZApp.class -rw-r--r-- 1 dgerman faculty 13161 Oct 11 09:34 XYZApp.java -rw-r--r-- 1 dgerman faculty 3762 Oct 11 09:35 XYZChemModel.class burrowww.cs.indiana.edu%
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:Notice the<applet code=XYZApp.class width=100 height=100> <param name=model value=models/benzene.xyz> </applet>
paramtag. It communicates important data to the applet, without which the applet won't run. (Also, you're responsible for the rest of the HTML in the file).
4. Prepare data for the applet.
Create a directoryHere's how I did it:
modelsinside the folder that contains your Java applets code. Copy all the
*.xyzfiles fromto your/u/dgerman/fall2000/lab7
modelsdirectory. 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).
burrowww.cs.indiana.edu% pwd /nfs/paca/home/user1/dgerman/apache/apache_1.3.20/htdocs/lab11 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 faculty 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 faculty 3674 Oct 11 09:40 HyaluronicAcid.xyz -rw-r--r-- 1 dgerman faculty 269 Oct 11 09:40 benzene.xyz -rw-r--r-- 1 dgerman faculty 2317 Oct 11 09:40 buckminsterfullerine.xyz -rw-r--r-- 1 dgerman faculty 460 Oct 11 09:40 cyclohexane.xyz -rw-r--r-- 1 dgerman faculty 170 Oct 11 09:40 ethane.xyz -rw-r--r-- 1 dgerman faculty 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.