teaching inter-object design patterns to freshmen prasun dewan unc-chapel hill
TRANSCRIPT
Teaching Inter-Object Design Patterns to Freshmen
Prasun Dewan
UNC-Chapel Hill
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
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)
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)
Teaching Inter-Object Design Patterns to Freshmen
Facade
Iterator
Interactor
Composite
MVC
Factory
Class Object
Interface
Inheritance
Observer
Teaching Inter-Object Design Patterns to Freshmen
Facade
Iterator
Interactor
Composite
MVC
Factory
ObserverClass Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Monolithic, single- object programs
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Class Object
Interface
Inheritance
Modular, multiple- object programs
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Implicit pattern
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Exact mimicking
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Matching vs. using
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Matching vs. using
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Matching vs. using
Class Object
Interface
Inheritance
Example Exercise
Teaching Inter-Object Design Patterns to Freshmen
Exercise
Matching vs. using
Class Object
Interface
Inheritance
Example
Teaching Inter-Object Design Patterns to Freshmen
Explicit pattern
Class Object
Interface
Inheritance
Example Exercise
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Class Object
Interface
Inheritance
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge BuilderFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge Builder
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Compiler Toolkit
Complex & Abstract
Class Object
Interface
Inheritance
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge BuilderFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge Builder
Large
Diff. Approach
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Compiler Toolkit
Class Object
Interface
Inheritance
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge BuilderFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge Builder
Large
Complex & Abstract
Diff. Approach
Teaching Inter-Object Design Patterns to Freshmen
Example ExerciseConcrete
Class Object
Interface
Inheritance
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge BuilderFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge Builder
Small (1 slide)
Before
After
Diff. Approach
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
? ?
Concrete
Class Object
Interface
Inheritance
Before
After
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge BuilderFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Dec
orat
or
Bridge Builder
Medium (2 wk hw)Small (1 slide)
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Counter Search
Concrete
Class Object
Interface
Inheritance
Before
After
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
ObserverBefore
After
Medium (2 wk hw)
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
Counter Search
Concrete
Class Object
Interface
Inheritance
Before
After
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Counter
• Can add arbitrary positive/negative value to an integer.
• Different user interfaces.
Console Input and Output
Console Input and JOption Output
Console Input,Output and JOption Output
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);}
}}
Model/Interactor Separation
ConsoleUI
MixedUI
Counter MultipleUI
Model
Model has no UI code and only semantics!
Interactor
Interactor
Interactor
Composing Model and Interactor
public static main (String args[]) (new AConsoleUI()).interact (new ACounter());}
Counter Modelpublic 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
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());}
}}
Shared model code
Input
Output
Monolithic Inetractor Drawbacks
MixedUIConsoleUI
MixedUI
Counter MultipleUI
Duplicated input code
MVC Pattern
Controller View
Model
Per
form
s In
put
Per
form
s O
utpu
t
Write methods
Read methods
Controller View
MVC Pattern in Counter
Modeladd() getValue()
Per
form
s In
put
Per
form
s O
utpu
t
Multiple Views and Controllers
Model
Controller 1
Controller 2
Controller 3
Controller M
View 1
View 2
View 3
View N
Syncing Controllers & View
Model
Controller 1
Controller 2
Controller 3
Controller M
View 1
View 2
View 3
View N
Observer/Observable Pattern
Model
Changed object notifies views
ObservableObserver
Controller 1
Controller 2
Controller 3
Controller M
View 1
View 2
View 3
View N
MVC Pattern
Controller View
Model
Per
form
s In
put
Per
form
s O
utpu
t
Write methods
Read methods
Notification method
Observable Modelpublic class AnObservableCounter extends ACounter implements ObservableCounter {
Vector observers = new Vector();public void addObserver(CounterObserver observer) {
observers.addElement(observer);observer.update(this);
}public void removeObserver(CounterObserver observer) {
observers.removeElement(observer);}void notifyObservers() { for (int observerNum = 0; observerNum < observers.size(); observerNum++)
((CounterObserver) observers.elementAt(observerNum)).update(this);}public void add (int amount) {
super.add(amount);notifyObservers();
}}
Console View
public class ACounterConsoleView implements CounterObserver {public void update(ObservableCounter counter) {
System.out.println("Counter: " + counter.getValue());}
}
Console Controller
public class ACounterController implements CounterController { public void processInput(Counter counter) {
while (true) {int nextInput = readInt();if (nextInput == 0) return;counter.add(nextInput);
} }}
Console Mainpublic static main (String args[]) Counter model = new ACounter(); model.addObserver (new AConsoleView()))); (new ACounterController()).processInput(model);}
Input Code Shared
Console Mainpublic static main (String args[]) Counter model = new ACounter(); model.addObserver (new AConsoleView()))); (new ACounterController()).processInput(model);}
Composition code duplicated
Facade
Façade Pattern
Controller View
ModelWrite methods
Read methods
Notification method
Interactor
Console Interactor/Facade
public class AConsoleInteractor implements ConsoleInteractor {public void interact (ObservableCounter model) {
model.addObserver(new ACounterConsoleView());(new ACounterController()).processInput(model);
}
Interactor-based Main
public static main (String args[]) (new AConsoleInteractor()).interact(new ACounter());}
Assignments: Design-Patterns in the Medium
Tokenizer
Evaluator
Iter
ator
Assignments: Design-Patterns in the Medium
Fac
ade Tokenizer
Evaluator
Iter
ator
Assignments: Design-Patterns in the Medium
Fac
ade Tokenizer
Evaluator
Iter
ator
A1
Fac
ade Tokenizer
Evaluator
Iter
ator
Obs
erve
r
B2
Assignments: Design-Patterns in the Medium
Spreadesheet Model
Interactor
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
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”
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
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/
The End
AConsoleInteractorJOptionViewAConsoleInteractor
CounterJOptionView
Recursive Composition
AnObservableCounter
ConsoleController Console View
Observer/Observable Pattern
Observable 1
Observer 1
Observer 2
Observer 3
Observer NObservable 2
Notification Method
Console Controller And View Main
package main;import models.AnObservableCounter;import facades.AConsoleControllerAndView;public class ACounterMain {
public static void main(String[] args) { (new AConsoleControllerAndView()).edit(new
AnObservableCounter());
}}
Console Controller And JOption View Main
package main;import models.AnObservableCounter;import facades.AConsoleControllerAndJOptionView;public class ACounterMain {
public static void main(String[] args) { (new AConsoleContollerAndJOptionView()).edit(new
AnObservableCounter());}
}
ConsoleControllerAndJView Facadepackage 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.addObserver(view);CounterController controller = new ACounterController();controller.setModel(model);controller.processInput();
}}
Model/Interactor Pattern
Interactor
Model
Arbitrary UI unaware methods
Computation code
UI Code
Main with two views
package main;import models.AnObservableCounter;import facades.AConsoleControllerAndViewAndJOptionView;public class ACounterMain {
public static void main(String[] args) { (new AConsoleControllerAndViewAndJOptionView()).edit(new
AnObservableCounter());}
}
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.addObserver(new ACounterJOptionView());(new AConsoleContollerAndView()).edit(model);
}}
Main with two views and OEpackage main;import models.AnObservableCounter;import bus.uigen.ObjectEditor;import facades.AConsoleControllerAndViewAndJOptionView;public class ACounterMain {
public static void main(String[] args) { ObservableCounter model = new AnObservableCounter();
(new ObjectEditor()).edit(model);(new ConsoleControllerAndViewAndJOptionView()).edit(model);
}}
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?
Rocket Observer
Rocket added observer before view
AConsoleControllerAndView
Instances created and composed
AnObservableCounter
ACounterController ACounterConsole View
ARocket
ARocketLauncher
Rocket Interface
package models;import models.CounterObserver;public interface Rocket extends CounterObserver {
public void launch() ;}
Rocket Launching Facade
package models;import models.ObservableCounter;public class ARocket implements Rocket {
public void update(ObservableCounter counter) {if (counter.getValue() == 0)
launch();}public void launch() {
System.out.println("LIFT OFF!!!");}
}
Rocket Launching Facade
package facades;import models.ObservableCounter;import models.CounterObserver;import models.ARocket;import facades.AConsoleContollerAndView;public class ARocketLaunchCountDown implements CounterInteractor {
public final int INITIAL_COUNTER_VALUE = 10;public void edit(ObservableCounter counter) {
counter.add(INITIAL_COUNTER_VALUE);CounterObserver rocket = new ARocket();counter.addObserver(rocket);(new AConsoleContollerAndView()).edit(counter);
}}
Rocket launching mainpackage main;import models.AnObservableCounter;import models.ARocketLauncher;import facades.ARocketLaunchCountDown;public class ACounterMain {
public static void main(String[] args) { (new ARocketLaunchCountDown()).edit(new AnObservableCounter());
}}
Teaching Inter-Object Design Patterns to Freshmen
Example Exercise
? ?Small
?
? ?Medium
Interface
Inheritance
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Class ObjectFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Class ObjectFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Class ObjectFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Class ObjectFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
Teaching Inter-Object Design Patterns to Freshmen
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
4 vs. ?? pages
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Facade
Iterator
Interactor
Composite
MVC
Factory
Observer
4 vs. ?? pages
Class Object
Interface
Inheritance
Teaching Inter-Object Design Patterns to Freshmen
Class Object
Interface
InheritanceFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Teaching Inter-Object Design Patterns to Freshmen
Class Object
Interface
InheritanceFacade
Iterator
Interactor
Composite
MVC
Factory
Observer
Teaching Inter-Object Design Patterns to Freshmen
Class Object
Interface
Inheritance
Example Exercise
Modular
Teaching Inter-Object Design Patterns to Freshmen
Class Object
Interface
Inheritance
Example Exercise
Teaching Inter-Object Design Patterns to Freshmen
Facade
Iterator
Interactor
Composite
MVC
Factory
Class Object
Interface
Inheritance
Teaching Design Patterns to Freshmen
Prasun Dewan
UNC-Chapel Hill
Teaching Design Patterns to Freshmen
• Recurrin
•UNC-Chapel Hill
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
Motivates Model/UI Separation
ConsoleUI
MixedUI
Counter MultipleUI
Model
Model has no UI code and only semantics!
Counter Modelpublic 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
Interactor/Model Pattern
ModelWrite methods
Read methods
Notification method
Interactor
aka Model/View Pattern
Per
form
s In
put
Per
form
s O
utpu
t
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());}
}}
Shared model code
Input
Output