Overview of our Approach Program Structure Data variables

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, Framed. Rect, Filled. Oval, … • A “Drawing. Canvas” – Collects and displays a set of Drawables – Functions as a “Component” in Java AWT or Swing.

Library Support • A “Window. Controller” class – Student programs extend Window. Controller – Window. Controller: • Extends Applet • Supports simplified mouse events • Creates “canvas” to hold Drawables • Active. Object class which extends Thread – Exceptionless sleep + simple get. Time. – Automatic termination

Window. Controller Event Handling Methods • Students determine response to mouse events by overriding methods: public void on. Mouse. Press( Location pos ) { new Filled. Rect( pos, width, height, canvas ); } – No “listener” setup required – Receives mouse coordinates as parameter

Event Handling Methods • Methods to handle basic mouse events: – on. Mouse. Press, on. Mouse. Release, on. Mouse. Click, on. Mouse. Drag, on. Mouse. Move, on. Mouse. Enter, on. Mouse. Exit • Override begin method for initialization

Graphic Constructors • Drawable constructors expect position, shape, and canvas where object will appear new Filled. Rectangle( 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 Filled. Rectangle(corner, width, height, canvas);

Drawable Mutator Methods • Methods are provided to modify location and appearance of displayed objects – box. move. To( new. X, new. Y ); – border. set. Color( Color. red ); • Changes appear “immediately”

Objects in Action • Our graphical primitives were inspired by “miniworlds” – 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. send. To. Back(); – circle. send. Forward(); VS. • Objects can be temporarily hidden – frame. hide(); – circle. show();

Accessor Methods • Methods provide access to attributes of graphical objects – box. get. X() – oval. get. Width() • 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 = get. Image( “mountains. jpeg” ); new Visible. Image( 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 “miniworlds” – 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 Window. Controller { public void on. Mouse. Press(Location point) { new Text("I'm Touched. ", 100, 90, canvas); } public void on. Mouse. Release(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 some. Graphic = new Filled. Rect(. . . ); . . . some. Graphic. move(5, 5); – Examples often involve communication between “begin” and event handling methods. • Actually introduced during 1 st 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 • get. X(), get. Y(), get. Width() – 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 on. Mouse. Press( Location mouse ) { grabbed = box. contains(mouse); last. Mouse = mouse; } public void on. Mouse. Drag( Location mouse ) { if ( grabbed ) { box. move( mouse. get. X() - last. Mouse. get. X(), mouse. get. Y() - last. Mouse. get. Y() ); last. Mouse = 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(mouse. Position) ). . .