308-203a introduction to computing ii lecture 4: visual programming a case study of oop
DESCRIPTION
308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP. Fall Session 2000. What is Visual Programming?. Answer: Just the point-and-click we know-and-love. Window. Desktop. Start. A good example of OOP. Windows, dialogs and all the other little boxes - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/1.jpg)
308-203AIntroduction to Computing II
Lecture 4: Visual ProgrammingA Case Study of OOP
Fall Session 2000
![Page 2: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/2.jpg)
What is Visual Programming?
Desktop
Window
Start
Answer: Just the point-and-click we know-and-love
![Page 3: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/3.jpg)
A good example of OOP
• Windows, dialogs and all the other little boxes can be clearly visualized as individual objects with their own private instance data
• They share many behaviors, so code can be reused if it is arranged to leverage inheritance
![Page 4: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/4.jpg)
A Simplified Case-Study
• Text-based: just arrays of char
• Simple visual hierarchy: just windows on a desktop (no mouse-clicks)
We will implement one from scratch:
![Page 5: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/5.jpg)
A Simplified Case-Study
..............................
..............................
..********..........
..*Win 1 *..........
..* ++++++++...
..***+Win 2 +...
........+ +...
.…....++++++++...
..............................
“Desktop” with two windows
![Page 6: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/6.jpg)
Helper Class “Coordinate”
class Coordinate {
Coordinate(int x, int y) { … } int getX( ) {…} ; int getY( ) {…};}
To draw text at certain x-y coordinates, itwill be handy to package up those coordinates:
![Page 7: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/7.jpg)
The Class Hierarchy
DrawingAreaVector (JDK)
EmbeddedDrawingArea
ConcreteDrawingArea
Screen
Desktop
Window
TextWindow
DrawableVector
Coordinate
![Page 8: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/8.jpg)
Abstraction of “Drawing”
• Drawable - things which can be drawn (the “painting”)• DrawingArea - where things can be drawn (the “canvas” )
DrawingAreas will provide methodsso that Drawable things can drawthemselves.
![Page 9: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/9.jpg)
Abstraction of “Drawing”
• Drawable - things which can be drawn (the “painting”)• DrawingArea - where things can be drawn (the “canvas” )
interface Drawable {
void draw( );}
![Page 10: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/10.jpg)
Abstraction of “Drawing”
• Drawable - things which can be drawn (the “painting”)• DrawingArea - where things can be drawn (the “canvas” )
abstract class DrawingArea {
void drawCharAt(Coordinate, char);char getCharAt(Coordinate);boolean checkValid(Coordinate) {…};
}
![Page 11: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/11.jpg)
Making it more Concrete
class ConcreteDrawingArea extends DrawingArea {
char [] [] myData;
void drawCharAt(Coordinate, char) { … }char getCharAt(Coordinate) { … }
}
![Page 12: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/12.jpg)
So what’s the difference?
• ConcreteDrawingAreas have real text data
• ConcreteDrawingAreas provide methods to access that data which were prescribed but not implemented in DrawingArea
• Note: even a ConcreteDrawingArea is little more than a stylized array of char
![Page 13: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/13.jpg)
Screen
Problem: We still can’t actually print anything…
Solution: Add a class with more functionality
class Screen extends ConcreteDrawingArea {
// This just calls System.out.printlnvoid dump( ) { … }
}
![Page 14: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/14.jpg)
Desktop
Problem: screens only remember characterdata and print it out… they don’t know aboutwindows and things
class Desktop extends Screen {
addItem(Drawable);removeItem(Drawable);bringToFront(Drawable);
}
![Page 15: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/15.jpg)
Desktop is “Drawable,” too
class Desktop extends Screen {
void draw( ){ // for each Drawable thing, d, on the Desktop d.draw( );}
}
![Page 16: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/16.jpg)
DrawableVector
The above is neatly handled by extendingthe JDK class Vector so that it is Drawable…
To draw yourself, just draw each elementin order.
![Page 17: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/17.jpg)
The Class Hierarchy (so far)
DrawingAreaVector (JDK)
ConcreteDrawingArea
Screen
Desktop
DrawableVector
Coordinate
![Page 18: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/18.jpg)
Any questions?
![Page 19: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/19.jpg)
So what Drawables do we put on the Desktop?
It’s time for windows, dialogs, and such:the stuff of point-and-click…
![Page 20: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/20.jpg)
Embedded Drawing Areas
Problem: Windows and dialogs and suchneed to move around easily and transparently.
Desktop
Window
Start
Window (0,0)
![Page 21: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/21.jpg)
Embedded Drawing Areas
Problem: Windows and dialogs and suchneed to move around easily and transparently.
Desktop
Window
Start
Window (0,0)has moved
![Page 22: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/22.jpg)
Embedded Drawing Areas
Solution: Remember offset inside anotherdrawing area.
Desktop
Window
Start
Embedded area
Embedding area
![Page 23: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/23.jpg)
Embedded Drawing Areas
class EmbeddedDrawingAreaextends ConcreteDrawingArea
{int x_offset, y_offset;DrawingArea embedding;
void moveTo(x,y);}
![Page 24: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/24.jpg)
Window
Problem: We can’t see where a windowends and the desktop begins.
Solution: Add a border.
![Page 25: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/25.jpg)
Window
class Window extends EmbeddedDrawingArea{
char border;
drawBorder( ) { // new method }
drawCharAt( ) { // OVERRIDE }draw( ) { // OVERRIDE }
}
![Page 26: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/26.jpg)
TextWindow
class TextWindow extends Window{
String text;
void setText(String);
draw( ) { // OVERRIDE }}
![Page 27: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/27.jpg)
The Class Hierarchy
DrawingAreaVector (JDK)
EmbeddedDrawingArea
ConcreteDrawingArea
Screen
Desktop
Window
TextWindow
DrawableVector
Coordinate
![Page 28: 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP](https://reader036.vdocuments.us/reader036/viewer/2022062517/56813b03550346895da3a3e9/html5/thumbnails/28.jpg)
Any questions?