overview of our approach program structure –data, variables, and parameters –basic control...
TRANSCRIPT
![Page 1: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/1.jpg)
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
![Page 2: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/2.jpg)
Program Structure
• Object-Oriented Graphics Primitives
Mouse Event Handling Methods
• Instance Variables and Parameters
• Conditionals
• Class definitions
• Loops and Threads
• GUI components
{ }
![Page 3: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/3.jpg)
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.
![Page 4: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/4.jpg)
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
![Page 5: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/5.jpg)
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
![Page 6: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/6.jpg)
Event Handling Methods
• Methods to handle basic mouse events:– onMousePress, onMouseRelease,
onMouseClick, onMouseDrag, onMouseMove, onMouseEnter, onMouseExit
• Override begin method for initialization
![Page 7: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/7.jpg)
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
![Page 8: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/8.jpg)
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);
![Page 9: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/9.jpg)
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”
![Page 10: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/10.jpg)
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
![Page 11: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/11.jpg)
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.
![Page 12: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/12.jpg)
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 )
![Page 13: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/13.jpg)
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 );
![Page 14: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/14.jpg)
Non-geometric Graphics (cont.)
• Text can also be included in drawings:
new Text(“Hello World”, x, y, canvas);
![Page 15: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/15.jpg)
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
![Page 16: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/16.jpg)
Introduction by Immersion
• Begin with intuitive explanations of simple example programs to introduce:– A small set of graphic primitives– Context of event driven programs
![Page 17: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/17.jpg)
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();}
}
![Page 18: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/18.jpg)
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
![Page 19: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/19.jpg)
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.”
![Page 20: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/20.jpg)
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
![Page 21: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/21.jpg)
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
![Page 22: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/22.jpg)
A Graphics Sandbox
Self-paced, guided introduction
![Page 23: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/23.jpg)
“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
![Page 24: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/24.jpg)
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
![Page 25: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/25.jpg)
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
![Page 26: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/26.jpg)
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
![Page 27: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/27.jpg)
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
![Page 28: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/28.jpg)
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; }
}
![Page 29: Overview of our Approach Program Structure –Data, variables, and parameters –Basic control structures (conditionals, loops and Threads) –Class definitions](https://reader030.vdocument.in/reader030/viewer/2022032313/56649e715503460f94b6f384/html5/thumbnails/29.jpg)
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) ) ...