ITI 1121. Introduction to Computing II – subtitle
ITI 1121. Introduction to Computing II
Graphical user interface : Model-View-Controller
by
Marcel Turcotte
Version April 4, 2020
Preamble
Preamble
Overview
Overview
Graphical user interface : Model-View-Controller
In software development, a design pattern is a specific arrangement of classes. It’s a
standard way to solve well-known problems. Programmers in the industry are familiar
with these patterns. This week, we discover the design pattern Model-View-Controller
(MVC) which is used in the development of graphical user interfaces.
General objective:
This week, you will be able to design the graphical user interface of a simple
application by applying the Model-View-Controller design pattern.
1 26
Preamble
Learning objectives
Learning objectives
Describe in your own words the Model-View-Controller design pattern.
Use the Model-View-Controller design pattern to produce the visual rendering of a
graphical user interface.
Readings:
https://en.wikipedia.org/wiki/Model-view-controller
http://heim.ifi.uio.no/~trygver/2007/MVC_Originals.pdf
2 26
https://en.wikipedia.org/wiki/Model-view-controller
http://heim.ifi.uio.no/~trygver/2007/MVC_Originals.pdf
Preamble
Plan
Plan
1 Preamble
2 Théorie
3 Exemple
4 Prologue
3 26
Theory
Design pattern
In software development, a design pattern is a specific arrangement of classes.
It’s a standard way to solve well-known problems.
Programmers in the industry are familiar with these patterns.
4 26
Model-View-Controller
ViewController
Model
1
3
2 4
MVC separates the data, the view and the logic from the application.
5 26
Benefits
Allows you to modify or adapt each part of the application independently;
Promotes the implementation of several views;
The association between the model and the view is done dynamically at
runtime (not at compile time), which allows the view to be changed during execution.
6 26
Definitions
Model – implementation, state: attributes and behaviors;
View – the output interface, a representation of the model for the outside world;
Controller – the input interface, routes user requests to update the model.
7 26
Model
Contains the application data and methods for transforming the data;
Possesses a minimal knowledge of the graphical interface (sometimes no
knowledge at all);
The view and the model are very different.
8 26
View
A representation (graphical, textual, vocal, etc.) of the model for the user.
9 26
Controller
A controller is an object that allows the user to transform the data or the
representation;
Knows the model very well.
10 26
Example
Counter
ViewController
Model
update()
getValue()
actionPerformed()
increment()
reset()
A graphical interface for the class Counter.
11 26
Counter: Model
pub l i c c l a s s Counter {
p r i v a t e i n t v a l u e ;
pub l i c Counter ( ) {
v a l u e = 0 ;
}
pub l i c vo id i n c r ement ( ) {
v a l u e++;
}
pub l i c i n t ge tVa lue ( ) {
re tu rn v a l u e ;
}
pub l i c vo id r e s e t ( ) {
v a l u e = 0 ;
}
pub l i c S t r i n g t o S t r i n g ( ) {
re tu rn ” Counter : { v a l u e=”+v a l u e+”}” ;
}
}
12 26
View
pub l i c i n t e r f a c e View {
vo id update ( ) ;
}
To facilitate the development of multiple views, we create the interface View.
Our example will have two views: GraphicalView and TextView.
13 26
pub l i c c l a s s TextView implements View {
p r i v a t e Counter model ;
pub l i c TextView ( Counter model ) {
t h i s . model = model ;
}
pub l i c vo id update ( ) {
System . out . p r i n t l n ( model . t o S t r i n g ( ) ) ;
}
}
pub l i c c l a s s Graph i ca lV i ew extends JFrame implements View {
p r i v a t e JLabe l i n p u t ;
p r i v a t e Counter model ;
pub l i c Graph i ca lV i ew ( Counter model , C o n t r o l l e r c o n t r o l l e r ) {
s e tLayou t (new Gr idLayout ( 1 , 3 ) ) ;
t h i s . model = model ;
JButton button ;
but ton = new JButton ( ” Inc r ement ” ) ;
but ton . a d d A c t i o n L i s t e n e r ( c o n t r o l l e r ) ;
add ( but ton ) ;
JButton r e s e t ;
r e s e t = new JButton ( ” Reset ” ) ;
r e s e t . a d d A c t i o n L i s t e n e r ( c o n t r o l l e r ) ;
add ( r e s e t ) ;
i n p u t = new JLabe l ( ) ;
add ( i n p u t ) ;
}
pub l i c vo id update ( ) {
i n p u t . s e tTex t ( I n t e g e r . t o S t r i n g ( model . ge tVa lue ( ) ) ) ;
}
}
pub l i c c l a s s C o n t r o l l e r implements A c t i o n L i s t e n e r {
p r i v a t e Counter model ;
p r i v a t e View [ ] v i ews ;
p r i v a t e i n t numberOfViews ;
pub l i c C o n t r o l l e r ( ) {
v i ews = new View [ 2 ] ;
numberOfViews = 0 ;
model = new Counter ( ) ;
r e g i s t e r (new Graph i ca lV i ew ( model , t h i s ) ) ;
r e g i s t e r (new TextView ( model ) ) ;
update ( ) ;
}
p r i v a t e vo id r e g i s t e r ( View v iew ) {
v i ews [ numberOfViews ] = v iew ;
numberOfViews++;
}
p r i v a t e vo id update ( ) {
f o r ( i n t i =0; i