Joe the Box

1
Joe the Box

• Chapter 3
• Squeak Object-oriented design with multimedia
  applications

2
Story

• Generating How to File In/Out Code
• Playing with Joe the Box
• A microworld for learning about Boxes
• Originally by Adele Goldberg
• Analyzing Box
• How to Draw
• Extending Box
• Generating How to take apart an example
• Improving Box
• A Start on UML

3
Filing in

• Normal way of passing around code in Smalltalk
• Plain text file, suffix .st (SmallTalk) or .cs
  (Change Set)
• Load in Boxes by filing it in
• Available from white book CD, or from
  http//coweb.cc.gatech.edu/cs2340/11.
• Find it in the FileList
• Click the File-in button

4
FileList
Directory Structure
Files in the directory
Pattern to match to filenames
Contents of selected file
5
Filing out

• Simply choose FileOut from the yellow-button menu
  in the Browser
• For any of category, class, protocol, or method

6
Creating Boxes

• Box clearWorld "To open the world"
• joe Box new. "To create Joe"

7
Joe is a Box

• joe class "PrintIt"
• Joe is an instance of a Box
• It knows how to do things that Boxes know how to
  do
• turn
• move
• grow
• Neat example of what Joe can do

8
Joe being a Box
9
Jill is also a box

• jill Box new. "Make Jill"
• Jill knows the same things as Joe, in the same
  way, but has different data
• jill turn 127 "Jill turns, Joe stays the same."
• Two different boxes, with different
• Positions
• Sizes
• Orientations

10
Class Box's Methods
11
Box's Instance Methods
12
NamedBox

• jane NamedBox named 'jane'. "Note Different
  creation method"
• jane isKindOf Box "PrintIt to see true"

13
NamedBox methods

• Overriding instance methods draw, undraw
• Add undrawNameColor
• New class method - named

14
Creating the Box

• Class Definition
• Class method new

15
Issues in Creating the Box

• Why is it super not self in the Class method
  new?
• Why do we get a Box out of this new and not an
  instance of Object (or whatever)?
• What if NamedBox did the exact same definition of
  new? Would it work?

16
Equivalent method for new

• new
• temporaryNewObject
• temporaryNewObject super new. Create the new
  object
• temporaryNewObject initialize. Initialize it
• temporaryNewObject Return it

17
So what's happening in initialize?

• initialize
• position 50_at_50. "Set instance variables"
• size 50.
• tilt 0.
• self draw. "Make it appear."

18
Class method for clearWorld

• clearWorld
• (Form extent 600_at_200) fillWhite display
• A Form is a bitmap graphic
• Form extent 600_at_200 creates one of the given
  size (as a Point, x_at_y)
• display puts it up at 0_at_0 on the Display

19
How to Draw (in Squeak)

• Create a form from a file
• f
• f Form fromFileNamed 'my.gif. f display.
• Create form from a URL
• HTTPSocket httpGif 'www.cc.gatech.edu/gvu/images/
  headers/titles/gvu-center.gif'
• Get form from the screen
• Form fromUser select on screen

20
Shrinking and Magnifying Forms

• f s
• f Form fromUser. "Let the user define a
  rectangle"
• s f shrink f boundingBox by 2 _at_ 5. "Shrink
  it"
• s displayOn Display at Sensor waitButton.
  "Display it"
• s f magnify f boundingBox by 5_at_5. s display.

21
Rotating a Form

• a f
• f Form fromDisplay (0_at_0 extent 200_at_200).
  "Save the screen"
• a 0. "Rotation value"
• Sensor anyButtonPressed whileFalse "Rotate
  until mousebutton"
• "Grab screen from mousepoint, rotate, and
  display"
• ((Form fromDisplay (Sensor cursorPoint extent
  130_at_66))
• rotateBy (a a5)) display.
• f display "Put the original corner of the screen
  back"

22
How Forms work

• Forms are manipulated with BitBlt
• Bit Block Transfer
• It's what makes overlapping windows and pop-up
  menus possible
• Squeak includes a new kind of BitBlt called
  WarpBlt
• Instead of merely moving one rectangle somewhere
  else, it moves one rectangle to a quadrilateral
• Try FishEyeMorph new openInWorld

23
Making other objects on Forms

• From Smalltalk-80, Squeak actually knows about
  lots of graphical objects than can draw
  themselves on Forms Arcs, Splines, Circles
• aCircle aForm
• aForm Form extent 1_at_1. "This will define the
  circle edge"
• aForm fillBlack.
• aCircle Circle new.
• aCircle form aForm.
• aCircle radius 50.
• aCircle center 100_at_100.
• aCircle displayOn Display

24
Teaching Boxes to Draw

• draw
• myPen
• myPen Pen new. "Create a new Pen for drawing"
• myPen up. "Don't draw while setting it up"
• "Set up the Pen with the Boxes' characteristics"
• myPen goto position.
• myPen turn tilt.
• myPen color (Color black).
• "Now put the Pen down and draw the box."
• myPen down.
• 4 timesRepeat myPen go size turn 90.

25
Pens as Turtles

• Pens have a heading and a pen state
• They draw on Display, or on a Form with newOnForm

26
Putting Pens in Morphic Images

• Note that Morphic redraw destroys Pen/Form marks.
• form Form extent 200_at_200.
• p Pen newOnForm form.
• p down.
• 4 timesRepeat p go 50 turn 90.
• (SketchMorph withForm form) openInWorld
• Also try
• m ImageMorph new.
• m setNewImageFrom form.
• m openInWorld.

27
How Boxes undraw

• undraw
• myPen
• myPen Pen new. "Create a new Pen for drawing"
• myPen up.
• "Set it up for drawing the Box"
• myPen goto position.
• myPen turn tilt.
• myPen color (Color white). "Now draw it with the
  background color"
• myPen down.
• 4 timesRepeat myPen go size turn 90.

28
All other Box methods

• Follow the same pattern
• Undraw the current Box representation
• Changing something
• Draw it again

29
Two examples

• grow increment
• self undraw.
• size size increment.
• self draw.
• move pointIncrement
• self undraw.
• position position pointIncrement.
• self draw.

30
Getting input from the user

• Recall
• Sensor anyButtonPressed whileFalse
• joe moveTo (Sensor mousePoint)
• Sensor is a global variable
• Instance of InputSensor
• Access point for the Mouse and Keyboard

31
Keyboard Access Through Sensor

• kbdTest
• Prints character, keycode, and OR of modifier
  bits until user types x
• keyboard
• Returns the next character from the keyboard
  buffer, or nil if empty
• keyboardPeek
• Returns the next character from the buffer
  without removing it, or nil if empty
• keyboardPressed
• Returns true if keystrokes are available in the
  buffer
• shiftPressed, commandKeyPressed,
  controlKeyPressed, macOptionKeyPressed
• Returns true if the relevant key is pressed

32
Sensor for mouse
33
Extending Box to create NamedBox

• Box subclass NamedBox
• instanceVariableNames 'name '
• classVariableNames ''
• poolDictionaries ''
• category 'Boxes'

34
What would happen if we did new?

• jane NamedBox new.
• jane name 'Jane'.
• jane draw.
• Here's the result Why?

35
How named works

• named aName
• newBox
• newBox super new. "Do the normal Box draw"
• newBox undraw. "Erase it using NamedBox erase"
• newBox name aName. "Set the name"
• newBox draw. "Draw it with the name"
• newBox

36
How draw and undraw work

• draw
• super draw. "Draw myself as a Box"
• self drawNameColor (Color black). "Draw my name
  in black"
• undraw
• super undraw. "Undraw myself as a Box"
• self drawNameColor (Color white). "Erase my name
  in white"

37
Where unnamed NamedBox instances get their name

• drawNameColor aColor
• displayName
• (name isNil) ifTrue name 'Unnamed'. "If no
  name, fake one"
• displayName name asDisplayText. "Make the
  string a kind of Form"
• displayName "Set its color"
• foregroundColor aColor
• backgroundColor (Color white).
• displayName displayAt position. "Display it"

38
Generating Reusing an Example

• Goal Name in random colors
• How do you reuse foregroundColorbackgroundColor?
  
• Try implementors (Alt/Command-M)
• Try senders (Alt/Command-N)
• Find example class methods and try them
• How generate random colors?
• Look for instance creation methods for Color
• Find class Random, read class examples and
  comments

39
Putting together the pieces

• myGenerator Random new.
• 30 timesRepeat
• name Fred Flintstone' asDisplayText.
• name foregroundColor
• (Color r myGenerator next
• g myGenerator next
• b myGenerator next)
• backgroundColor (Color transparent).
• name displayAt (100 atRandom) _at_ (100 atRandom).

40
Improving Boxes

• Design flaws in Boxes
• Creating new Pens and duplicating functionality
• Pens have a location and direction
• draw/undraw have too much replication
• Improvements
• Each Box gets its own Pen
• Rewrite draw/undraw

41
Improving Box

• New Box instance vars size and pen
• initialize
• pen Pen new. "Put a pen in an instance
  variable."
• pen place 50_at_50.
• size 50.
• self draw.

42
Delegate to Pen

• Delegation Asking another object to perform a
  service for the original object.
• move pointIncrement
• self undraw.
• pen place (pen location) pointIncrement.
• self draw.
• turn degrees
• self undraw.
• pen turn degrees.
• self draw.

43
Re-doing draw/undraw

• draw
• self drawColor (Color black).
• undraw
• self drawColor (Color white).

44
drawColor for new Box

• drawColor color
• pen color color.
• 4 timesRepeat pen go size turn 90.

45
Fixing NamedBox draw

• Previous version knew Box position
• drawNameColor aColor
• displayName
• (name isNil) ifTrue name 'Unnamed'.
• displayName name asDisplayText.
• displayName foregroundColor aColor
• backgroundColor (Color white).
• displayName displayAt (pen location).

46
How do we talk about designs?

• With representations
• UML (Unified Modeling Language) is the O-O
  Standard
• The original Box class structure

47
How do we depict the redesign?
48
Quiz 1 Recap

• A possible implementation
• 1 to 10 do
• index Transcript show (11 - index)
  printString , ' ' , (index index) printString
  , ' ' , ((11 - index) (index index))
  printString cr

49
Another Possibility

• subResult multResult
• 1 to 10 do
• index subResult (11 - index).
• multResult index squared.
• Transcript show subResult printString , ' '
  , multResult printString , ' ' , (subResult
  multResult) printString cr.
• Blocks local variables are on the Squeak wish
  list, but last time I checked hadnt been added

50
Yet Another Possibility

• index subResult multResult
• index 1.
• index lt 10 whileTrue
• subResult (11 - index).
• multResult index squared.
• Transcript show subResult printString , ' ' ,
  multResult printString , ' ' , (subResult
  multResult) printString cr.
• index index 1

51
Next

• Turn in list of hard to figure out tasks today!
• Milestone 2 Start forming your groups!
• Next class
• More on UML
• Object Oriented Design Principles