Software Design and
Architecture
Fakhar Lodhi
Topics Covered: 110 – 118
MVC Architecture
Software Design and
Architecture
Topic#110
MVC – Challenges of Interactive Application
Questions
• How to reuse code among different
interactive applications offering the same
service?
• How to simultaneously create multiple user
interfaces for same service?
Questions
• Normal vs. Slide sorter
• Shortcuts vs. menus vs. buttons
Questions
• How to simultaneously create multiple user interfaces for same
service on different computers?
• Facebook, email
Questions
• How to simultaneously create distributed user interfaces
• multiple complete user interfaces for different users on different computers
• Single user-interface on large computer controlled by multiple mobile devices
Software Design and
Architecture
Topic#110
END!
Software Design and
Architecture
Topic#111
MVC – Example Part I
Requirements
Example: Counter
Can add
arbitrary Different
positive/negative user
value to an
integer interfaces
Console-based Input and Output
Console-based Input and JOption
Output
Console-based Input,Output and JOption Output
Software Design and
Architecture
Topic#111
END!
Software Design and
Architecture
Topic#112
MVC – Example Part II
Monolithic Console Implementation
public class MonolithicConsoleUI {
public static void main(String[] args) {
int counter = 0;
while (true) { Output
System.out.println("Counter: " + counter);
int nextInput = Console.readInt();
if (nextInput == 0) break; Input
counter += nextInput;
}
}
}
Software Design and
Architecture
Topic#112
END!
Software Design and
Architecture
Topic#113
MVC – Example Part III
Monolithic Mixed UI Implementation
import javax.swing.JOptionPane;
public class ConsoleUI {
public static void main(String[] args) {
int counter = 0;
Output
while (true) {
JOptionPane.showMessageDialog(
null, “Counter: ” + counter);
int nextInput = Console.readInt();
if (nextInput == 0) break; Input
counter += nextInput;
}
}
}
Software Design and
Architecture
Topic#113
END!
Software Design and
Architecture
Topic#114
MVC – Example Part IV
Models and Interactors
Multiple UIs?
Cannot use both UIs simultaneously to update same counter
• A new application has to be developed
• Now we have three application
• Console-based UI
• Mixed UI
• Multiple Mixed UI
Code Duplication
How can we remove the
code duplication in these
three classes?
Model/Interactor Pattern
UI Code Interactor
Arbitrary UI unaware
methods
Computation Code Model
Models and Interactors
• Model:
• common functionality
• counter semantics: storage and
manipulation of an integer counter
• Interactor
• different for each interface
• counter user-Interface: user-interface to
display and change the counter
29
Software Design and
Architecture
Topic#114
END!
Software Design and
Architecture
Topic#115
MVC – Example Part V
Using Models and Interactors
public class ConsoleUI {
public static void main(String[] args) {
int counter = 0;
while (true) {
System.out.println("Counter: " + counter);
int nextInput = Console.readInt();
if (nextInput == 0) break;
counter += nextInput;
}
}
}
Counter Model
public class ACounter implements Counter { No
int counter = 0; input/output
public void add (int amount) {
counter += amount; Any class that can
} be attached to a
user-interface but
public int getValue() {
is oblivious to the
return counter; user-interface is
} referred to as a
} model.
Console Interactor
public class AConsoleUIInteractor implements CounterInteractor {
public void edit (Counter counter) {
while (true) {
System.out.println("Counter: " + counter.getValue());
int nextInput = Console.readInt();
if (nextInput == 0) return;
counter.add(nextInput);
}
}
}
This class does not know how the counter is implemented
but is aware of the methods provided by it.
Console Interactor
public class AConsoleUIInteractor implements CounterInteractor {
public void edit (Counter counter) {
while (true) {
System.out.println("Counter: " + counter.getValue());
int nextInput = Console.readInt();
if (nextInput == 0) return;
counter.add(nextInput);
}
}
}
any class that implements the user-interface of a model without
knowing its implementation is referred to as an interactor.
Putting it all together
public class InteractorBasedConsoleUI {
public static void main(String args[]) {
(new AConsoleUIInteractor()).edit(new
ACounter());
}
}
Mixed Interactor
public class AMixedUIInteractor implements CounterInteractor {
public void edit (Counter counter) {
Shared Model Code
while (true) {
JOptionPane.showMessageDialog(null,
"Counter: " + counter.getValue());
int nextInput = Console.readInt();
if (nextInput == 0) break;
counter.add(nextInput); Output
}
} Input
}
Multiple UI Interactor
public class AMultipleUI implements CounterInteractor {
public void edit (Counter counter) {
Shared Model Code
while (true) {
System.out.println("Counter: " + counter.getValue());
JOptionPane.showMessageDialog(null,
"Counter: " + counter.getValue());
int nextInput = Console.readInt();
if (nextInput == 0) break;
counter.add(nextInput); Output
}
} Input
}
UI Implementation is
I/O Code is Duplicated
now monolithic
Software Design and
Architecture
Topic#115
END!
Software Design and
Architecture
Topic#116
MVC – Example Part VI
Drawbacks of Monolithic UI
Drawbacks of Monolithic UI
AConsoleUI
Duplicated Input Code
Counter AMixedUI
Duplicated Output
Code AMultipleUI
Software Design and
Architecture
Topic#116
END!
Software Design and
Architecture
Topic#117
MVC – Example Part VII
MVC Architectural Pattern
MVC Pattern
Performs Output
Performs Input Controller View
Write Methods Model Read Methods
Computation Code
View can be on computer with big
screen and controller on smart phone
MVC Pattern in Counter
Performs Output
Performs Input
Controller View
add() Model getValue()
Changing to Console View
Performs Output
Performs Input Controller View
add() Model getValue()
Multiple Views
Performs Output
Performs Input Controller View
add() Model getValue()
View
Multiple Views and Controllers
Controller 1 View 1
Controller 2 Model View 2
Controller 3 View 3
Menus, buttons, shortcuts
can be handled by different
Controller 4 controllers (in same or View 4
different program)
Software Design and
Architecture
Topic#117
END!
Software Design and
Architecture
Topic#118
MVC – Example Part VIII
MVC and Observer
Syncing Controllers & View
Controller 1 View 1
Controller 2 Model View 2
Controller 3 View 3
Controller 4 View 4
In Http-based “MVC” a single view and controller exists in the browser and the
model in the server. A Model cannot initiate actions in the browser so the
controller directly communicates with the view
Observer Pattern
Observable Observers
View 1
Model View 2
Changed model
notifies views View 3
View 4
MVC Pattern (Review)
Performs Output
Performs Input
Controller View
Write Methods Model Read Methods
View can be on computer with big
screen and controller on smart phone
Notifications in MVC Pattern
Performs Output
Performs Input
Controller Notification Method View
Write Methods Model Read Methods
Observer
Registration
Method
Complete MVC
Model Connection
Method
Performs Output
Performs Input
Controller Notification Method View
Write Methods Model Read Methods
Observer
Registration
Method
Software Design and
Architecture
Topic#118
END!
