1. 308-203A Introduction to Computing II Lecture 4: Visual Programming A Case Study of OOP Fall Session 2000

2. What is Visual Programming? Desktop Window Start Answer: Just the point-and-click we know-and-love

3. 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

4. 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:

5. A Simplified Case-Study................................********............*Win 1 *............* ++++++++.....***+Win 2 +...........+ +....…....++++++++................................. “Desktop” with two windows

6. Helper Class “Coordinate” class Coordinate { Coordinate(int x, int y) { … } int getX( ) {…} ; int getY( ) {…}; } To draw text at certain x-y coordinates, it will be handy to package up those coordinates:

7. The Class Hierarchy DrawingAreaVector (JDK) EmbeddedDrawingArea ConcreteDrawingArea Screen Desktop Window TextWindow DrawableVector Coordinate

8. Abstraction of “Drawing” Drawable - things which can be drawn (the “painting”) DrawingArea - where things can be drawn (the “canvas” ) DrawingAreas will provide methods so that Drawable things can draw themselves.

9. Abstraction of “Drawing” Drawable - things which can be drawn (the “painting”) DrawingArea - where things can be drawn (the “canvas” ) interface Drawable { void draw( ); }

10. 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) {…}; }

11. Making it more Concrete class ConcreteDrawingArea extends DrawingArea { char [] [] myData; void drawCharAt(Coordinate, char) { … } char getCharAt(Coordinate) { … } }

12. 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

13. 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.println void dump( ) { … } }

14. Desktop Problem: screens only remember character data and print it out… they don’t know about windows and things class Desktop extends Screen { addItem(Drawable); removeItem(Drawable); bringToFront(Drawable); }

15. Desktop is “Drawable,” too class Desktop extends Screen { void draw( ) { // for each Drawable thing, d, on the Desktop d.draw( ); }

16. DrawableVector The above is neatly handled by extending the JDK class Vector so that it is Drawable… To draw yourself, just draw each element in order.

17. The Class Hierarchy (so far) DrawingAreaVector (JDK) ConcreteDrawingArea Screen Desktop DrawableVector Coordinate

18. Any questions?

19. So what Drawables do we put on the Desktop? It’s time for windows, dialogs, and such: the stuff of point-and-click…

20. Embedded Drawing Areas Problem: Windows and dialogs and such need to move around easily and transparently. Desktop Window Start Window (0,0)

21. Embedded Drawing Areas Problem: Windows and dialogs and such need to move around easily and transparently. Desktop Window Start Window (0,0) has moved

22. Embedded Drawing Areas Solution: Remember offset inside another drawing area. Desktop Window Start Embedded area Embedding area

23. Embedded Drawing Areas class EmbeddedDrawingArea extends ConcreteDrawingArea { int x_offset, y_offset; DrawingArea embedding; void moveTo(x,y); }

24. Window Problem: We can’t see where a window ends and the desktop begins. Solution: Add a border.

25. Window class Window extends EmbeddedDrawingArea { char border; drawBorder( ) { // new method } drawCharAt( ) { // OVERRIDE } draw( ) { // OVERRIDE } }

26. TextWindow class TextWindow extends Window { String text; void setText(String); draw( ) { // OVERRIDE } }

27. The Class Hierarchy DrawingAreaVector (JDK) EmbeddedDrawingArea ConcreteDrawingArea Screen Desktop Window TextWindow DrawableVector Coordinate

28. Any questions?