290 likes | 400 Views
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
E N D
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) ) ...