This week, for the third week in a row, you will devote your time in lab to becoming familiar with the operation of software tools we will be using as the semester goes on. Your subject this week will be the Metrowerks Java Programming Environment. This is the last of the major software application we will be using in the course. So, this is the last of this series of "introductory" labs.
Because Java programming will require more background from class before we can expect you to do a lot independently, this lab will differ from the preceding weeks in that there will be no part II. All you have to do for lab this week should be completed by the end of the period (we will still give you until the usual deadline for your lab to turn your work in).
During the lab period you will construct two simple Java applets using the Metrowerks system. As you change the instructions to the computer contained within your applet, you will use the Metrowerks software to test the behavior of your applets. Once finished, we will guide you through the process of making your applets a part of a web page and then you will test them using a web browser rather than the Metrowerks application.
If you have questions about the instructions for this lab, you are encouraged to ask them through the discussion area for this lab in the course discussion forum.
As one divides books into sections and chapters, a Java applet can be divided up into several files of instructions to the computer and each file is further subdivided into short groups of instructions called "methods". The Metrowerks software we will be using this semester enables you to work with such files of Java methods in several ways.
First, just as we used PageSpinner to enable us to enter and edit the text of HTML files, we will use Metrowerks to enter and edit the text of Java applets. The Metrowerks editor knows the rules of the Java language's grammar. Using this knowledge, it will format your program to make it more readable somewhat as PageSpinner formatted HTML text. Metrowerks, however, does not provide lots of menu items for inserting pieces of Java code. Most of your code will be entered by simply typing.
Second, before a computer can follow the instructions you write in an applet, they must be translated from Java into a more primitive language the computer can interpret more readily. Metrowerks performs this translation process. It is in this more primitive language, known as Java Virtual Machine code, that your applet will actually be sent through the Internet to remote browsers.
Finally, while Java applets are ultimately designed to be included in web pages where the instructions they contain can control the information presented in a browser's window, Metrowerks provides a way to test your applet by previewing the way it will behave without using a browser.
In order to perform all these functions, Metrowerks needs to keep track of many files. First, there is the file or files in which you place your Java instructions. Second there are the files in which the results of translating your applet into Java virtual machine code are stored. These are called Java archive or ".jar" files. In addition, there may be pre-written java code or class files an applet relies on.
To keep track of all these files, Metrowerks depends on yet another file called the "project" file. Within this file Metrowerks stores all the information it needs to find the other files together with information about their current condition. You will almost always start Metrowerks by double-clicking on a project file. This enables it to easily find all the files needed for your applet.
To make it easy to get your Java files and project file organized correctly in the first place, we will typically give you a folder containing skeletal versions of all the files you need and then let you "fill in the blanks". You will, however, need to be careful when working with these folders. If you change the name of a file by clicking on its icon and typing a new name, this change won't be reflected in the Metrowerks project file. The next time you double-click on the project file, Metrowerks won't be able to figure out where the file you renamed went. Accordingly, the safest thing to do until you become quite expert at working with Metrowerks is to avoid renaming, deleting or adding files within a project folder.
To start this lab:
Once Metrowerks gets started a window resembling the image shown below should appear on your screen.
This window describes all the elements associated with your applet that Metrowerks is "managing".
The two elements of interest to you at this point are the items named "AppletMethods.java" and "DisplayApplet.html". The first is a skeletal framework for a Java applet. In the next few steps you will get to fill in the framework a bit to make the applet do something a bit more interesting that it does in its current form. The second file is the minimal HTML for a web page including the applet as an element.
To get ready for the next step, point the mouse at the file name "AppletMethods.java" in the "JavaSample" window and double click. A window containing the text of our skeletal applet should appear.
The first actual line of Java in the file you are looking at is:
public class AppletMethods extends AppletTemplate
This line identifies your file as the instructions that will form an applet named "AppletMethods". Immediately after this line you will notice an open brace, "{". As you program in Java you will have to get used to both open braces and close braces, "}". Just as HTML likes to nest information within pairs of matching tags (like <P> and </P>), Java uses braces to surround regions of text that form logical units.
The rest of the file is a list of "method specifications". Each of these associates actions to be performed with some event that might occur. For example, the second method looks like:
/* Specifies how to react when the mouse button is depressed */
public void mouseDown() {
pen.drawString("Some Short Message");
}
The first line of this method is actuallly not Java code. Anything enclosed within a pair of "/*" and "*/" delimiters is interpreted as a comment to clarify the code to human readers but to be ignored by the computer. The line that looks like:
public void mouseDown() {
The lines following the method header up to the closing brace that matches the open brace on the header line are known as the "method body".
The "mouseDown" method included in this file states that when the mouse button goes down, any computer viewing this applet should display ("draw") a simple message on the region of the screen associated with the applet. At this point, the message that would appear will actually be the words "Some Short Message". You might as well start your programming career now by:
When you released the mouse within the applet viewer, your message disappeared. This is the result of the instruction in the next method of the applet. This method is named "mouseUp" and it currently instructs the computer to clear the rectangular area in which the applet is viewed when the mouse button is released.
To get more comfortable working with Metrowerks, you should now experiment with some variations on the instructions placed in the methods of your applet. As a start, we will make the applet a bit more aware of the mouse's activities.
As written, the "mouseDown" method always draws its message in the middle of the screen. A slight change will make it draw the message where the mouse was clicked.
The pixels on a computer's screen can be identified precisely using a cartesian coordinate system. That is, we can associate x and y coordinates with each point on the screen. When the mouse button is pressed, the computer is willing to provide the coordinates of the pixel the mouse was pointing at to the method that responds to the button press. To use these values, the method just needs to tell the computer what names it would like associated with these numbers. This is done by adding "parameter declarations" to the method specification.
To add and then use parameters to the "mouseDown" method:
public void mouseDown(int x, int y) {
Now, we can use the names "x" and "y" to refer to the coordinates where the mouse is clicked. To do this:
pen.drawString("Your own message", x, y );
This actually illustrates an important property of Java. There are many parameters that can be included to control the details of how a string is drawn using the "drawString" primitive. You must, of course, specify the message. In the original version of mouseDown that was all we specified. If you wish, you can also specify a position at which to draw, and, as we will see later, a color to use. If any of these extra details are not included, suitable defaults are used. If the position is not specified, the text is centered in the applet's region of the screen. If no color is specified, black is used.
Now, run your applet again (select "Run" from the "Project" menu). If you made any typing mistakes, a window of complaints from Metrowerks about the grammar of your applet will appear instead of the "AppletViewer" windows. If you can identify the problem, edit the text to correct it and select "Run" again. If you have trouble spotting the mistake, ask your TA or instructor. Once the "Run" succeeds, click the mouse within the "AppletViewer" window to see the difference between this applet and the original. When you are done be sure to "Quit" the AppletViewer. Don't just click on the editor window to bring it to the foreground. If you do, windows corresponding to all the runs of your applet will pile up on your screen.
Now, let's move some of the commands in the applet around rather than modifying them.
pen.clearRect();
Before you proceed, take a moment to try to predict how the computer will behave when obeying these modified instructions. Then, select "Run" again and see what actually happens. Were you able to predict in? Once you have given the applet a try, select "Quit" to get back to the editor.
The skeletal applet we gave you to start with contains four additional (currently empty) methods:
By adding some instructions to these methods, we can produce a more responsive applet.
With the current version of your applet, the computer will often leave just a fraction of your message readable with the rest lost off the edge of the window when you move the mouse out of the window. Let's fix this by cleaning things up when the mouse leaves the window.
There are many more variations of these simple applets you could try. For those who are inspired, we include details of some other variations of the commands you have used and some additional commands you can include in a method at the end of this document. We encourage you to experiment with these possibilities on your own.
For now, however, we ask you to leave your applet as it is and move on to learn how to get it to run under a web browser as part of a web page. So, "Quit" both the "AppletViewer" and the Metrowerks editor leaving your computer back at the Macintosh desktop in the Finder.
Within the finder, locate the "FirstApplet" folder you copied to your CS bull account.
Double-click on the folder to open a window showing its contents.
Within this folder you will see a file named "AppletClasses.jar". Metrowerks created this file when you ran your applet. It contains the Java Virtual Machine version of the instructions that were in your applet. This file is what a web browser will need to access in order to know how to include your applet in a page.
PageSpinner provides relatively little support for including applets in pages. Luckily, Metrowerks has already done most of the work. Within the "FirstApplet" folder you will see a "DisplayApplet.html" file. This file contains the minimal HTML for a page containing your applet. Using PageSpinner, we can embellish it a bit to make a reasonable page. Unfortunately, since Metrowerks created the file you will end up in Metrowerks rather than PageSpinner if you double-click on "DisplayApplet.html". So, instead:
Within the "DisplayApplet.html" file you will see an "APPLET" tag and some tags that set up a link that can be used to load the Java code for your applet. Please leave the link alone. It will enable the graders to get a copy of your methods easily. Take a close look, however, at the APPLET tag.
This applet tag specifies four attributes: "code" which specifies the "class name" for the collection of methods that you want the browser to run, "archive" which identifies the file in which the browser can find the Java Virtual Machine code it needs, and "width" and "height" which tell the browser how much space to set aside for your applet within the page displayed. The "archive" attributes value can be any URL.
Use PageSpinner to add an appropriate heading and any text you would like to your applet's page. Add something so that when you visit your page you will get some sense of how the browser combines your applet with other elements (text and images).
Now, use PageSpinner to open your CS 105 labs web page and add a link from that page to the "DisplayApplet.html" page. Use the "browser" button on the PageSpinner toolbar to visit the labs page with Netscape and then take the link to visit your applet page. If something goes wrong, cry for help.
To give you a bit more experience with applets, we will now constuct an applet that implements a simple, active button for a web page.
Bascially, what we will do first is modify the applet so that it loads the picture of the button and displays it in the applet screen area.
The first method in the applet is named "begin". It is intended to hold actions you would like performed when an applet first becomes active. When the applet is used in a web page, this happens when the page is first visited. This is when the image should be loaded and displayed. So:
Image button = getImage("button.gif");
pen.drawImage(button,0,0);
The first command tells the applet to load the image. Uses of "getImage" are only allowed within the "begin" method.
The second command actually displays the image in the applet screen area.
To make things look better, we should shrink the applet window so that the button just fits. To do this,
Finally, to make the button "active", we will take two steps. We will add some code to make it change appearance when the mouse is moved into the button. We will also add code to load a new web page when the user clicks on the button.
pen.invertRect();
to the bodies of both the "mouseEnter" and "mouseExit" methods.
loadPage("http://www.cs.williams.edu/~tom/courses/105");
You will have noticed that clicking the mouse on the button still does not load a new page. That is because the Applet viewer is not smart enough to load a page. To test this behavior of your new applet, you will need to view the applet in a browser. So, add a link from your "cs105labs" page to the "DisplayApplet.html" page in the "ButtonApplet" folder. Use Netscape to display your cs105labs page and follow the new link to test the applet.
For more fun, copy the <APPLET...> and </APPLET> tags found in "DisplayApplet.html" to another of your .html files to add the active button to that page. To make it work, you will also need to place a copy of "AppletClasses.jar" and "button.gif" in the same folder as any .html file to which you add the applet.
The preceding sections describe all that you are required to do for this lab. There are a number of ways you could change your "FirstApplet", however, to make it more interesting (and to get more experience working with Metrowerks).
First, you can include instructions in the body of "begin" which will be followed when the page containing the applet first appears on the screen. You can use this to display a message when the applet first appears (rather than starting with a blank screen).
Second, you can add a "color" parameter to your "drawString" commands. For now, the available colors are "Black", "White", "Blue", "Green", "Red", and "Yellow". So, the command:
pen.drawString("Click here","Yellow");
You can also paint the background one of these colors rather than erasing it by saying
pen.fillRect("Blue");
Give some of these options a try and see how they work.