CS 051 Fall 2012

Lecture 23

A fancier drawing program

For the next example, we go back to the drawing program that we first used
as an example of using GUI components. It has choice buttons to determine
the shape of the object to be drawn (square or circle) and its color. Now
we would like to enhance the program to allow the user to click on one of
the objects on the canvas and drag it to a new position. We do that by
adding a new choice button that will allow us to choose whether we wish to
draw a new geometric object, or select an old one to drag. The drawing is
handled as before, but selecting an element used to be impossible because
once we created a new object, the variable holding the old object now only
refers to the new object, leaving the old object inaccessible. We will
now make up for that by keeping all of the entries on the screen in an array.

Demo: Drawing program

Notice the code to create a new array does not create any items in the
array. That is handled by the call of addNew in onMousePress.

We bump up the count of the number of objects after each addition of a new
element. Thus numObjects provides an accurate count of the number
of objects of the array which are really in use. The constant MAX_OBJECTS
simply keeps track of the total number of available slots, not the number of
slots in use.

Notice also that the first statement of the addNew method checks to make
sure that numObjects is less than MAX_OBJECTS. If we omitted that
check and tried to insert something in the array, we would get an
ArrayIndexOutOfBoundsException and the program would crash.

Finding an item in an array

The most interesting code in the program is the one to determine if the point
clicked is inside any of the objects. See getIndexOf. Notice that if
point is in several elements, getIndexOf returns the index of
the item closest to the end of the array. This is because the items in the array
are intentionally stored in order from bottom to top (with respect to the canvas)

Removing or recoloring an element

With the above code written it is now easy to remove an element from the array
or to recolor it. We simply use the getIndexOf method to find the
item. If we are recoloring the item, we simply change the color of that item.
If we are removing an item, we need to call removeEltWithIndex
When we remove an element, we must maintain the ordering of the array so that
getIndexOf continues to work properly. Thus, removeEltWithIndex
removes an item from the array, then shifts all the other elements to the
left to fill in the gaps left by the item.

As an exercise, write code for removing something from the middle of a
list and adding something to the middle of a list. (As well as moving
items - in the right order - you must also be sure to update the count
of the number of items.)

Moving an item on the screen

Moving an item on the screen is now fairly simple. We can use the getIndexOf
method to find the item that was selected. Since the item is selected, we
want that item to be on top of the other items (think of selecting and moving
a window on your desktop). We accomplish this by calling moveToFront on
the selected item. Since the item is now on top, we must move it to the end of
the array to maintain our ordering. We can call removeEltWithIndex to
remove it from it's current location, then add the item back at the end.