Slide 1

Anatomy of an Interactive ApplicationPrasun DewanDepartment of Computer ScienceUniversity of North Carolina at Chapel Hilldewan@cs.unc.eduCode available at: https://github.com/pdewan/ColabTeaching

#Single-User UI: An Input EchoerDisplays arbitrary number of messages entered by the user.Echoes input until user enters quit

#Implementation: Main Methodpublic class MonolithicEchoer {protected static List history = new ArrayList();public static void main(String[] anArgs) { for (;;) { System.out.println(PROMPT); Scanner scanner = new Scanner(System.in); String nextInput = scanner.nextLine(); if (nextInput.equals(QUIT)) { processQuit(); break; } else if (nextInput.equals(HISTORY)) printHistory(); else processInput(nextInput); }}Issues with this implementation?The UI and data are both in one classDataUI

#

Multiple User-InterfacesA single user may or may not want multiple user interfacesDifferent users are very likely to want multiple user interfaces unless all of them are sharing the exact same state through desktop/window sharingCollaboration Data/UI Separation

#Separation of ConcernsHistory SemanticsHistory Display 1History SemanticsHistory Display 2Can change display without changing other aspects of historyDisplay and semantics should go in different classes

#Separation of ConcernsABABif a part B of a class can be changed without changing some other part A of the class, then refactor and put A and B in different classes

#Model/Interactor(Editor, View) PatternModelInteractor/Editor/ViewUI CodeComputation CodeInteractor(Editor, View) = MVC View + MVC Controller

#Multiple Consistent InteractorsObserver (Listener)Observable (Listenable)ModelInteractor 1Interactor 2Interactor 3Interactor 4Changed observable notifies observers in a subpatternInput EnteredOutput ShownModel ChangedChange Announced

#List Modelpublic class ASimpleList implements SimpleList { List simpleList = new ArrayList(); List observers = new ArrayList(); public void add(ElementType anElement) { simpleList.add(simpleList.size(), anElement); } public void observableAdd(int anIndex, ElementType anElement) { add(anIndex, anElement); notifyAdd(anIndex, anElement); } public void notifyAdd(List observers, int index, ElementType newValue) { for (ListObserver observer:observers) observer.elementAdded(index, newValue); }}Model ChangedChange AnnouncedUI Unaware CodeHistory ArrayList encapsulatedObserver list

#List Interactorpublic class AnEchoInteractor implements EchoerInteractor { protected SimpleList history; public AnEchoInteractor(SimpleList aHistory) { history = aHistory; } protected void processInput(String anInput) { addToHistory(computeFeedback(anInput)); } protected void addToHistory(String newValue) { history.observableAdd(newValue); } public void elementAdded(int anIndex, Object aNewValue) { displayOutput(history.get(anIndex)); } protected void displayOutput(String newValue) { System.out.println(newValue); }Input EnteredModel ChangedChange AnnouncedOutput DisplayedWho created and connected the model and interactorModel bound

#Composerpublic class AnEchoComposerAndLauncher implements EchoerComposerAndLauncher{ protected SimpleList history; protected EchoerInteractor interactor; // factory method protected SimpleList createHistory() { return new ASimpleList(); } // factory method protected EchoerInteractor createInteractor() { return new AnEchoInteractor(history); } protected void connectModelInteractor() { interactor = createInteractor(); history.addObserver(interactor); }Model CreatedInteractor CreatedInteractor Registered

#ExampleASimpleListInteractoradd()size()get()Write methodsRead methodsWrite methods send notifications

#General PatternModelInteractorWrite methodsRead methodsWrite methods send notifications

#Model with Multiple InteractorsModelInteractor 1Interactor 2Interactor 3Interactor 4Dual?

#Interactors with Multiple ModelsModelInteractor 1Interactor 2Interactor 3Interactor 4ModelA UI showing multiple tanks, people, and other models

#Summary of Concepts in Creating Extensible Interactive ApplicationCollaborative Multi-View AppsSeparation of Computation and UI CodeModel /Interactor PatternObserver/Observable SubpatternA model can have multiple interactors and vice versa

#NextModelInteractorTypes of interactors?Types of models?

#