Engineering Computing

PI: Laboratory 6: Communicating Applications

Handout 1

Overview

There are two parts to this laboratory assignment. In this part, you will build a simple graphical user interface and some additional infrastructure. In the second half of this lab, you will augment that work. By the end of this project, you will have built a very simple two-player video game. The first week's lab focuses on the graphical user interface (GUI).

Portions of this assignment must be done with a partner. Other parts of the assignment are to be done individually. In particular, the first part of the lab may be done individually, but the second part requires that you work with a partner. We will discuss pairing for this assignment in class.

This lab focuses on the following ideas:

  • More graphical user interfaces/AWT
  • Event delegation and listeners

You should read through this entire assignment and complete the Lab preparation section before you come to lab. Some portions of the Post Lab write-up also require your thinking about them before and during the laboratory portion of the assignment. It is important that you plan your complete design before coming to lab.

Please include the names of anyone with whom you collaborate, in any way, on this assignment. As always, you are welcome to discuss the assignment with other students in the class as well. You should also indicate the nature of any collaborations. If you do not collaborate on this portion of the assignment, you should indicate this as well. [Failure to include this information is a violation of the collaboration policy.]

This assignment is a two-week assignment, but the current handout covers work to be done during the first week's lab. You will need to have this labwork complete in order to be checked in to next week's lab. This handout covers work to be done before, during, and after the lab session on 27 October. The second handout concerns work for the lab session on 3 November.


Contents


Introduction

The thing that you will be creating in this first half of the lab is called a position panel. This is a Java component that keeps track of where the mouse is and paints some sort of object (e.g., a circle) in the appropriate place.

Pre-Lab

Finger Exercises

In answering these questions, you may find it useful to refer to the Java Applications Programmer Interface (API) documentation, especially portions of the java.awt and java.awt.event packages.

1. Design a class that extends java.awt.Panel and keeps track of a location in screen coordinates. (It can, for example, just have two ints as fields. Alternately, take a look at java.awt.Point.) The paint method of this class should draw a filled oval centered at the specified location. Your class should have a method that allows other Java code to specify where to make this mark. Note that your class should update the mark whenever it's handed a new location, but it should also maintain this mark at the same location if it is repainted later.

2. Design a class that extends java.awt.Panel and keeps track of the mouse position. That is, it should have a getMouse() method that can be called by other objects at any time and will return an object corresponding to the location of the mouse (within the Panel) at that time. You may, of course, define auxilliary objects to help handle the relevant events.

Questions to think about:

  • What events should you handle to provide this information?
  • What objects will actually handle these events?
  • How will they communicate with your extended panel?
  • The mouse's location has two parts, a horizontal coordinate and a vertical coordinate. How do you return both?

3. Now design a class that combines all of these behaviors. Your new class should extend java.awt.Panel and keep track of (hint: field) the last location where the mouse was depressed, i.e., the last place where a mousePressed occurred. The paint method of this class should draw a filled oval centered at the specified point.

  1. (Bonus) Modify your class so that it keeps track of the current mouse position instead.
  2. (Extra Bonus) Add a getMouse() method to your class. This method should be callable by other objects and should return an object corresponding to the mouse's current location.

    Questions to think about:

    • What events should you handle to provide this information?
    • The mouse's location has two parts, a horizontal coordinate and a vertical coordinate. How do you return both safely?

B. Additional Lab Preparation

In addition to working on the finger exercises, for this week you should think through the assignment below and come to lab with a plan that includes a solution to the problem set and a development plan for how you intend to implement and test one stage at a time of your solution.

Setting Up a Panel

In this lab, you will be building a standalone application version of your mouse-tracking position panel. In particular, you will need:

  • An extended PositionPanel, i.e., a Panel that can keep track of where the mouse is. (See the Finger Exercises.) This Panel will also need to be able to paint several points. (See the Finger Exercises.) Note that it will not simply paint the location of the mouse; you should keep these two functions somewhat separate. You will use this class later on to paint the positions of both the Cat and the Mouse, so it should be easy to change the locations of the points that are painted.
  • A Frame that contains this PositionPanel. At a minimum, it should
    1. have a constructor that takes a Component as an argument.
    2. have an init method that adds the Component and handles sizing, showing.
    3. (have a listener that) handle(s) windowClosing events by calling the Frame's dispose() method to free up any system resources and (optionally) System.exit(0) to complete execution.
  • A top-level interface (Main) to set up your application. It will need to do the following:
    1. create a new instance of your panel.
    2. create a new instance of your frame, telling it about your panel and initializing it.

Note: You may want to include the following code to your extended panel class:

 public Dimension getMinimumSize() {
    return new Dimension(200,200);
  }
 public Dimension getPreferredSize() {
    return new Dimension(400,400);
  }

This defines a size for the Panel; otherwise it will not report any size and may not be displayed.

Development Plan

The final stage of pre-lab preparation is to write up a step-by-step description of your incremental development plan. In particular, think about the following:

  1. What is the minimum self-contained (i.e., testable) functionality that you can implement?
  2. How will you test it?
  3. What can you add to make a slightly more complex and still fully testable version?
  4. How would you test this?

Continue listing added features and tests until you scale up to your complete design. This technique, incremental refinement, is an extremely useful and practical way to write code.

Laboratory

What to Bring to Lab

You should bring your answers to the finger exercises, specifically draft code for each of the three kinds of panels. You should also have a design and an implementation plan for this lab. In addition, you should have thought out answers to all of the questions in the laboratory preparation section and should be prepared to begin writing code immediately upon entering lab.

Getting Started

In lab, you should write and test the code that you designed.

As always, you should implement your code in simple, testable stages, building on your code only as each stage works robustly. In this case, it should be as simple as following your development plan.

You will, of course, want to make use of your answers to the finger exercises.

As you have additional time, add some or all of the following to your application:

  • A Button that resets the position of the dot.
  • A Choice that allows you to select the color of your dot.
  • An exclusive CheckBox (aka a radio button) that allows your application to be in one of two states: Running or Paused.
  • Or come up with a creative use for a widget on your own.

Before you leave

Before you leave lab, you will need to have your work checked off by a course staff member.

At a minimum, you should expect to demonstrate an application that is responsive to your mouse.

If your code does not behave as expected, you should be prepared to explain why or to describe what you have done to try to figure out why.

If your code has more than this minimal functionality, you should be able to describe and demonstrate what it does as well as how you were able to achieve this behavior.

It is always more important that you write clean, modular, well-documented and easy-to-understand code than that you go on to advanced features.

Post-Lab, AKA What To Turn In

There is nothing to turn in for this week's assignment, as the assignment continues into next week. However, the work that you have done this week will be a part of the turn-in for next week's assignment. Your completed assignment should include:

  • your pre-lab assignment, including the finger exercises.
  • your development plan, along with a description of how (if at all) it corresponds to what you actually did in lab.
  • your code or a pointer to it, and a description of its functionality.
  • documentation of your code. (This can be inside the code.)
  • your observations concerning
  • the name of the staff member(s) who checked you into and out of lab, a brief description of the check-out interaction, and answers to any specific issues s/he may have asked you to address.
  • a self-assessement on this week's lab. How well do you understand the material after this lab?
Questions, comments, gripes and other communication to pi-staff@lists.cognition.olin.edu
This course is a part of Lynn Andrea Stein's Rethinking CS101 project at the Computers and Cognition Laboratory and the Electrical and Computer Engineering area at Franklin W. Olin College of Engineering. Olin College Logo