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 Facade Iterator Interactor Composite MVC Factory ClassObject Interface Inheritance Observer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 ConsoleUI MixedUI Counter MultipleUI Model Model has no UI code and only semantics! Interactor

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()); } Shared model code Input Output

34. Monolithic Inetractor Drawbacks MixedUI ConsoleUI MixedUI Counter MultipleUI Duplicated input code

35. MVC Pattern ControllerView Model Performs InputPerforms Output Write methods Read methods

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

37. Multiple Views and Controllers Model Controller 1 Controller 2 Controller 3 Controller M View 1 View 2 View 3 View N

38. Syncing Controllers & View Model Controller 1 Controller 2 Controller 3 Controller M View 1 View 2 View 3 View N

39. 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

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

41. 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(); }

42. Console View public class ACounterConsoleView implements CounterObserver { public void update(ObservableCounter 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); } Input Code Shared

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

46. Facade Façade Pattern ControllerView Model Write methods Read methods Notification method Interactor

47. Console Interactor/Facade public class AConsoleInteractor implements ConsoleInteractor { public void interact (ObservableCounter model) { model.addObserver(new 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 Evaluator Iterator

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

51. Assignments: Design-Patterns in the Medium Facade Tokenizer Evaluator Iterator A1 Facade Tokenizer Evaluator Iterator Observer B2

52. Assignments: Design-Patterns in the Medium Spreadesheet Model Interactor

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 PatternNot well understood MemorableForgettable Iterator051 MVC683 Observer574 Composite090 Factory373 Facade292

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/http://www.cs.unc.edu/~dewan/comp114/

57. The End

58. AConsoleInteractorJOptionView AConsoleInteractor CounterJOptionV iew Recursive Composition AnObservable Counter ConsoleController Console View

59. Observer/Observable Pattern Observable 1 Observer 1 Observer 2 Observer 3 Observer N Observable 2 Notification Method

60. 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()); }

61. 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()); }

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.addObserver(view); CounterController controller = new ACounterController(); controller.setModel(model); controller.processInput(); }

63. Model/Interactor Pattern Interactor Model Arbitrary UI unaware methods Computation code UI Code

64. 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()); }

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.addObserver(new ACounterJOptionView()); (new AConsoleContollerAndView()).edit(model); }

66. 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); }

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 Rocket added observer before view

69. AConsoleControllerAndView Instances created and composed AnObservable Counter ACounterController ACounterConsole View ARocket ARocketLauncher

70. Rocket Interface package models; import models.CounterObserver; public interface Rocket extends CounterObserver { public void launch() ; }

71. 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!!!"); }

72. 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); }

73. 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()); }

75. 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

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

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

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

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

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

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

82. Teaching Inter-Object Design Patterns to Freshmen Facade Iterator Interactor Composite MVC Factory ClassObject Interface 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 ConsoleUI MixedUI Counter MultipleUI Model Model has no UI code and only semantics!

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 Model Write methods Read methods Notification method Interactor aka Model/View Pattern Performs InputPerforms Output

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()); } Shared model code Input Output