You should now see a window containing your Java project that looks something like the image shown below.

This window has three main regions. In the upper left, it displays buttons for common operations. In the upper center and right, it displays separate icons for each file that makes up the project. In our case, the first icon corresponds to a text file in which you can add information about the project for other humans to read. The second icon corresponds to the only Java program file, "NoClicking.java", in this project. In the bottom is the object bench, which will hold icons representing objects that you can issue commands to.

For now, double-click on the NoClicking icon to show the contents of the "NoClicking.java" file in which you will place your code.

BlueJ should now open a new window that looks something like the image shown below.

Here is the text of the program as it should appear initially:

import objectdraw.*;
import java.awt.*;
   
//   CS 101 Laboratory 1
//   Enter your name, lab section and the date here.

public class NoClicking extends FrameWindowController{

    public void onMouseClick(Location point)
    {
      // commands placed here are executed after the user clicks the mouse
    }

    public void begin()
    {
      // commands placed here are executed when the program begins to execute
    }

    public void onMouseEnter(Location point) 
    {
      // commands placed here are executed when the mouse enters the program window
    }
     
    public void onMouseExit(Location point) 
    {
      // commands placed here are executed when the mouse leaves the program window
    }
     
    public void onMousePress(Location point)
    {
      // commands placed here are executed when the mouse button is depressed
    }
	
    public void onMouseRelease(Location point)
    {
      // commands placed here are executed when the mouse button is released
    }
  
}

You should follow our lead and begin writing your program by typing comments rather than actual Java commands. Near the top of the file we have included a temporary comment telling you to enter your name, lab section time and the current date. Such identifying comments are always good practice, and in a class like this they make the grader's job much easier. BlueJ provides the familiar capabilities of a simple word processor or text editor. You can position the cursor using the mouse or arrow keys. You can enter text and/or cut and paste text using items in the edit menu. Use these features to replace our comment with your name, etc.

Next, add Java instructions to the body of the onMouseClick method that will draw a "no clicking" warning sign. This is the first method skeleton we have included in "NoClicking.java".

As a first step, let's 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);

Your rectangle constructor should now be below the comment in the onMouseClick method. Now that it does something, it would be a good idea to update the comment in the onMouseClick method to say what it does so far. Replace our comment with something more appropriate, like "draws a rectangle when the mouse is clicked". You should get in the habit of updating comments to keep them as accurate as possible as you add instructions to your programs. Not only does this mean you will not have to go back and add comments when you're done, it will help you to remember what everything does as you are writing your programs.

Now you are ready to run your program and see if it works. To do this:

• Click on the "Compile" button in either the original project window or the NoClicking.java window. Note: You don't have to "Save" the changes you made before you compile your program. BlueJ automatically saves them for you before you compile. The status box in the lower right of each Java file's window indicates whether the file has been changed since it was last saved. You can save your file whenever you wish by selecting "Save" from the Class menu.

When BlueJ encounters an error in your code, you should correct it and recompile the program. You may have to correct and recompile numerous times if you have multiple errors in your code.

Once you have corrected all typing mistakes, BlueJ will compile your program and indicate that it was compiled without syntax errors. To run your program, right-click on the NoClicking icon in the project window and select "new NoClicking()" from the menu that appears. This will open up a "Create Object" dialog window in which BlueJ will suggest a name. Go ahead and click on the "Ok" button. An icon will appear in the object bench (don't worry about this for now), and BlueJ will run your program in a new window titled "panel" followed by some number. This window may appear behind your BlueJ windows so you may have to move some windows around to find it. A better way is to use the command-tab key combination (hold down the command key -- the one with an apple icon on it -- and then hit the tab key) repeatedly to cycle through all your running programs, including the NoClicking program you just started.

The new window should appear blank at first. Move the mouse into the window and click, and a rectangle should appear because Java invokes your onMouseClick method, which includes the instruction to construct a rectangle. If this happens, smile. If not, select "quit" from the File menu inside your program window. Go back to BlueJ by clicking on one of its windows or using command-tab. Examine the instructions you typed carefully to see if you can find any mistakes. If so, correct, recompile (this will clear the object bench), and try running your program again. If you can't find the problem, ask your instructor or a TA for assistance.

Once your rectangle program is working, you should add more instructions to it to turn it into a complete warning sign drawing program. Back in BlueJ, immediately beneath the line you added to draw the rectangle, add additional lines to create new Text(...), a new FramedOval(...) and all the other components you will need. In the NotPhotoShop version of the drawing, we told you to have a yellow background for the sign. Leave that part out of the version your program draws for now; we will add it later. As you work, it is a good idea to compile and run your program every time you add a line or two to ensure that you catch mistakes early. Also, make sure your comment line gets updated by the time you are finished. When you are done, your program should draw a sign when you click in the window, and then do nothing until you tell it to quit. In reality, the program draws another copy of the sign each time you click, but you can't tell, as each new sign is drawn exactly on top of the previous one.

Making Your Program Responsive

Now, to explore event handling methods a bit more, revise your program so that it reacts to the mouse in more interesting ways. In the revised version, the sign will be drawn as soon as the program begins to run. The sign will change, however, as the program runs. In particular, when the user moves the mouse into the program window or presses the mouse, your revised code will alter the appearance of the sign.

Making the program draw the sign when it first starts is easy. You initially placed the code to draw the sign in the onMouseClick method. There is a skeleton for a method named begin immediately after the onMouseClick method definition in the "NoClicking.java" file. As you might guess, the instructions in begin are followed when your program first begins to run. Use cut and paste to move all the drawing instructions from the onMouseClick method into the begin method. Don't forget to update your comments. Run your program again. It should now display the sign even if you don't click the mouse.

Notice that it makes more sense logically to have the begin method occur before the onMouseClick method. We arranged them in the opposite order so that you would be able to find onMouseClick more easily. The point is that the computer does not care which order you write them in your program. Only the names are important (though we urge you to put them in a logical order so that it will be easier for all of us to read!). The order of instructions within a method are important, but the order in which you define the methods within the program is not.

Making the sign change in response to the mouse is a bit trickier. Suppose, for example, that you want to emphasize the sign's warning by changing the color of the word "CLICKING" from black to red when the user moves the mouse into the program's window. As you saw in NotPhotoShop, there is a setColor operation that you can use to change the color of the text. There is also an obvious place to tell Java to make this change. The onMouseEnter method is executed by the FrameWindowController whenever the mouse moves into your program window. Placing an appropriate setColor in that method would do the trick.

The problem is that you can't simply say setColor in the onMouseEnter method. If that was all you said, Java would have no way of knowing which of the several objects' color to change. It could change the rectangle, the oval, the text, all of them, etc. Your code has to be more specific and identify the object that should change.

To be able to specify the text object as the object whose color we wish to set, we will have to give it a name. We will use the name message, but we could use any name that seems appropriate.

Associating a name with an object requires two steps. First, we have to include a line that declares or "introduces" the name. This line informs Java that we plan to use a particular name within the program. At this point, we don't need to tell Java what object it should be associated with, but we do need to specify what sort of object it will eventually be associated with. We plan to associate the name message with an object created as new Text, so we have to tell Java that the name will be associated with a Text object. The form of a Java declaration is simply the name being declared preceded by the keyword private and by the type of object with which it will be associated. So, the form for our declaration is:

private Text message;

Now you have to tell Java which object to associate with the name message. Your program currently contains a construction of the form:

new Text("CLICKING", ..., canvas);

message = new Text("CLICKING", ..., canvas);

Now that the text has a name, we can use the name to change its color. Within the body of the onMouseEnter method add the line:

message.setColor(Color.RED);

The program isn't quite complete. It draws the sign immediately and makes the text turn red when the mouse enters the window, but it doesn't make the text black again when the mouse is moved back out of the window. You should be able to figure out what to add to make it black when the mouse exits. Give it a try.

To get more practice using names and other event handling methods, we would like you to modify your program a bit more. First, change the program so that while the user is depressing the mouse button, the circle with the diagonal line through the text disappears. (Of course, it should reappear when the mouse is released.) This will require that you declare names for the circle and the line and associate them with the correct objects. These declarations should appear right after the declaration of message. Your code to make the objects disappear and reappear goes in the onMousePress and onMouseRelease methods. You can use the hide and show methods to handle the disappearing and reappearing.

Finally, add the yellow background to the sign. We didn't have you do this earlier because you had not yet seen how to associate names with objects. Associate a name with the background rectangle when you create it and then use the name to set its color to yellow.

Grading Guidelines

The last point is worth additional discussion. Often there are several Java commands that can be used to accomplish the same result. It is important to pick the most appropriate commands. For example, in this lab you could make your circle and slash disappear by sending them behind the background, but this would not be the best choice as it is not obvious what your intent is and there is a more direct way of accomplishing the same result.

Submitting Your Work

Congratulations, you have written a Java program! We will grade your assignment both by running your actual program over the web and by reading a printout of your Java source code. Homework is due by the beginning of your lecture section. Here is the procedure for submitting your work:

1. Return to BlueJ and make sure you included your name and lab in a comment at the start of the program.

2. Print out a copy of your NoClicking file. You can do so by selecting "Print..." from the Class menu. Since other students may be printing at the same time, you should pick up your printouts immediately and make sure that you take only your own printouts.

3. Print out a copy of the Homework #1 Cover Page. Turn in one stapled hardcopy of all your work, with this cover page on top.

4. We will check in lab the "design" portion of your lab, which this week consists of a hand-written collection of instructions for constructing the sign. In future labs we will collect and grade such design documents.

5. Don't forget to hand in your solutions to the written exercises as part of your homework package.

6. For this lab, you don't need to do anything extra to allow your program to be accessed and run from a web browser. However, as we mentioned earlier, a separate file written in HTML provides information to a web browser about how to run your program. We have already provided this file for you but would like you to modify it to include your name. In your "NoClicking" folder (which is inside your "hw01_intro" folder"), there is a file named "NoClicking.html". Drag this file to the TextWrangler icon -- the one with the curly "w" letter -- in the dock. This is a shortcut for launching the TextWrangler application and then opening the file you want to edit. TextWrangler is a text editor that is more general purpose than the one in BlueJ. For now, just replace the text that reads My_Name with your first and last names, and then save the file.

For this and all other assignments, you should not modify the code after the due date and time (we can easily check this). However, we encourage you to continue experimenting with your programs by working on a separate copy. You can do so by making a copy of the entire project folder and working on the copy. On the Mac, you can copy a folder by holding down the option key, dragging the folder little bit in any direction, and then letting go,

Back to Computer Science 101 Home
Department of Computer Science