CS3249 System Architecture 1CS3249
System Architecture 11CS3249 System Architecture
System Architecture
Leow Wee KhengCS3249 User Interface Development
CS3249 System Architecture 2CS3249 System Architecture 2CS3249System Architecture 2System Architecture 2CS3249
CS3249 System Architecture 3CS3249 System Architecture 3CS3249System Architecture 3System Architecture 3CS3249
There are more things inside than outside!
CS3249 System Architecture 4CS3249 System Architecture 4CS3249System Architecture 4System Architecture 4CS3249
10%
30%
60%
Look-and-Feel Icebergadapted from [IBM92]
Presentation(Look)● visual
representations● aesthetics
Interaction(Feel)● techniques● style
Architecture(Behaviour)● organisation● properties● algorithms
CS3249 System Architecture 5CS3249 System Architecture 5CS3249System Architecture 5System Architecture 5CS3249
Some interactions are simple open a file
Some interactions are complex zoom an image by
program user entering zoom factor user rotating mouse wheel user dragging image widget
while satisfying various conditions non-negative zoom factor maintain aspect ratio handle images larger than screen size
complexbecause
many“things”interact
CS3249 System Architecture 6CS3249 System Architecture 6CS3249System Architecture 6System Architecture 6CS3249
At program / object class level program components interact
design and implementation of algorithms
At system level system components interact
software engineering
CS3249 System Architecture 7CS3249 7System Architecture
Software Engineering Principles
Decomposition
Separation of Concern
Abstraction
High Cohesion
Loose Coupling
Extensibility
Robustness
Security
etc...
CS3249 System Architecture 8CS3249 8System Architecture
Basic Architecture
Software System
GUI Backend
35age
CS3249 System Architecture 9CS3249 System Architecture 9CS3249System Architecture 9System Architecture 9CS3249
Standard widgets keep data that they display. Data is duplicated in GUI and backend.
Convenient for quick update, e.g., repainting GUI.
GUI Backend
35ageview
35data
CS3249 System Architecture 10CS3249 System Architecture 10CS3249System Architecture 10System Architecture 10CS3249
If multiple views are needed for single data,need to make sure they are consistent.
must synchronise
Backend
35age
spin boxdata
sliderdata
CS3249 System Architecture 11CS3249 System Architecture 11CS3249System Architecture 11System Architecture 11CS3249
Consider a time table application
Duplication of data in GUI, Scheduler and DB.
Consistency problem: need to synchronise copies of data.
Can we remove duplicates?
timetableDB
time tabledata
GUI Scheduler
time tabledata
schedulingfunctions
CS3249 System Architecture 12CS3249 12System Architecture
Model-View
Split model and view. Model: handles data and manipulation.
View: handles display issues, gets data from model.
Actual data can be stored in external storage, e.g., DB.
timetableDB
GUI
view
Scheduler
time tablemodel
schedulingfunctions
getdata
get /put
data
CS3249 System Architecture 13CS3249 System Architecture 13CS3249System Architecture 13System Architecture 13CS3249
View can display data in various formatsDate Time
12 Oct 2012 2:00 pm
Oct 12, 2012 2.00 pm
12-10-2012 1400
Can have multiple views for a model.
Row 1 Row 2 Row 3 Row 40
2
4
6
8
10
12
GUI Backend
datamodel
CS3249 System Architecture 14CS3249 System Architecture 14CS3249System Architecture 14System Architecture 14CS3249
Advantages Less or no redundant data.
Can show multiple views of same data.
Can show small parts of large data.
Loose coupling between model and view. Views can be changed without affecting model.
Item views (widgets) can be reused.
Note Still need to synchronise multiple views of same model.
CS3249 System Architecture 15CS3249 System Architecture 15CS3249System Architecture 15System Architecture 15CS3249
Many variants...
ViewModel
Model View
PresenterAdapterDelegateControllerWhatever
CS3249 System Architecture 16CS3249 16System Architecture
Classic Model-View-Controller
Main characteristics: Split input handling and display.
Model is passive.
View Model
Controller
modifyupdate
get data
user input
CS3249 System Architecture 17CS3249 System Architecture 17CS3249System Architecture 17System Architecture 17CS3249
Example sequence: user change data.
CS3249 System Architecture 18CS3249 System Architecture 18CS3249System Architecture 18System Architecture 18CS3249
Model represents data and operations on data. Stores and retrieves data.
Modify and update data.
View represents display items and display logic. Displays data.
Gets data from model.
Controller accepts user inputs. Translates inputs to service requests for model.
Informs view to update.
Advantage View and controller can change without affecting model.
CS3249 System Architecture 19CS3249 System Architecture 19CS3249System Architecture 19System Architecture 19CS3249
What if model is changed by other sources? Model needs to inform view to update.
View Model
Controller
modifyupdate
get data
user input
updatetight coupling!
NetworkSource
get data
CS3249 System Architecture 20CS3249 20System Architecture
MVC with Observer
Use observer to decouple model and view. Views register as observers with model.
Model informs observers to update.
Observers inform views to update.
Advantages Views can change without affecting model.
Views are decoupled from model.
Shortcoming Model has to maintain a list of observers.
CS3249 System Architecture 21CS3249 System Architecture 21CS3249System Architecture 21System Architecture 21CS3249
Method 1: Observer is concrete object.
Observer contains pointer to view.
Observer is coupled to view.
View Model
Controller
modifyupdate
get data
user input
update
NetworkSource
get data
Observer
update
CS3249 System Architecture 22CS3249 System Architecture 22CS3249System Architecture 22System Architecture 22CS3249
Method 1 sequence
CS3249 System Architecture 23CS3249 System Architecture 23CS3249System Architecture 23System Architecture 23CS3249
Method 2: Observer is abstract class.
View implements observer interface or inherits observer class.
Different kinds of view appear as same kind of observer.
View can change without affecting observer.
Model
Controller
modifyupdate
get data
user input
update
NetworkSource
get data
Observer
View
CS3249 System Architecture 24CS3249 System Architecture 24CS3249System Architecture 24System Architecture 24CS3249
Method 2 sequence
CS3249 System Architecture 25CS3249 System Architecture 25CS3249System Architecture 25System Architecture 25CS3249
Observer in Use: X Windows
HostWindow
X Windows
callbackHelperWidget
Implemented in C, object-based but not object-oriented.
has
CS3249 System Architecture 26CS3249 System Architecture 26CS3249System Architecture 26System Architecture 26CS3249
Observer in Use: X Windows
Implemented in C, object-based but not object-oriented.
HostWindow
X Windows
callbackHelperWidget
addCallback(widget,event type, callback,data)
get help
user input
callback(widget, data,callback_data)
CS3249 System Architecture 27CS3249 System Architecture 27CS3249System Architecture 27System Architecture 27CS3249
Observer in Use: VTK
HostWindow
VTK
execute
HelperWidget
has
vtkCommandsubclass
has
Implemented in C++, object-oriented.
CS3249 System Architecture 28CS3249 System Architecture 28CS3249System Architecture 28System Architecture 28CS3249
Observer in Use: VTK
Implemented in C++, object-oriented.
HostWindow
VTK
execute
HelperWidget
AddObserver(event type,command)
get data
user input
execute(caller, event,data)vtkCommand
subclass
get help
CS3249 System Architecture 29CS3249 System Architecture 29CS3249System Architecture 29System Architecture 29CS3249
t
Classic MVC was first designed for Smalltalk in 1980s.
Computers in 1980s were not so powerful. Relied on OS to handle inputs and display.
X Window Athena widgets hadn't appeared until late 1980s.
IBM PC Apple Macintosh
CS3249 System Architecture 30CS3249 System Architecture 30CS3249System Architecture 30System Architecture 30CS3249
t
Strengths Good for applications whose inputs and outputs are handled
by different modules.
Good for supporting non-standard input devices.
Weaknesses View update can be inefficient,
unless observer is used.
Modern GUI widgets can handle standard inputs and display.No need to separate standard inputs and display.
CS3249 System Architecture 31CS3249 System Architecture 31CS3249System Architecture 31System Architecture 31CS3249
t
Confusion: Different interpretations of “controller” Controller as input handler (classic).
Controller as coordinator between model and view.
Controller as display logic (overlap with view).
Controller as data manipulator (overlap with model).
Controller as central processor / business logic (too heavy).
Controller as ...
CS3249 System Architecture 32CS3249 32System Architecture
Cocoa MVC
Cocoa MVC is different from classic MVC View accepts user actions.
useraction
CS3249 System Architecture 33CS3249 System Architecture 33CS3249System Architecture 33System Architecture 33CS3249
Cocoa MVC is supported by NSObject
Any NSObject subclass, implements model. NSView
Each UI element is associated with a view. NSController
Controller class, coordinates between model and view.
Cocoa supports 2 types of controllers coordinating controller: coordinate functioning of application
mediating controller: used for binding
CS3249 System Architecture 34CS3249 System Architecture 34CS3249System Architecture 34System Architecture 34CS3249
Cocoa provides binding between model and view. Automatically synchronise model and view states.
CS3249 System Architecture 35CS3249 System Architecture 35CS3249System Architecture 35System Architecture 35CS3249
Another method is to bind through mediating controller.
view
controller
model
CS3249 System Architecture 36CS3249 System Architecture 36CS3249System Architecture 36System Architecture 36CS3249
Strength Model and view are less coupled.
Weaknesses Too much overhead for simple UI operations.
Binding can use up considerable amount of memory.
Binding can be difficult to debug.
In practice, advisable to merge controller into view, or
merge controller into model.
CS3249 System Architecture 37CS3249 37System Architecture
MFC MVC
MFC MVC is also different from classic MVC. MFC MVC is similar to Qt MV.
MFC provides document-view architecture CDocument
Implements model of “document” (data). CView
Implements view; include controller's tasks.
CView(view)
CDocument(model)
get / set data
update
user input
CS3249 System Architecture 38CS3249 System Architecture 38CS3249System Architecture 38System Architecture 38CS3249
Can use MFC binding to synchronise model and view. Less coupling between model and view.
Can intercept events between model and viewto implement controller.
CS3249 System Architecture 39CS3249 39System Architecture
Model-View-Presenter
Main characteristics: View accepts user inputs; possible with modern widgets.
Some presentation logic is moved from view to presenter.
View Model
Presenter
modifyupdate /display
user input
user input
get data
CS3249 System Architecture 40CS3249 System Architecture 40CS3249System Architecture 40System Architecture 40CS3249
Single presenter may handle multiple views.
Model can inform view to update thru' observer,like MVC.
Compare with MVC: In MVC, controller accepts user inputs.
In MVP, view accepts user inputs.
In MVC, controller doesn't handle display.
In MVP, presenter handles display.
MVP is used in Dolphin Smalltalk. An earlier Taligent MVP is more complex; omit.
CS3249 System Architecture 41CS3249 System Architecture 41CS3249System Architecture 41System Architecture 41CS3249
Variation: Passive View MVP View is decoupled from model.
View is a passive displayer.
Presenter determines how to display data.
View Model
Presenter
modifyupdate /display
user input
user input get data
CS3249 System Architecture 42CS3249 System Architecture 42CS3249System Architecture 42System Architecture 42CS3249
Passive View MVP can be implemented in .Net, Evolution.Net MVP, ASP.NET Web Forms MVP, etc.
Java Swing, Echo2, Google Web Toolkit, etc.
Strengths Tailored to modern widgets which can accept user inputs.
Model and view are decoupled.
Presentation logic in presenter can be auto tested.
Weakness View update may be inefficient,
unless observer is used.
Passive view MVP not suitable for intensive visualisationbecause view doesn't get data from model directly.
CS3249 System Architecture 43CS3249 43System Architecture
Qt Model-View
Main characteristics: Replace controller by delegate.
Delegate edits and renders data in widgets.
View Model
Delegate
user input
edit / renderrequest
modify
get data
CS3249 System Architecture 44CS3249 System Architecture 44CS3249System Architecture 44System Architecture 44CS3249
Model represents data and operations on data.
View displays data.
View items (widgets) handle inputs.
Delegate edits and renders data in widgets. Default delegate is sufficient for most applications.
Can customise delegate.
CS3249 System Architecture 45CS3249 System Architecture 45CS3249System Architecture 45System Architecture 45CS3249
Model can inform view to update thru' signals and slots.
Delegate
user input
edit / renderrequest
modify
get dataModel
dataChanged()
View
setData()
loose coupling
CS3249 System Architecture 46CS3249 System Architecture 46CS3249System Architecture 46System Architecture 46CS3249
Qt support for model-view QAbstractItemModel
Abstract model class. Have many subclasses for list, table, directory, file system,
SQL table, etc. QAbstractItemView
Abstract view class. Concrete subclasses include QListView, QColumnView, QTableView, QTreeView.
QAbstractItemDelegate
Abstract delegate class. Concrete subclasses include QItemDelegate and QStyledItemDelegate.
Can create new subclasses of model, view, delegate.
CS3249 System Architecture 47CS3249 System Architecture 47CS3249System Architecture 47System Architecture 47CS3249
Strengths Efficient update of view.
Use signals and slots for synchronisation.
Fine control over rendering and editing.
Very loose coupling between model and view.
Very loose coupling between host and helper.
CS3249 System Architecture 48CS3249 System Architecture 48CS3249System Architecture 48System Architecture 48CS3249
CS3249 System Architecture 49CS3249 System Architecture 49CS3249System Architecture 49System Architecture 49CS3249
CS3249 System Architecture 50CS3249 System Architecture 50CS3249System Architecture 50System Architecture 50CS3249
CS3249 System Architecture 51CS3249 System Architecture 51CS3249System Architecture 51System Architecture 51CS3249
In general
Either
Or
ActiveHost
PassiveHelper
get / set / …
ActiveHost
ActiveHelper
get / set / …
Observer update
CS3249 System Architecture 52CS3249 System Architecture 52CS3249System Architecture 52System Architecture 52CS3249
In general...
Or (with Qt)
Avoid this
ActiveHost
ActiveHelper
get / set / …
signal-slot
ActiveHost
ActiveHelper
get / set / …
update
CS3249 System Architecture 53CS3249 53System Architecture
Use Which Pattern?
Apply software engineering principles.
Architectural considerations Pick the one that best matches requirements, if applicable.
Make things simple, don't over-design.
Don't go for flashy ideas because they are new.
Implementation considerations Pick the one that is supported by the required platform.
Picking one not supported requires additional coding.
Avoid hidden mechanisms that are difficult to test and debug.
In practice, need to combine several design patterns.
CS3249 System Architecture 54CS3249 System Architecture 54CS3249System Architecture 54System Architecture 54CS3249
A negative example. Why?
CS3249 System Architecture 55CS3249 55System Architecture
CS3249 System Architecture 56CS3249 System Architecture 56CS3249System Architecture 56System Architecture 56CS3249
CS3249 System Architecture 57CS3249 System Architecture 57CS3249System Architecture 57System Architecture 57CS3249
CS3249 System Architecture 58CS3249 58System Architecture
Where is Model in Client-Server App?
Place model at server side Thin client, but view must know network protocol.
Inefficient view update.
View
AppLogic
Model
userinput
client server
userinput
modify
get data
ModelFile
CS3249 System Architecture 59CS3249 System Architecture 59CS3249System Architecture 59System Architecture 59CS3249
Place model at client side App logic must be at client side to work on model.
Become like stand-alone app with network file service.
View
AppLogic
Model
userinput
client server
userinput
modify
get data
ModelFile
FileServer
CS3249 System Architecture 60CS3249 System Architecture 60CS3249System Architecture 60System Architecture 60CS3249
Place proxies at client side Thick client, but view is oblivious of server.
Efficient view update.
View
AppLogic
Model
userinput
client server
userinput
modify
get data
ModelFile
Modelproxy
getdata
Appproxy
CS3249 System Architecture 61CS3249 61System Architecture
Summary
Model-view reduces coupling of model and view.
MVC separates input handling and display.
Various interpretations of 'C' in MVC.
Qt MV uses delegate for editing and rendering.
Practical software architecture must integratemodel-view pattern with other design patterns.
Apply software engineering principles.
CS3249 System Architecture 62CS3249 62System Architecture
Further Reading
Additional notes: System Architecture Design Guidelines.
Review of model-view patterns:[Busc96, Fowl07, Gree07]
Model-view-controller: [Burb87, Busc96, Kras88]
Qt model-view: [Blan08] chap. 10
CS3249 System Architecture 63CS3249 63System Architecture
Improve this design of bus guide system
What’s fishy about this design?
CS3249 System Architecture 64CS3249 64System Architecture
References
J. Blanchette and M. Summerfield, C++ GUI Programming with Qt 4, 2nd ed., Prentice Hall, 2008.
S. Burbeck, Applications Programming in Smalltalk-80(TM): How to use Model-View-Controller (MVC), 1987.
F. Buschmann et al., Pattern-Oriented Software Architecture: A System of Patterns, Wiley, 1996.
D. Greer, Interactive Application Architecture Patterns, 2007. M. Fowler, GUI Architectures, 2007. G. E. Krasner and S. T. Pope, A Cookbook for Using the Model-View-
Controller User Interface Paradigm in Smalltalk-80, SIGS, 1988.
Top Related