Teaching Inter-Object Design Patterns to Freshmen

1
Teaching Inter-Object Design Patterns to Freshmen

• Prasun Dewan
• UNC-Chapel Hill

2
Teaching Inter-Object Design Patterns to Freshmen

• Recurring theme in programming
• Not captured by a programming construct
• Components
• Problem context
• Abstract solution
• Motivation for solution

3
Teaching Inter-Object Design Patterns to Freshmen

• Intra-Object
• Abstract algorithms in individual objects
• e.g. Loop patterns (Astrachan 98)
• Inter-Object
• Abstract ways in which multiple objects work
  together
• e.g. Observer, Façade (Gamma et al 95)

4
Teaching Inter-Object Design Patterns to Freshmen

• Intra-Object
• Abstract algorithms in individual objects
• e.g. Loop patterns (Astrachan 98)
• Inter-Object
• Abstract ways in which multiple objects work
  together
• e.g. Observer, Façade (Gamma et al 95)

5
Teaching Inter-Object Design Patterns to Freshmen
Iterator
MVC
Interactor
Observer
Facade
Composite
Factory
6
Teaching Inter-Object Design Patterns to Freshmen
7
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
8
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Monolithic, single- object programs
9
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Modular, multiple- object programs
10
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Implicit pattern
11
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Exact mimicking
12
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Matching vs. using
13
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Matching vs. using
14
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Matching vs. using
15
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Exercise
Example
Matching vs. using
16
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Explicit pattern
17
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
18
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
19
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Complex Abstract
Large
20
Teaching Inter-Object Design Patterns to Freshmen
Diff. Approach
Class
Object
Interface
Inheritance
Example
Exercise
Complex Abstract
Compiler
Toolkit
Large
21
Teaching Inter-Object Design Patterns to Freshmen
Diff. Approach
Class
Object
Interface
Inheritance
Example
Exercise
Concrete
Small (1 slide)
22
Teaching Inter-Object Design Patterns to Freshmen
Diff. Approach
Class
Object
Interface
Inheritance
Example
Exercise
Concrete
Medium (2 wk hw)
Small (1 slide)
23
Teaching Inter-Object Design Patterns to Freshmen
Before
Class
Object
Interface
After
After
Inheritance
Example
Exercise
Concrete
Counter
Search
Medium (2 wk hw)
24
Teaching Inter-Object Design Patterns to Freshmen
Before
Class
Object
Interface
After
Inheritance
Example
Exercise
Concrete
Counter
Search
25
Counter

• Can add arbitrary positive/negative value to an
  integer.
• Different user interfaces.

26
Console Input and Output
27
Console Input and JOption Output
28
Console Input,Output and JOption Output
29
Pattern-free Implementation
public class ConsoleUI static int
counter 0 public static void
main(String args) while (true) int
nextInput readInt() if (nextInput 0)
return counter nextInput
System.out.println("Counter " counter)

30
Model/Interactor Separation
31
Composing Model and Interactor
public static main (String args) (new
AConsoleUI()).interact (new ACounter())
32
Counter Model
public class ACounter implements Counter int
counter 0 public void add (int amount)
counter amount public int getValue()
return counter

• Code reusability
• Less duplication
• Fewer changes

33
Interactor
public class AConsoleUI implements ConsoleUI
public void interact (Counter
counter) while (true) int nextInput
readInt() if (nextInput 0) return
counter.add(nextInput) System.out.println(
"Counter " counter.getValue())
34
Monolithic Inetractor Drawbacks
MixedUI
35
MVC Pattern
Controller
View
Performs Output
Performs Input
Read methods
Model
Write methods
36
MVC Pattern in Counter
Controller
View
Performs Output
Performs Input
Model
getValue()
add()
37
Multiple Views and Controllers
Controller 1
View 1
Controller 2
View 2
Model
Controller 3
View 3
Controller M
View N
38
Syncing Controllers View
Controller 1
View 1
Controller 2
View 2
Model
Controller 3
View 3
Controller M
View N
39
Observer/Observable Pattern
Controller 1
View 1
Controller 2
View 2
Model
Controller 3
View 3
Changed object notifies views
Controller M
View N
40
MVC Pattern
Controller
View
Performs Output
Performs Input
Notification method
Read methods
Model
Write methods
41
Observable Model
public class AnObservableCounter extends ACounter
implements ObservableCounter Vector observers
new Vector() public void addObserver(CounterOb
server observer) observers.addElement(observer
) observer.update(this) public void
removeObserver(CounterObserver observer)
observers.removeElement(observer) void
notifyObservers() for (int observerNum 0
observerNum lt observers.size()
observerNum) ((CounterObserver)
observers.elementAt(observerNum)).update(this)
public void add (int amount) super.add(amoun
t) notifyObservers()
42
Console View
public class ACounterConsoleView implements
CounterObserver public void update(ObservableCo
unter counter) System.out.println("Counter "
counter.getValue())
43
Console Controller
public class ACounterController implements
CounterController public void
processInput(Counter counter) while (true)
int nextInput readInt() if (nextInput
0) return counter.add(nextInput)

44
Console Main
public static main (String args) Counter
model new ACounter() model.addObserver
(new AConsoleView()))) (new
ACounterController()).processInput(model)
45
Console Main
public static main (String args) Counter
model new ACounter() model.addObserver
(new AConsoleView()))) (new
ACounterController()).processInput(model)
46
Façade Pattern
Interactor
Controller
View
Notification method
Read methods
Model
Write methods
47
Console Interactor/Facade
public class AConsoleInteractor implements
ConsoleInteractor public void interact
(ObservableCounter model) model.addObserver(ne
w ACounterConsoleView()) (new
ACounterController()).processInput(model)
48
Interactor-based Main
public static main (String args) (new
AConsoleInteractor()).interact(new ACounter())
49
Assignments Design-Patterns in the Medium
Tokenizer
Iterator
Evaluator
50
Assignments Design-Patterns in the Medium
Tokenizer
Facade
Iterator
Evaluator
51
Assignments Design-Patterns in the Medium
Tokenizer
Facade
Iterator
Evaluator
52
Assignments Design-Patterns in the Medium
Interactor
Spreadesheet Model
53
Classroom Experience

• 2003
• 37 students
• 10 freshmen
• 1 high school junior
• Pre-requisite conventional programming
• Primitive types
• Arrays
• Loops
• Procedures

• O-O programming
• Classes
• Interfaces
• Inheritance
• Design patterns
• MVC, observer, façade, interactor
• iterator, factory, composite
• visitor, adapter, proxy

54
Evaluation

• Overall class performance very good
• 33 out of 37 students finished spreadsheet
• Freshmen were more enthusiastic and had better
  grades
• High school junior had highest score in first
  midterm
• Enthusiasm and intellect more important than
  background and college experience

55
Evaluation Survey of 27 students
Pattern Not well understood Memorable Forgettable
Iterator 0 5 1
MVC 6 8 3
Observer 5 7 4
Composite 0 9 0
Factory 3 7 3
Facade 2 9 2
56
Conclusions

• To fully understand patterns need before and
  after pattern use comparison with exact code
  changes shown.
• It is possible to present in classroom MVC,
  interactor, façade, iterator, composite, and
  factory design patterns in the small
• Each interface/class fits in a slide
• This experience can be used to exercise design
  patterns in the medium
• A single project incrementally created in 2-week
  assignments.
• Spreadsheet project had about 40
  classes/interfaces
• More patterns and experience needed.
• More details http//www.cs.unc.edu/dewan/comp114
  /

57
The End
58
Recursive Composition
AnObservable Counter
CounterJOptionView
Console View
ConsoleController
59
Observer/Observable Pattern
Notification Method
Observer 1
Observer 2
Observable 1
Observer 3
Observer N
60
Console Controller And View Main
package main import models.AnObservableCounter i
mport facades.AConsoleControllerAndView public
class ACounterMain public static void
main(String args) (new
AConsoleControllerAndView()).edit(new
AnObservableCounter())
61
Console Controller And JOption View Main
package main import models.AnObservableCounter i
mport facades.AConsoleControllerAndJOptionView pu
blic class ACounterMain public static void
main(String args) (new
AConsoleContollerAndJOptionView()).edit(new
AnObservableCounter())
62
ConsoleControllerAndJView Facade
package facades import models.ObservableCounter
import models.CounterObserver import
controllers.ACounterController import
controllers.CounterController import
views.ACounterJOptionView public class
AConsoleControllerAndJOptionView implements
CounterInteractor public void
edit(ObservableCounter model) CounterObserver
view new ACounterJOptionView() model.addObser
ver(view) CounterController controller new
ACounterController() controller.setModel(model)
controller.processInput()
63
Model/Interactor Pattern
Interactor
UI Code
Arbitrary UI unaware methods
Model
Computation code
64
Main with two views
package main import models.AnObservableCounter i
mport facades.AConsoleControllerAndViewAndJOptionV
iew public class ACounterMain public static
void main(String args) (new
AConsoleControllerAndViewAndJOptionView()).edit(ne
w AnObservableCounter())
65
Facade over facade
package facades import models.ObservableCounter
import models.CounterObserver import
views.ACounterJOptionView public class
AConsoleContollerAndViewAndJOptionView implements
CounterInteractor public void
edit(ObservableCounter model) model.addObserve
r(new ACounterJOptionView()) (new
AConsoleContollerAndView()).edit(model)
66
Main with two views and OE
package main import models.AnObservableCounter i
mport bus.uigen.ObjectEditor import
facades.AConsoleControllerAndViewAndJOptionView p
ublic class ACounterMain public static void
main(String args)
ObservableCounter model new AnObservableCounter
() (new ObjectEditor()).edit(model) (new
ConsoleControllerAndViewAndJOptionView()).edit(mod
el)
67
Observers that are not views

• Spreadsheet cell observes cells on which it
  depends..
• Monitoring of appliance usage
• Each time I do setChannel() on TV event logged.
• Any big brother app!
• Counter observer?

68
Rocket Observer
69
Instances created and composed
AnObservable Counter
ACounterConsole View
ACounterController
ARocket
AConsoleControllerAndView
ARocketLauncher
70
Rocket Interface
package models import models.CounterObserver pub
lic interface Rocket extends CounterObserver
public void launch()
71
Rocket Launching Facade
package models import models.ObservableCounter p
ublic class ARocket implements Rocket public
void update(ObservableCounter counter) if
(counter.getValue() 0) launch() public
void launch() System.out.println("LIFT
OFF!!!")
72
Rocket Launching Facade
package facades import models.ObservableCounter
import models.CounterObserver import
models.ARocket import facades.AConsoleContollerAn
dView public class ARocketLaunchCountDown
implements CounterInteractor public final int
INITIAL_COUNTER_VALUE 10 public void
edit(ObservableCounter counter)
counter.add(INITIAL_COUNTER_VALUE) Counter
Observer rocket new ARocket() counter.addObse
rver(rocket) (new AConsoleContollerAndView()).e
dit(counter)
73
Rocket launching main
package main import models.AnObservableCounter i
mport models.ARocketLauncher import
facades.ARocketLaunchCountDown public class
ACounterMain public static void main(String
args) (new ARocketLaunchCountDown()).
edit(new AnObservableCounter())
74
(No Transcript)
75
Teaching Inter-Object Design Patterns to Freshmen
?
Interface
Inheritance
Example
Exercise
?
?
?
?
Small
Medium
76
Teaching Inter-Object Design Patterns to Freshmen
Iterator
MVC
Class
Object
Interactor
Observer
Interface
Facade
Inheritance
Composite
Factory
4 vs. ?? pages
77
Teaching Inter-Object Design Patterns to Freshmen
Iterator
MVC
Class
Object
Interactor
Observer
Interface
Facade
Inheritance
Composite
Factory
4 vs. ?? pages
78
Teaching Inter-Object Design Patterns to Freshmen
Iterator
MVC
Class
Object
Interactor
Observer
Interface
Facade
Inheritance
Composite
Factory
79
Teaching Inter-Object Design Patterns to Freshmen
Iterator
MVC
Class
Object
Interactor
Observer
Interface
Facade
Inheritance
Composite
Factory
80
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
Modular
81
Teaching Inter-Object Design Patterns to Freshmen
Class
Object
Interface
Inheritance
Example
Exercise
82
Teaching Inter-Object Design Patterns to Freshmen
Iterator
MVC
Class
Object
Facade
Interactor
Interface
Factory
Composite
Inheritance
83
Teaching Design Patterns to Freshmen

• Prasun Dewan
• UNC-Chapel Hill

84
Teaching Design Patterns to Freshmen

• Recurrin
• UNC-Chapel Hill

85
Teaching Inter-Object Design Patterns to Freshmen

• Recurring theme in programming
• Not captured by a programming construct
• Design pattern framework architecture
• Components
• Problem context
• Abstract solution
• Pros/cons of solution

86
Motivates Model/UI Separation
87
Counter Model
public class ACounter implements Counter int
counter 0 public void add (int amount)
counter amount public int getValue()
return counter

• Code reusability
• Less duplication
• Fewer changes

88
Interactor/Model Pattern
Interactor
Performs Output
Performs Input
Notification method
Read methods
Model
Write methods
aka Model/View Pattern
89
Console UI
public class ConsoleUI static Counter
counter new ACounter() public static
void main(String args) while (true)
int nextInput readInt() if (nextInput
0) return counter.add(nextInput)
System.out.println("Counter "
counter.getValue())