Lab Exercise 1
Implement and run a simple animation using Eclipse

This lab exercise will lead you through the basics of implementing and running a simple graphical applet stored within your AFS volume using Eclipse. This lab will also use a class located in an external jar file.

Creating a new Java project within your AFS volume

  1. Login to weise or miller using your indefinite account or your course account. If you do not know your indefinite account info, visit
    http://www.cs.uwm.edu/account/requestAcct.php
    to obtain your username and password.

  2. Optional. Change you CEAS password. Press Ctrl-Alt-Del and click ``Change Password...''.

  3. You need to authenticate with AFS in order to be able to access your files.

    The Windows way. There should be a small lock icon in the system tray on the bottom right of the screen. If there is red cross on the icon, double click on it and renew your credentials using the dialog which will pop up. If there is no red cross, you are alreday authenticated with AFS.

    The Unix way. There is script that will do this for you as well as set up a bash shell. To use the script enter the command

    source /home/cae3/adobkin/cs351.sh
    at the termnial. Alternatively, you may login to afs using the command
    /usr/afsws/bin/klog pantherid
    where pantherid is your panther ID. You can change your AFS password using the /usr/afsws/bin/kpasswd command.
  4. Open Eclipse. Tip: If you are using Windows, yout can retain you workspace between logins by putting in on the I:/ drive.
  5. Create a new project selecting File > New > Java Project.
  6. Provide a suitable project name (e.g. Lab1).
  7. Uncheck Use default location. If you can't find this option, you may be using an older version of Eclipse. In this case select the option Create a project from an existing source instead.
  8. Enter the following path:
    /afs/cs.uwm.edu/users/classes/cs351/80X/pantherid/lab/1
    where X is the lab section (1, 2, or 3) that you are in. This is a Unix path. If you are using Windows, you should use \\afs\ in all your paths instead of /afs/. In addition, you should use \ as the path separator instead of /.
  9. Use all other defaults.

Import the skeleton classes

  1. Expand the Lab1 project and right click on the src folder in the pane on the right and select Import....
  2. Select General > File System and click Next.
  3. In the From directory field, enter:
    /afs/cs.uwm.edu/users/classes/cs351/src/lab1
    and press the tab key.
  4. Click on lab1 folder on the right to select it. Put a tick in checkbox for the all files to be imported on the right and click Finish.

    All .SKEL files should be renamed to remove the .SKEL part. These files have parts of the code deleted. Your job is to complete the missing parts with your own code.

  5. Expand src and right click on SmileyFace.java.SKEL in the Eclipse Package Explorer window and select Refactor > Rename....
  6. Rename the file as SmileyFace.java and click OK. Ensure that the file is located in the src directory. Do the same for SmileyFaceApplet.java.

Add a reference to the external jar file

This lab project depends on lab1.jar. This file needs to be added to the build (and runtime) class path.
  1. Select Project > Properties....
  2. Select Java Build Path on the left and select the Libraries tab.
  3. Click the Add External JARs... button.
  4. Choose
    /afs/cs.uwm.edu/users/classes/cs351/src/lab1/lab1.jar
  5. Click OK on both windows.

Implement SmileyFace class

The SmileyFace class encapsulates the properties of a smiley face, namely its color and size. You are to implement the paint(), hashCode(), and equals() methods.

Eclipse can help you with hashCode() and equals(). Open SmileyFace.java and right click within the text editor. Select Source > Generate hashCode() and equals().... Select both color and diameter and click OK. Inspect the changes to SmileyFace.java.

The SmileyFace.paint() method should draw a smiley face using the given graphics context centered at the given $x$ and $y$ coordinates. Remember that you must set the color first using Graphics.setColor() before drawing anything. Methods you may find useful for drawing include Graphics.fillRect() and Graphics.fillOval(). There are corresponding methods Graphics.drawRect() and Graphics.drawOval() that just draw an outline. Remember that for these methods $x$ and $y$ coordinates specify the upper left corner and not the center. The coordinate (0, 0) is located at the upper left corner of the window. The $x$ coordinate increases as you go from left to right. The $y$ coordinate increases as you go down.

Finish the implementation of the SmileyFaceApplet class

Finish the implementation of the paint method in the SmileyFaceApplet class. Draw a white background with the current size of the window, and then use the paint() method of a SmileyFace to draw a smiley face. Save the file and ensure that no errors are present. Build and run the project by selecting Run > Run As > Java Applet. You should see a white background with something moving around.

See your TA to receive credit for this lab.


Aleksandr Dobkin 2012-01-25