308-203a introduction to computing ii lecture 4: visual programming a case study of oop

308-203AIntroduction to Computing II

Lecture 4: Visual ProgrammingA Case Study of OOP

Fall Session 2000

What is Visual Programming?

Desktop

Window

Start

Answer: Just the point-and-click we know-and-love

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

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:

A Simplified Case-Study

..............................

..............................

..********..........

..*Win 1 *..........

..* ++++++++...

..***+Win 2 +...

........+ +...

.…....++++++++...

..............................

“Desktop” with two windows

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:

The Class Hierarchy

DrawingAreaVector (JDK)

EmbeddedDrawingArea

ConcreteDrawingArea

Screen

Desktop

Window

TextWindow

DrawableVector

Coordinate

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.

Abstraction of “Drawing”

• Drawable - things which can be drawn (the “painting”)• DrawingArea - where things can be drawn (the “canvas” )

interface Drawable {

void draw( );}

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

}

Making it more Concrete

class ConcreteDrawingArea extends DrawingArea {

char [] [] myData;

void drawCharAt(Coordinate, char) { … }char getCharAt(Coordinate) { … }

}

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

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( ) { … }

}

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);

}

Desktop is “Drawable,” too

class Desktop extends Screen {

void draw( ){ // for each Drawable thing, d, on the Desktop d.draw( );}

}

DrawableVector

The above is neatly handled by extendingthe JDK class Vector so that it is Drawable…

To draw yourself, just draw each elementin order.

The Class Hierarchy (so far)

DrawingAreaVector (JDK)

ConcreteDrawingArea

Screen

Desktop

DrawableVector

Coordinate

Any questions?

So what Drawables do we put on the Desktop?

It’s time for windows, dialogs, and such:the stuff of point-and-click…

Embedded Drawing Areas

Problem: Windows and dialogs and suchneed to move around easily and transparently.

Desktop

Window

Start

Window (0,0)

Embedded Drawing Areas

Problem: Windows and dialogs and suchneed to move around easily and transparently.

Desktop

Window

Start

Window (0,0)has moved

Embedded Drawing Areas

Solution: Remember offset inside anotherdrawing area.

Desktop

Window

Start

Embedded area

Embedding area

Embedded Drawing Areas

class EmbeddedDrawingAreaextends ConcreteDrawingArea

{int x_offset, y_offset;DrawingArea embedding;

void moveTo(x,y);}

Window

Problem: We can’t see where a windowends and the desktop begins.

Solution: Add a border.

Window

class Window extends EmbeddedDrawingArea{

char border;

drawBorder( ) { // new method }

drawCharAt( ) { // OVERRIDE }draw( ) { // OVERRIDE }

}

TextWindow

class TextWindow extends Window{

String text;

void setText(String);

draw( ) { // OVERRIDE }}

The Class Hierarchy

DrawingAreaVector (JDK)

EmbeddedDrawingArea

ConcreteDrawingArea

Screen

Desktop

Window

TextWindow

DrawableVector

Coordinate

Any questions?