CS111 Lab # 11

CS111, Wellesley College, Fall 1997

Lab #11

[CS111 Home Page] [Syllabus] [Students] [Lecture Notes] [Assignments] [Programs] [Documentation] [Software Installation] [FAQ] [CS Dept.] [CWIS]

CS111 Lab #11: Graphical User Interface

Due: Tuesday, December 2, 6:00 p.m.

1. A simple graphical user interface

Today in lab you will learn how to construct some simple features in a GUI or Graphical User Interface. Specifically you will learn how to construct buttons and text fields. In Java, each of these is considered a "component". Components can appear within a "container" such as a panel or a frame. In lab we will discuss how to create panels that have buttons and text fields within them, and show how to layout these components in the applet window. This is also described in Chapters 3 and 4 of the textbook, programming.java. In the first exercise, you will create an applet with a very simple user interface as shown below:

Simple User Interface

To create this, download the lab11 folder from the CS111 download folder. Open the UserInterface folder and double click on the UserInterface.proj file to open it in Symantec Project Manager. The code in UserIntWorld.java puts in a single button for color and a single text field for entering the side length of the square. Using this code as an example, add two more buttons for colors, so that the user has a choice of "Red, "Green" and "Yellow", and two more text fields to add the x and y positions of the square. When finished, a click on a button should cause a square to be filled in with the color specified on the button and the size and position specified by the text fields.

Adding Buttons and Text Fields to the Kinetic Sculpture

Last week in lab, we wrote code in the Kinetic Sculpture project to make bubbles that rose to the top of the canvas, and then reappeared at the bottom. We will now add buttons and text fields to this code so that we can add new bubbles with the click of a button. The final applet will look like this:

User Controlled Bubbles

In the lab11 download folder is a folder named Kinetic. Open this and open the KineticSculpture.proj file. Create the buttons and textfields by modifying the source code of KineticWorld.java. Note that you don't need to modify very many of the methods. You should only:

Add the appropriate instance variables.
Modify the init() method to add the appropriate components.
Modify the action method to make the buttons to the right thing.

The code you will add is very similar to that in exercise 1.

Turning in Lab 11:

Once you have completed both exercises, upload the two folders with the modifed code (UserInterface and Kinetic) to your lab11 drop folder by Tuesday, Dec 2, 6:00 p.m.