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 object new 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 Loops public 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) )...