Homework 5

Due Thursday, June 10, 11:00 p.m. (no late homework)

Be sure to see the few notes below that I added on Friday, June 4.

The Applet

Some specifics

• Basic Ideas
  • More on Components (new Components: Checkbox, Dialog)
  • More on Events (new Events: ItemEvent, certain MouseEvents, KeyEvent, WindowEvent)
  • Using pre-created classes
  • Writing a more complex applet

• General
  • The size of your Applet in the HTML file should be 700 wide x 400 high.
  • The main two parts of this assignment are for you to create a ControlPanel and a DrawingCanvas on which the user can draw.
  • In your Applet, initialize your StringCreator so that the String initially displayed is your own name and login ID (use the StringCreator constructor which allows you do set the initial String). This makes it easier for the grader to keep track of whose assignment she is grading.

• Classes
  • Reminder: I will collect only one java file: homework5.java. Don't create other java files whose class is imported into your homework5.java file. The ColorCreator and StringCreator classes should be imported (rather than including their class definitions as part of the homework5.java file), and will be supplied by me in running your programs. Be sure to put everything you are using
  • As you can see, you will be using the ColorCreator class and the StringCreator class which you created for homework 4. I will not have you submit your own versions of these classes. I will supply the those two classes to the grader when she is grading them. So that you can use test your program with the two classes that I will use to run them, here is the code for the two classes: ColorCreator.java and StringCreator.java.
  • To take advantage of the object-oriented capabilities of Java (that is, the capabilities to organize different parts of a program into organized little bundles, which we call classes), create a ControlPanel class, which is the middle of the three objects at the top of the applet (between the ColorCreator and the StringCreator). In this case, the ControlPanel is not really something that we will use in other applets, so we don't create it as a separate, re-usable class. Instead, simply define class ControlPanel as one of the classes in homework5.java.

• Layouts
  • You're applet should look quite like mine, but not necessarily exactly the same.
  • The applet itself uses a BorderLayout, with the DrawingCanvas going in the center region, so that it can have whatever space is left over after placing the other things at the top of the applet.
  • The top Panel, which contains the ColorCreator, ControlPanel and StringCreator, uses a GridLayout.
  • Put the ShapeSizeCanvas and the two Scrollbars which are used to control height and width into a Panel which has BorderLayout (the Scrollbars are in the East and South regions).
  • In my applet, I wanted this Panel to be as large as possible, so I put it in the center region of the ControlPanel. Then in the west region, I put a Panel which contains: the Panel containing the Checkboxes and the Panel containing the three Canvases, each of which is a shape.

• The ControlPanel
  • The basic information the ControlPanel is used to set and communicate to the DrawingCanvas are: what to draw (shape, line or String), and if a Shape, the type and size of the shape.
  • Be sure the three Checkboxes are part of the same Checkbox group.
  • The ShapeSizeCanvas must be a separate class (a subclass of Canvas), onto which you draw the user-selected shape, whose width and height are controlled with the Scrollbars. For better appearance, whatever the size of the shape, center it on the ShapeSizeCanvas.
  • The three shapes that you see in the middle of the ControlPanel are actually three individual Canvases (you don't necessary have to do things this way, but I think it is must easier). To demonstrate this, here is another version of the applet, with a randomly selected background color for each. When you click on one, it generates a MouseEvent (responded to by mouseClicked), that simply repaints the shape in a darker color (and be sure that this also results in the previosly selected shape in being deselected, i.e., being redrawn in the lighter color). Be sure to addMouseListener to these Canvases. I would design the ShapeCanvases so that the paint first gets the size of the Canvas, then tries to draw the shape to fit that size. The Panel holding these three ShapeCanvases uses a GridLayout with three rows and one column.
  • Also notice that when you click one of the three shapes, the ShapeSizeCanvas immediately shows this new shape, so be sure that your code is set up to allow this information to be passed from the ShapeCanvases to the SizeShapeCanvas.
  • In case it is helpful, I used some static variables for my ControlPanel, similar to how the static variables were used in the ColorCreator class in homework 4. I used these static variables to communicate the information from the ControlPanel to the DrawingCanvas, similar to (but more complex than) what is done in example5. These variables are:
    • RECTANGLE = "Rectangle"
    • OVAL = "Oval"
    • TRIANGLE = "Triangle"
    • DRAWSHAPE = "Draw Shape"
    • DRAWLINE = "Draw Line"
    • DRAWSTRING = "Draw String"

• The DrawingCanvas
  • See the DrawingCanvas in example5.java for a simplified version of the one you will do for homework5.
  • If you drag the mouse (with the left mouse button), you will draw either a shape, line or string, as selected in the ControlPanel. The color will be that shown in the ColorCreator. If it is a shape, it will be the shape and size selected in the ControlPanel. If it is a string, it will be the String with the given Font in the StringCreator. Be sure to write your ControlPanel so that this information can be communicated from the ControlPanel to the DrawingCanvas (see how this is done for the ColorCreator and the DrawingCanvas in example5).
  • If you click with the left button, it responds the same way by drawing the appropriate thing, but at the single point where you clicked. See how the mouseClicked compares to the mousePressed/mouseDragged methods in example5.
  • You can clear the entire DrawingCanvas (which is simply done by filling in the entire Canvas in the current background color) by clicking the middle or right mouse buttons in the DrawingCanvas (try this in the applet above). If you middle- or right-click the mouse in the Canvas, a Dialog appears. See more information just below.

• Dialog
  • The Dialog asks if you really want to erase the Canvas or not. If you select Yes, it does, and closes the window (by setting it to not be visible), and if you select No, it does nothing to the Canvas, and then closes the window. Note: all drawing, including this erasing (by filling in the entire Canvas) is actually done to the buffer image, then calling repaint, which will simply display the already created buffer image (it may first draw a frame around the buffer, depending on how you wrote your program).
  • Your program should be written so that if the Yes button is in focus, and you hit Enter, then your program responds the same as if you had clicked the Yes button. The same is true for the No Button. This involves handling a KeyEvent.
  • The Enter or Return key is equivalent to the character '\r' (r is for return). For example, following is what the code might look in the case that the Yes Button is in focus and the user hits return::

      public void keyTyped(KeyEvent e)
      {
        if (e.getKeyChar() == '\r') {
          ... whatever code causes the drawingCanvas to be erased,
          ... which will depend on how you've written your program
          messageBox.setVisible(false);
        }
      } 

    where drawingCanvas is the Canvas on which the drawing is done and where messageBox is the Dialog.
  • You can use the Dialog constructor that takes a Frame as the only arguement. Since there is not particular Frame to which this Dialog is attached, simply create one to use in instantiating the Dialog. For example, inside of the constructor of class MessageBox (which extends Dialog), the first line could look something like

      super(new Frame());
    

    which simply calls the constructor of the super class, Dialog, which takes a Frame as its argument. By the way, I found it easier to have a separate class to handle the Yes and No Buttons seperately. You are free to do what seems most natural to you.
  • Your program should be written so that if you click on the little X in the top right corner of the Dialog window, it closes (that is, it is set to be not visible). This involves handling a WindowEvent.

• Extra-credit
  • You can earn a bit of extra-credit if you write your program so that the "marker-tip" is showing while it is on the DrawingCanvas, even if you are not currently drawing. See this version of the applet here. Note: to do this, I found it easiest to use a second buffer image (so that you are triple-buffering), but you are free to do this how you like.

The files to submit

• homework5.java
• homework5.class
• homework5.html

At the top of you .java file, be sure to include your name, login ID, student number, assignment number, and the honesty pledge.

Clarifications and answers to specfic questions from students

1. QUESTION: None yet.
   ANSWER: