In this lab you will write a simple Java applet and a slightly more complex one. You will learn how to compile applets, test them, and add them to your web page.
The X Window System Version 11, or X11 for short, is the graphical user interface (GUI) to UNIX. It replaces the standard text console interface. The text console interface is basically what you see in your xterm window. However, if you were actually sitting at a UNIX machine with an X11 interface you would see that it's not all that different than the Windows machines you are sitting at right now. A program called the X-server allows X11 applications in UNIX to display graphics (or windows) on your screen and handle events (like using the mouse).
A Windows-based X-server allows you to run X11 applications in UNIX from your Windows desktop. It converts Windows events (like using the mouse) to the equivalent X11 events and then sends the X11 graphics back to your Windows machine.
In this lab we are going to use the X-Win32 X-server for Windows. Go to Start->Programs->X-Win32 (it should be towards the bottom of your list). Select X-Win32. If the X-server starts successfully you'll see either a blue X icon in the task bar at the bottom of the screen or a dialog box which says "X-Win32".
Open up an xterm window, but don't log in yet!! Press cancel and go to the menu at the top. Go to Edit->Properties. Select Tunneling. Enable X11 Tunneling by selecting the checkbox. Click OK. To log in simply press enter. In your cps001 directory, create a new directory lab4. Change into your cps001/lab4 directory.
If you enabled X11 tunneling as described above, you should be able to log in and have XEmacs (and other applications) displayed back to your machines.
To see if this will work, type
echo $DISPLAY
in your xterm window. You should see something like teer12.acpub.duke.edu:14.0. If you see something about an UNDEFINED VARIABLE, then your setup didn't work. Try again to enable X11 tunneling, then ask for help. If you do see the DISPLAY environment variable then you can simply type
xemacs &
to have XEmacs run and display on your machine. Make sure to include the "&" at the end. The ampersand (&) runs XEmacs in background so that your shell still functions. It will take a little while to load up, so don't be impatient, and when it does get there you'll have to drag it around and pull its edges a little to see it all at once. Get a TA if you have trouble with this.
XEmacs is the name of the most popular text editor for UNIX systems. XEmacs is specialized for computer programming, and it's what we will use for the rest of this semester. Right now, we will get accustomed to XEmacs by opening and compiling a pre-written Java applet. Get a copy of HelloWorld.java by typing
cp /afs/acpub.duke.edu/project/web/cps001/code/HelloWorld.java .
Don't forget the trailing dot: ".".
If you failed to open XEmacs as you were instructed, you won't find anywhere to type the above line. This is what you need to do: Make sure you saved everything in XEmacs, close it by selecting the menu item File->Exit XEmacs, and then re-open XEmacs, this time with the "&" after it. Then copy the HelloWorld.java file.
OK, now, whether you got it right the first time or had to do the paragraph above, do this: Type ls to make sure you copied the file correctly. While you're at it, type pwd to make sure you are in your cps001/lab4 directory. If you aren't, get there, and copy the file from wherever you put it.
Now we are going to open the file we just copied (HelloWorld.java) in XEmacs. Go to your XEmacs window. Click the Open icon. A window will pop up with the list of files in your directory. At the bottom, where it says Find file:, type HelloWorld.java. You should see the code appear in your XEmacs window.
Note: XEmacs may pop up a window that says at the bottom "minibuffer already active...press '^]'", or something like that. Hold down the Ctrl key and hit the ] key (that's the right square bracket, above the Enter key). The window should disappear. Now try again, and it should work.
For future reference, when opening XEmacs from your xterm you can type
xemacs filename &
The file name ("filename") following the xemacs command is the name of the file you'll start with when XEmacs begins running. You can always open new files later, but this streamlines things just a little bit. If the file filename doesn't exist already, then XEmacs creates a file with that name for you.
Look at the code once more. Note that at the top of the file you can fill out:
MAKE SURE YOU FILL THIS TOP PART OUT FOR EVERY PROGRAM YOU TURN IN!! This applies to all future labs.
After you have done this, you are now ready to compile. Compile means to translate a written program to a format the computer can understand. XEmacs has a Compile icon that will do this for you. The first time you compile, a window will pop up, and there will be a line that reads Compile command: make -k. Click the button that says Edit command. In the minibuffer at the bottom of the XEmacs window, backspace over the make -k and replace it with javac filename. In this case, filename is HelloWorld.java -- for other programs, it will obviously be different. To change the compile command, go to the menu item Tools and select Tools->Compile. In the minibuffer it will let you backspace over the current command and type in a new one. When you compile, XEmacs splits into two frames. One still contains your code, and the other will display the output of the Java compiler. If all you get for output is Compilation finished at ... then your code compiled just fine. We'll talk about error messages later!
Once successfully compiled, the code is automatically saved in a file called HelloWorld.class. In your xterm window, list the files in your /cps001/lab4 directory by typing ls to confirm it is there.
To run our applets on the WWW, you need to create an HTML document to serve as its wrapper. Click the Open icon, and open a new file called HelloWorld.html.
Note: XEmacs may prompt you at the very bottom of the screen to enter a "Document Title." If so, hold down the <Control> key and press "g". Then select Buffers at the top of the XEmacs window and from the drop-down menu, choose HelloWorld.html.
Type in the following HTML:
<html>
<body>
<applet code="HelloWorld.class" width=500 height=50>
</applet>
</body>
</html>
Save the file by clicking the Save icon. We will use appletviewer to view the HelloWorld Java applet and associated HTML wrapper. To see what the HelloWorld Java applet looks like, type
appletviewer HelloWorld.html
If something goes wrong, first make sure that you compiled HelloWorld.java, you have a HelloWorld.class file, you saved your HelloWorld.html file, and that all the files are in the same directory. If all this checks out and you are still having problems, yell for help.
You now are familiar with manipulating files using XEmacs, compiling applets, creating a HTML wrapper for an applet and viewing the applet. Most of your programming in this class will follow the above steps -- although you will actually have to write the applet yourself from now on! In more complicated programs, you can expect the "edit, compile, test" steps to repeat several times before the program works as you intended.
Now that you understand the basic process for creating an applet, you are ready to design an applet for the decision tree from your Prelab. We will give you most of the code you will need to turn your decision tree drawing into a working program. To copy these files into your cps001/lab4 directory, type
cp /afs/acpub.duke.edu/project/web/cps001/code/DecisionTree.* .
Check to make sure the files are there. Now open the file DecisionTree.java in XEmacs. The Java code you should be looking at is similar to the code in the book. It had the name NobelAdvice.java then.
Note: In every lab, you will be given the name you must use for your program files. If you name them anything else, you'll lose some of the points for that lab.
Here is an outline of what is happening in the Decision Tree applet, that is, what would have been your process if you wrote the code yourself. Pay close attention, because next week you have to do more work on your own.
Name your class.
Reserve variable names (a TextField, several Buttons, and an integer to remember what question you're on).
Write the init() method, which should create a new TextField and new Buttons, add them to the screen, and set the question number variable. It should also call the addActionListener(this) method on each of your Button objects.
Write the actionPerformed(ActionEvent event) function. This function will be run whenever someone presses one of the buttons in your applet. In this function, you need to use an if statement to see what button was pushed and what question you are on. Then set the contents of the TextField and the labels of the Buttons as appropriate.
Look at DecisionTree.java and note what lines would need to change to make your own decision tree. Begin by simply scrolling through the code and substituting in your own questions and answers where appropriate. After you are done, compile your code. If you get compile errors, you need to fix them. There will be a list of errors that the compiler will output. It will tell you the line number in the file where it found the error. Here is an example of what the compiler says when it finds a class name it doesn't recognize:
HelloWorld.java:11: Class TextFied not found.
m1 = new TextFied(80);
^
1 error
Compilation exited abnormally with code 1 at Fri Sep 20 03:30:33
The actual error is that the class name TextField is misspelled. Notice that there is an "arrow" (^) that points to TextFied. It also says the line number in the file where it found the error -- in the file HelloWorld.java at line 11.
Do your best to go through your errors and try to fix them. Start with the top error, attempt to correct it, and compile again. Then move to the next error and do the same thing. Sometimes fixing the first error will make some of the ones below it disappear, so it's best to start at the beginning and go through them one at a time.
Once your compile is error-free, create an HTML page DecisionTree.html that references the Decision Tree applet. View your new decision tree with:
appletviewer DecisionTree.html
Test out all the possible response combinations to make sure it works exactly as intended. Applets that don't work correctly will lose credit.
For full credit, you need to do the following:
Change the decision tree in some original manner.
Add at least one of the following functional improvements
Compile your program successfully (no compile errors!)
Test all the possible response combinations.
Correctly submit your files. Don't forget to fill out your info at the top before you submit.
Submit your DecisionTree.class, DecisionTree.java and your DecisionTree.html files. Here is the command:
submit_cps001 lab4/sec# DecisionTree.class DecisionTree.java DecisionTree.html
Make sure to submit all the files at one time. Do not submit each one separately! You can check to see what was last submitted by typing submit_cps001 lab4/sec#. If you did things correctly you should get a message like this:
assignment 'lab4/sec1' submitted 1 times
size name
---- ----
(1) 446 DecisionTree.html
(2) 384 DecisionTree.java
(3) 536 DecisionTree.class