Overview of our Approach

• Program Structure– Data, variables, and parameters– Basic control structures (conditionals, loops and Threads)– Class definitions ( with interfaces but not inheritance)– I/O (that means GUI for us)

• Data Structures– Recursive class definitions and arrays

• Data Processing– Strings and streams– Sorting and searching

Program Structure

• Object-Oriented Graphics Primitives

Mouse Event Handling Methods

• Instance Variables and Parameters

• Conditionals

• Class definitions

• Loops and Threads

• GUI components

{ }

Library Support

• A collection of “Drawable” classes – Line, FramedRect, FilledOval, …

• A “DrawingCanvas” – Collects and displays a set of Drawables– Functions as a “Component” in Java AWT or

Swing.

Library Support

• A “WindowController” class– Student programs extend WindowController – WindowController:

• Extends Applet• Supports simplified mouse events• Creates “canvas” to hold Drawables

• ActiveObject class which extends Thread– Exceptionless sleep + simple getTime.– Automatic termination

WindowController Event Handling Methods

• Students determine response to mouse events by overriding methods:

public void onMousePress( Location pos ) { new FilledRect( pos, width, height, canvas );}

– No “listener” setup required – Receives mouse coordinates as parameter

Event Handling Methods

• Methods to handle basic mouse events:– onMousePress, onMouseRelease,

onMouseClick, onMouseDrag, onMouseMove, onMouseEnter, onMouseExit

• Override begin method for initialization

Graphic Constructors

• Drawable constructors expect position, shape, and canvas where object will appear

new FilledRectangle( x, y,width,height,canvas);

• Objects appear “immediately”

• Drawing primitives can occur in any method

Canvas Coordinates

• Screen coordinates are measured in pixels• Upper left corner of canvas is (0,0)• Coordinates are encoded as double’s• Location class used to encode a coordinate

pair as a single objectnew FilledRectangle(corner,width,height,canvas);

Drawable Mutator Methods

• Methods are provided to modify location and appearance of displayed objects– box.moveTo( newX, newY );– border.setColor( Color.red );

• Changes appear “immediately”

Objects in Action

• Our graphical primitives were inspired by “mini-worlds”– Buggles and Bagels (Wellesley)

– Karel the Robot (Bergin)

• Common advantages– Highly interactive, “tangible” learning experience

• Weakness of “mini-worlds”– Primitives introduced are not used throughout course

Drawable Stacking

• Object overlap determined by control of logical layering within canvas– box.sendToBack();– circle.sendForward();

• Objects can be temporarily hidden– frame.hide();– circle.show();

VS.

Accessor Methods

• Methods provide access to attributes of graphical objects– box.getX()– oval.getWidth()

• Boolean methods to determine geometric relationships– box.contains( somepoint )– box.overlaps( someoval )

Non-geometric Graphics

• Arbitrary GIF and JPEG images can be incorporated in drawings on canvas

picture = getImage( “mountains.jpeg” );

new VisibleImage( picture, x, y, canvas );

Non-geometric Graphics (cont.)

• Text can also be included in drawings:

new Text(“Hello World”, x, y, canvas);

Objects in Action

• Our graphics primitives were inspired by “mini-worlds”– Buggles and Bagels (Wellesley)– Karel the Robot (Bergin)

• Common advantages– Highly interactive, “tangible” learning experience

• Weakness of “mini-worlds”– Primitives introduced are not used throughout

course

Introduction by Immersion

• Begin with intuitive explanations of simple example programs to introduce:– A small set of graphic primitives– Context of event driven programs

An Example

public class Touched extends WindowController {

public void onMousePress(Location point) { new Text("I'm Touched.", 100, 90, canvas);

}public void onMouseRelease(Location point) {

canvas.clear();}

}

Introducing Events

• Limit attention to correspondence between mouse actions and handlers– Keep handler code simple– Avoid using parameters

• Don’t even mention the “event loop”– New paradigm == new virtual machine

Event Handling as a New Paradigm

The standard paradigm: “A program is a sequence of instructions that

specify how to accomplish a goal”

Event-driven paradigm: “A program is a collection of sequences of instructions each of which specifies how to

react to some event/request.”

Benefits of Event-driven Model

• Consistent with student experience.– GUI interfaces suggest programs are reactive

• More General– “main program” is just a “begin” event

• More Object-oriented– Object = collection of methods/behaviors– Program = object

Introducing Graphics

• Introduce conceptual framework in class– Coordinate system– Constructor and method syntax

• Explore details in lab– Litany of constructors and methods– Relationship between parameters and behavior

A Graphics Sandbox

Self-paced, guided introduction

“Hello World?”

• Students write simple interactive program in first lab (after graphics sandbox experience)– Involves simple naming– Involves simple event handling– Reinforces syntax and behavior of graphics

primitives

Variables and Assignment

• Start with instance variables of object types– Motivated by desire to modify objects

someGraphic = new FilledRect(. . . );

. . .

someGraphic.move(5,5);

– Examples often involve communication between “begin” and event handling methods.

• Actually introduced during 1st lab

Formal Parameters

• Mouse event handling methods receive cursor location as a single parameter– Students declare and use these formals– Actual/formal correspondence not an issue– Examples illustrate limited scope and lifetime

of parameter values• Some values must be saved using instance variables

What About Numbers?

• Early use of numeric values is limited– Initially, only numeric literals are used– First, non-constant numeric values come from

accessor methods• getX(), getY(), getWidth()

– Introduce numeric expressions and assignments– Introduce random number generator class

Conditionals & Event Handling

• Introduce class definitions after conditionals to enrich example classes defined.

• With conditionals, students can complete surprisingly sophisticated programs– Event handling implicitly provides the iterative

behavior needed without explicit loops

Box Dragging without Loopspublic void onMousePress( Location mouse ) {

grabbed = box.contains(mouse);lastMouse = mouse;

}public void onMouseDrag( Location mouse ) {

if ( grabbed ) { box.move( mouse.getX() - lastMouse.getX(), mouse.getY() - lastMouse.getY() ); lastMouse = mouse; }

}

Covering Conditionals

• Include traditional topics– Conditions based on numeric comparisons– Logical operations & booleans– Nested conditionals

• Graphics provides some unusual examples– Accessors that return booleans

• if ( box.contains(mousePosition) ) ...