Upload
derick-george
View
227
Download
0
Embed Size (px)
Citation preview
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) ) ...