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 ClassObject Interface Inheritance Observer

Teaching Inter-Object Design Patterns to Freshmen Facade Iterator Interactor Composite MVC Factory Observer ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise Monolithic, single- object programs ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise ClassObject Interface Inheritance Modular, multiple- object programs

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise Implicit pattern ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise Exact mimicking ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise Matching vs. using ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise Matching vs. using ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen Matching vs. using ClassObject Interface Inheritance ExampleExercise

Teaching Inter-Object Design Patterns to Freshmen Exercise Matching vs. using ClassObject Interface Inheritance Example

Teaching Inter-Object Design Patterns to Freshmen Explicit pattern ClassObject Interface Inheritance ExampleExercise

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise CompilerToolkit Complex & Abstract ClassObject Interface Inheritance Large

Diff. Approach Teaching Inter-Object Design Patterns to Freshmen ExampleExercise CompilerToolkit ClassObject Interface Inheritance Large Complex & Abstract

Diff. Approach Teaching Inter-Object Design Patterns to Freshmen ExampleExerciseConcrete ClassObject Interface Inheritance Small (1 slide) Before After

Diff. Approach Teaching Inter-Object Design Patterns to Freshmen ExampleExercise ?? Concrete ClassObject Interface Inheritance Before After Medium (2 wk hw) Small (1 slide)

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise CounterSearch Concrete ClassObject Interface Inheritance Before After Before After Medium (2 wk hw)

Teaching Inter-Object Design Patterns to Freshmen ExampleExercise CounterSearch Concrete ClassObject Interface Inheritance Before After

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

Composing Model and Interactor public static main (String args[]) (new AConsoleUI()).interact (new ACounter()); }

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

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 MixedUI ConsoleUI MixedUI Counter MultipleUI Duplicated input code

MVC Pattern ControllerView Model Performs InputPerforms Output Write methods Read methods

ControllerView MVC Pattern in Counter Model add() getValue() Performs InputPerforms Output

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 Observable Observer Controller 1 Controller 2 Controller 3 Controller M View 1 View 2 View 3 View N

MVC Pattern ControllerView Model Performs InputPerforms Output Write methods Read methods Notification method

Observable Model public 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 Main public static main (String args[]) Counter model = new ACounter(); model.addObserver (new AConsoleView()))); (new ACounterController()).processInput(model); } Input Code Shared

Console Main public static main (String args[]) Counter model = new ACounter(); model.addObserver (new AConsoleView()))); (new ACounterController()).processInput(model); } Composition code duplicated

Facade Façade Pattern ControllerView Model Write 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 Iterator

Assignments: Design-Patterns in the Medium Facade Tokenizer Evaluator Iterator

Assignments: Design-Patterns in the Medium Facade Tokenizer Evaluator Iterator A1 Facade Tokenizer Evaluator Iterator Observer 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 PatternNot well understood MemorableForgettable Iterator051 MVC683 Observer574 Composite090 Factory373 Facade292

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:

The End

AConsoleInteractorJOptionView AConsoleInteractor CounterJOptionV iew Recursive Composition AnObservable Counter ConsoleController Console View

Observer/Observable Pattern Observable 1 Observer 1 Observer 2 Observer 3 Observer N Observable 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 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.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 OE package 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 AnObservable Counter 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 main package 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 ExampleExercise ?? Small ? ?? Medium Interface Inheritance Facade Iterator Interactor Composite MVC Factory Observer ClassObject Facade Iterator Interactor Composite MVC Factory Observer ClassObject 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 ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen Facade Iterator Interactor Composite MVC Factory Observer 4 vs. ?? pages ClassObject Interface Inheritance

Teaching Inter-Object Design Patterns to Freshmen ClassObject Interface Inheritance Facade Iterator Interactor Composite MVC Factory Observer

Teaching Inter-Object Design Patterns to Freshmen ClassObject Interface Inheritance Facade Iterator Interactor Composite MVC Factory Observer

Teaching Inter-Object Design Patterns to Freshmen ClassObject Interface Inheritance ExampleExercise Modular

Teaching Inter-Object Design Patterns to Freshmen ClassObject Interface Inheritance ExampleExercise

Teaching Inter-Object Design Patterns to Freshmen Facade Iterator Interactor Composite MVC Factory ClassObject 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 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

Interactor/Model Pattern Model Write methods Read methods Notification method Interactor aka Model/View Pattern Performs InputPerforms Output

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