CoSc 200 Laboratory #1

An Introduction to Java, the Objectdraw Library, and JCreator

This lab is intended to introduce you to the tools with which you will be working as you learn to program in Java this semester. The task you complete during the lab will be fairly simple. You will construct a Java program that draws an image resembling a roadside warning sign with a message more appropriate for a computer screen than a roadside.

Your first goal will be to simply organize yourself. Second, you will plan how your sign will look. Finally, you will incorporate the image into a Java program that modifies the picture in simple ways in response to actions the user performs with the mouse.

Part 1. Organize Yourself

You will be creating, editing, and turning in a large number of files for this course. So, you need to start out organized.

  1. Create or Find Your Course Folder. Use Windows Explorer to create or find (if you created during a lecture) a folder named "cosc200" within your M: drive. You may wish to use a different name, and you may place the folder anywhere on your M: drive (e.g., within your "My Documents" folder). You should save all of your course related files here.

  2. Create a Laboratory Folder. Within your course folder, create a folder for files generated while completing this lab. You could name the folder "lab01".

  3. Explore the Primary Course Web Site. Use a web browser, such as Mozilla or Internet Explorer, to visit http://www.goshen.edu/~dhousman/cosc200. You should see the main course information page. If you have not done so previously, read this important information about the course.

  4. View the Blackboard Course Web Site. Use a web browser to visit the Blackboard course web site at https://courses.goshen.edu. Use your email password to log in. Here you will find solutions to exercises in the text, email access to other students in the course, a course discussion board, the place to submit your laboratory assignments, and your current grades. Post a message to the "Introductions" section of the discussion board that answers the questions asked there (this is worth 2 points of your 20 point lab grade).

  5. Obtain Lab01 Description. Navigate to the Schedule page on the primary course web site. Click on the Lab01 topic link. This will take you to the full on-line version of this handout. After you complete the next part, come back here in order to complete the lab.

  6. Obtain files necessary for the lab. Download the ObjectDrawTemplate.java and ObjectDrawTemplate.htm files from the "Links" page to your laboratory folder. Change these names to Sign.java and Sign.htm, respectively.

  7. Check Your File Structure. You should have a course folder "cosc200", which contains the laboratory folder "lab01", which contains the three downloaded files. You may have used different names for your course and laboratory folders. Have this checked by the instructor sometime during the lab period (this is worth 1 point of your lab grade).

Part 2. Plan Your Applet

Here is an example of the type of applet you will create. Interact with it while reading the specifications for your applet.

Your applet must meet the following specifications:

  1. It must display text, lines, framed rectangles, filled rectangles, framed ovals, and filled ovals in an aesthetically pleasing manner when it starts. The example displays the text "COMPUTER SCIENCE" and "IS FUN!", a line forms the base, a blue filled rectangle forms the sign's pole, another filled rectangle forms the background of the sign, a framed rectangle forms a border for the sign, a framed oval serves as decoration on the sign, and a filled oval is used for the ball that lies on the ground.
  2. It should change at least one graphical object when the mouse is pressed and restore the original picture when the mouse is released. The example moves the ball to the right and back to the left.
  3. It should change at least one other graphical object when the mouse leaves and enters the canvas. The example changes the text that is shown and the color of the sign's background.
  4. It should have at least one graphical object that is colored different from black and never changes. The example has the blue filled rectangle forming the sign's pole that never changes.

Now it is time for you to plan your applet.

  1. Take out a blank sheet of paper. Graph or lined paper would help with the scale.
  2. Make a hand sketch of what you would like your sign to look like. The start of a sketch for a sign hung down from a bridge is shown to the right. Be creative!
  3. Include coordinates on your sketch.
  4. Describe in words what change(s) will occur when the mouse is pressed and released.
  5. Describe in words what change(s) will occur when the mouse leaves and enters the canvas.

Have the instructor check your plan during lab. This check is worth 2 points of your lab grade.

Part 3. Writing a Java Program

Now, you will construct a Java program based on your plan. You will do this using a program named JCreator, an integrated development environment, which provides everything you need to type in, compile, and run Java programs.

The construction of a single Java program involves the use of several files. One file will contain the actual text of your program written in the Java programming language. Another file is required to tell the Java system runtime details like the size of the window your program should be given. This file is written in the notation used to describe web pages, HTML, since the form of Java programs you will be writing, applets, can be embedded in web pages. In addition, access to many of the facilities of Java and our graphics system are provided through the objectdraw library.

Setting up all these files can be complicated. So, to simplify your task you have already downloaded the ObjectDrawTemplate files and renamed them "Sign.java" and "Sign.htm". Open "Sign.java" in JCreator. If it appears, close the "Tip of the Day" window. It should look something like this:


Actually, the name of the class is probably "ObjectDrawTemplate" rather than "Sign". You should make this change. The text we have placed in "Sign.java" is just the skeleton of a complete Java program. We have included the header for the definition of a class "Sign" that extends "WindowController" and within this class we have typed headers for the event handling methods you will want to use during lab. We have not, however, included any Java commands within the bodies of these methods.

Within the "Sign.java" window, JCreator provides the capabilities of a typical word processor/text editor. You can position the cursor using the mouse or arrow keys. You can enter text by typing. You can also cut, copy, and paste text using items in the edit menu or the shortcut keys Ctrl-X, Ctrl-C, and Ctrl-V, respectively.

Begin writing your program by typing comments rather than actual Java commands. At the top of the file, type the purpose of this applet, your name as the author, and the date for the version. Such identifying comments are always good practice. By the time you have completed your applet, you should also include an acknowledgement statement such as "I did not work with anyone" or "I discussed a little bit of this with Chen, Sue, and the TA."

We now turn our attention to when the applet starts. Above the signature line for the "begin" method (i.e., public void begin()), type a comment describing, in general terms, what this method is suppose to do. Now add the single instruction needed to draw the rectangle that frames the contents of the sign. The form of the command you will need to enter is:

new FramedRect(  ..., ..., ..., ..., canvas);
where all the little dots need to be replaced by the numbers describing the position and size of the rectangle. You should be able to obtain these numbers from your sketch. This line should be placed immediately after the signature line of the "begin" method and just before the line containing the "}" that ends the method body. A good way to insert this line is to place the cursor at the end of the signature line (i.e., just after the "{") and press the "Enter" key. Notice how JCreator automatically indents. Appropriate indentation makes code easier to read and understand.

Now that your method does something, it would be a good idea to test it. Testing requires compilation and execution. Compilation translates your Java program into a more primitive language that is easier for the machine to actually understand. Select the "Compile File" item from the "Build" menu or click on the compile icon. Note that you don't have to "Save" the changes you made before you compile your program. JCreator automatically saves them for you when you select compile. As a result, those of you who are in the (usually) good habit of saving your work regularly, may sometimes discover that the "Save" item in the "File" menu is disabled (gray instead of black) when you don't recall recently saving your work. When this happens DO NOT select "Save as". Just trust that JCreator has saved your work for you. Selecting "Save as" often leads to situations in which you will lose parts of your code.

While compiling the program, JCreator may discover one or more grammatical or typographical errors in your program. If errors are discovered, JCreator will abort the compilation and display error messages in a window that looks like:


Descriptions of the errors found are shown in the bottom portion of the window. Summaries are given the the "Task List" pane and more details are given in the "Build Output" pane. Double clicking a description will mark your code on, or just after, the line where the compiler found the error. For example, the problem with the program displayed is that a semicolon is missing at the end of the line. Unfortunately, the descriptions presented are not always that clear. If you cannot decipher the error messages you receive, ask an instructor or assistant for help.

Since JCreator really doesn't know how to correct your errors, a single error can leave it sufficiently confused that it reports many errors. As a result, if after correcting a few errors, the remaining errors don't seem to make sense, they probably don't. They are just a result of JCreator's confusion. When you think you have reached this point, select "Compile" again from the "Compiler" menu. If JCreator does not display errors, then you will know you were right. Even if errors do appear, the errors you did fix may have cleared things up enough that JCreator will be able to produce more understandable messages.

Once you have corrected any typing mistakes and JCreator compiles your program, the net effect is the creation of a "Sign.class" file, which may be seen from Windows Explorer.

With the program successfully compiled, it is time to try executing the program. This program, known as an applet, must be started from a web page that includes appropriate HTML code. The appropriate code has already been placed in the web page file "Sign.htm". Select the "Open" item from the "File" menu or click on the open file icon. Change the "Files of type" dropdown box to "Html files". Double click on the "Sign.htm" file. The following text should now appear in JCreator:

<applet code="ObjectDrawTemplate.class" 
	width=400 height=400>
</applet>

You should change "ObjectDrawTemplate" to "Sign".

This code is saying to start the applet "Sign" displayed in a window that is 400 pixels wide by 400 pixels tall. To run this program from within JCreator, select the "Execute File" item of the "Build" menu or click on the execute icon. A new window similar to the one pictured on the right should appear on your screen. This is your program's window. You can quit this program by clicking on the "close" button. Check to make sure that your program is doing what you expect it to do. If not, go back to JCreator and examine the instructions you typed carefully to see if you can notice any mistakes. If you can, correct them and select "Compile" and "Run" again. If not, ask another student, an assistant or the instructor for assistance.

Notice that when you ask JCreator to execute your program, it does start up a new program that is separate from JCreator. While this program is running, you can return to JCreator by just clicking on any portion of a JCreator window that is visible on your screen. It is a good idea, however, to "Quit" the old copy of your program that JCreator created before asking JCreator to execute your program again and create a new copy.

Once your rectangle program is working, you should add more instructions to turn it into your planned sign applet. The types of instructions you will need are discussed in chapter 1 and the first few sections of chapter 2 of your text book. Some were discussed in lecture on Wednesday and some more will be discussed in lecture on Friday. As you work, it is a good idea to "Compile" and "Execute" your program every time you add a line or two just to ensure that you catch mistakes early. Before you place instructions in the other methods, be sure to add comments to these methods that describe, in general, what they are suppose to do.

Before you submit your work for grading, check it yourself with the grading rubric given in the next section. You should be able to predict exactly what grade you will receive.

Grading Point Allocation

Points for a lab will be earned preparations, correct functionality, and appropriate style. This lab is worth 20 points, which are distributed as follows:

Value

Feature
  Preparations
2
Informative message posted to introductions section of discusion board.
1
File folder organization checked by instructor.
2
Hand sketch of the proposed appearance of the canvas checked by instructor.
  Functionality
2
Displays at least one each of text, line, framed rectangle, filled rectangle, framed oval, and filled oval in an aesthetically pleasing manner when the program starts.
2
Changes at least one graphical object when the mouse is pressed and restores the original picture when the mouse is released.
2
Changes at least one graphical object when the mouse exits the canvas and restores the original picture when the mouse reenters the canvas. This change must be different from the mouse press change.
1
Has at least one graphical object that is colored different from black and that never changes.
  Style
2
Uses meaningful names for variables. For example, "border" is a better name than "x" for a filled rectangle that serves as the border around a sign.
3
Includes informative comments. In particular, there is a description of the program, the author's name, a date, and an acknowledgement statement at the top of the file, and above each method is a description, in general terms, of what that method does.
1
Uses good and consistent formatting. Specifically, indentation is appropriate.
1
Does not unnecessarily construct graphical objects. It is better to hide and reshow an object than to destroy and recreate.
1
Declares variables with appropriate scope. That is, variables that are only needed within a single method are declared local to that method, while variables that are needed in more than one method are declared as private instance variables.

Submitting Your Work

Before you submit your work, make sure it is ready to submit by going over the grading rubric in the previous section. To submit your work, do the following:

  1. From a web browser, go to the Blackboard Course Web Site at https://courses.goshen.edu.
  2. Click on the "Laboratories" link.
  3. Click on the link View/Complete Assignment: Lab01.
  4. Under "Assignment Materials," click the Browse button.
  5. Select your Sign.java file. That is the Sign.java file, not the Sign.class or Sign.htm or any other file.
  6. Click the Open button. The full path name of your Sign.java file should appear in the File to Attach text field.
  7. Type anything you want in the Comments text box. Note that I do not always read these comments. If you want to have me read something while grading your lab, please include it as a comment near the top of your Sign.java file.
  8. Click on the Submit button. The message " The assignment has been updated." should appear.

Submission Deadline: 3:00pm on Tuesday, January 10. Note that once you submit, it is impossible to submit a revision.

Resubmission and Late Submission Deadline: 3:00pm on Tuesday, January 17. A 5 point penalty will be assessed for a resubmission or late submission. These should be submitted to Lab01Late.

Optional: Putting Your Work on a Web Page

You can show the world the fruit of your labor. However, since not everyone in the world knows about the ObjectDraw library, you need to do a little bit more work.

Optional: Java Without JCreator

You can edit "Sign.java" using any simple text editor such as Notepad. Make sure that the file is saved as plain text. In a "Command Prompt" or "MS-DOS Prompt" window, change to the directory of the "Sign.java" file. If you named and placed your files in the same place as I did, this can be done by entering at the prompt

cd "M:\My Documents\cosc200\lab01"

To compile, enter at the prompt

javac Sign.java 

To run, enter at the prompt

appletviewer Sign.htm