Design Pattern - Model View Controller_4x4

MODEL VIEW CONTROLLER
DESIGN PATTERN
MODEL-VIEW-CONTROLLER
INGEGNERIA DEL SOFTWARE
Università degli Studi di Padova
Dipartimento di Matematica
Corso di Laurea in Informatica, A.A. 2013 – 2014
2
Architetturali
Model view controller
[email protected]
INTRODUZIONE E CONTESTO




Inizialmente utilizzato per GUI Smalltalk-80

Riccardo Cardin
PROBLEMA
Pattern architetturale

Ingegneria del software mod. B
… ora pattern base dell’architettura J2EE, .NET, RoR ...
... e dei maggiori framework JS: AngularJS, BackboneJS, ...
Supporto a diverse tipologie di utenti con diverse
interfacce

Rischio di duplicazione del codice (“cut and paste”)
Contesto d’utilizzo

Applicazioni che devono presentare attraverso una
GUI un insieme di informazioni


Le informazioni devono essere costantemente aggiornate
Separation of concerns

Le persone responsabili dello sviluppo hanno compentenze
differenti
Ingegneria del software mod. B
3
Riccardo Cardin
4
Ingegneria del software mod. B
Riccardo Cardin
NECESSITÀ

Accesso ai dati attraverso “viste” differenti



Ad esempio: HTML/Js, JSP, XML, JSON…
I dati devono poter essere modificati attraverso
interazioni differenti con i client


SOLUZIONE E STRUTTURA
Disaccoppiamento (separation of concerns)
 Model: dati di business e regole di accesso
 View: rappresentazione grafica
 Controller: reazione della UI agli input utente
(application logic)
Ad esempio: messaggi SOAP, richieste HTTP, …
Il supporto a diverse viste non deve influire sulle
componenti che forniscono le funzionalità base.
5
Ingegneria del software mod. B
Riccardo Cardin
SOLUZIONE E STRUTTURA

Ingegneria del software mod. B

Definisce il modello dati
Regole di business
 Dati e le operazioni su questi
View

Gestisce la logica di presentazione verso i vari utenti

Cattura gli input utente e delega al controller
l’elaborazione

Aggiornamento “push model”



Progettato mediante tecniche object oriented


Design pattern

Notifica alla view aggiornamenti del modello dati


Observer pattern
View deve visualizzare sempre dati aggiornati!


7
Riccardo Cardin
Metodi di interazione con l’applicazione
La view deve essere costantemente aggiornata
 Utilizzo design pattern Observer
 MVC in un solo ambiente di esecuzione (i.e. Javascript)
Aggiornamento “pull model”

Ingegneria del software mod. B
Riccardo Cardin
SOLUZIONE E STRUTTURA
Model

6
La view richiede aggiornamenti solo quando è opportuno
MVC su diversi ambienti di esecuzione
 Strategia JEE classico (JSP, Servlet)
Ingegneria del software mod. B
8
Riccardo Cardin
STRATEGIE
SOLUZIONE E STRUTTURA

Nativo
 Web based (server)
Controller


Trasforma le interazioni dell’utente (view) in azioni
sui dati (model)

Realizza l’application logic
 Esiste un Controller per ogni View
 Design patten Strategy
 Modifica degli algoritmi che permettono l’interazione
utente con il model.


View: JSP
Controller: Servlet

Controller centralizzato
 Una sola servlet come controller (Front Controller
pattern)



Configurazione tramite XML o annotazioni
Model: EJB / Hibernate / MyBatis
Web based (client, single page application)
View: Javascript e template
Controller: Javascript (routing)
 Model: Javascript

Controller
Input 1
Input 2
…
T(Input 1)
T(Input 2)
…
Ingegneria del software mod. B
Model

9

Riccardo Cardin
COLLABORAZIONI

Ingegneria del software mod. B

Riccardo Cardin
Design pattern Observer (“push model”)
View “osserva” Model
11
Ingegneria del software mod. B
10
COLLABORAZIONI
Design pattern Observer (“push model”)
Controller “osserva” View
Sincronizzazione con backend tramite API REST/SOAP
Riccardo Cardin
12
Ingegneria del software mod. B
Riccardo Cardin
ESEMPIO PRATICO - PULL MODEL

ESEMPIO PRATICO - PULL MODEL
Ricordate il nostro esempio …?

Il pattern MVC in Java
Model
Controller
Esempio
Il cliente sfoglia il catalogo ed aggiunge i prodotti desiderati al
carrello della spesa. Quando il cliente termina l’acquisto e deve
pagare, lo stesso fornisce le informazioni sulla consegna dei prodotti
e sulla carta di credito. Il sistema verifica l’autorizzazione al
pagamento con carta di credito e conferma l’acquisto
immediatamente e mediante una successiva mail.

Proviamo a dare un esempio di GUI progettata
utilizzando MVC (pull model)
13
14
View
Ingegneria del software mod. B
Riccardo Cardin
Ingegneria del software mod. B
ESEMPIO PRATICO - PULL MODEL

ESEMPIO PRATICO - PULL MODEL
Selezione di un prodotto e aggiunta al carrello


View: pagina JSP di selezione del prodotto
Selezione di un prodotto e aggiunta al carrello

Controller: HttpServlet, trasformazione e redirezione
public class ServletControllo extends HttpServlet {
<%@ taglib uri="tlds/taglib.tld" prefix="tg" %>
<html>
<head>Aggiungi carrello</head>
<body>
Recupero input…
public void doGet(request, response){
Lista di prodotto
//...
String prod = request.getParameter("checkboxProd");
HttpSession session = request.getSession(true);
<form action="selezione_prodotto.do" method="POST">
<tg:for name="prodotto" value="${catalogo.prodotto}">
<tg:checkbox name="${prodotto.nome}" value="${prodotto.id}"
display="${prodotto.descrizione}" />
</tg:for>
</form>
</body>
</html>
Prodotto prodSelez = (session.getAttribute("listaProdotti")).get(prod);
Carrello carrello = (Carrello) session.getAttribute("carrello");
carello.addProdotto(prodSelez);
//...
response.sendRedirect("sezioneProdotti");
15
}
}
Ingegneria del software mod. B
Riccardo Cardin
Riccardo Cardin
Ingegneria del software mod. B
Selezione destinazione del
processo
16
Riccardo Cardin
ESEMPIO PRATICO - PULL MODEL

ESEMPIO PRATICO – PUSH MODEL
Selezione di un prodotto e aggiunta al carrello

Esempio
Vogliamo costruire un’applicazione che permetta la gestione di foto e
album fotografici da parte di un utente.
Model: business, aggiunta del prodotto al carrello
public class ServletControllo extends HttpServlet {

public void doGet(request, response){
//...
String prod = request.getParameter("checkboxProd");
HttpSession session = request.getSession(true);
Model
var Photo = Backbone.Model.extend({
Operazioni di
business
// Default attributes for the photo
defaults: {
src: "placeholder.jpg",
caption: "A default image",
viewed: false
},
Prodotto prodSelez = (session.getAttribute("listaProdotti")).get(prod);
Carrello carrello = (Carrello) session.getAttribute("carrello");
carello.addProdotto(prodSelez);
// Ensure that each photo created has an `src`.
initialize: function() {
this.set( { "src": this.defaults.src} );
}
//...
response.sendRedirect("sezioneProdotti");
17
}
}
Ingegneria del software mod. B
Riccardo Cardin
ESEMPIO PRATICO – PUSH MODEL

});
Ingegneria del software mod. B

};
Ingegneria del software mod. B
dalla vista
Riccardo Cardin
Riuso dei componenti dei model
Riutilizzo dello stesso model da parte di differenti
view
 Miglior manutenzione e processo di test

var buildPhotoView = function ( photoModel, photoController ) {
// ...
var render = function () {
photoEl.innerHTML = _.template( "#photoTemplate" , {
src: photoModel.getSrc()
Templating
});
};
photoEl.addEventListener( "click", function () {
photoController.handleEvent( "click", photoModel );
});
// ...
return {
showView: show,
hideView: hide
Operazioni esposte
};
18
CONSEGUENZE
View
photoModel.addSubscriber( render );
Modello dati
semplice
Osservazione
modello e
comunicazione
attiva con
controller

Supporto più semplice per nuovi tipi di client


Maggiore complessità di progettazione

19
Riccardo Cardin
Creazione nuova view e controller
Introduzione molte classi per garantire la
separazione
Ingegneria del software mod. B
20
Riccardo Cardin
MODEL VIEW VIEWMODEL
MODEL VIEW PRESENTER

Presenter (passive view)
Man in the middle
 Osserva il modello
 Aggiorna e osserva la vista (dumb)

Separazione sviluppo UI dalla business logic

Model




Interfaccia di comunicazione
 Metodi setter e getter per il recupero dei dati

ViewModel
Proiezione del modello per una vista
 Binding con la vista e il modello

View

Modella i dati, senza le operazioni su essi (dumb)

Si riduce ad un template di visualizzazione e ad
un’interfaccia di comunicazione
Può essere sostituita da un mock in fase di test
 In Js si espone un protocollo

View
Dichiarativa (utilizzando linguaggi di markup)
Two-way data-binding con proprietà del ViewModel
 Non possiede più lo stato dell’applicazione.


Ingegneria del software mod. B

21
Riccardo Cardin
Ingegneria del software mod. B
22
Riccardo Cardin
GLOSSARIO
MODEL VIEW VIEWMODEL

Comunicazione tramite
data-binding e eventi
JEE


Java Enterprise Edition
Insieme di specifiche per l’implementazione di
applicazioni enterprise

Partecipazione attiva
del ViewModel sui dati
del Model


Riccardo Cardin
Framework corrispondente in casa Microsoft
RoR, Ruby on Rails

23
Enterprise Java Bean (EJB), Servlet, Java Server Pages
(JSP), Web services, Portlet, JMS, ...
.NET


Ingegneria del software mod. B
Dati e operazioni che possono essere eseguiti su una UI
Framework di agile programming basato su Ruby
Grails

Framework di agile programming basato su Groovy
Ingegneria del software mod. B
24
Riccardo Cardin
RIFERIMENTI






Design Patterns, Elements of Reusable Object Oriented
Software, GoF, 1995, Addison-Wesley
GUI Arichitectures
http://martinfowler.com/eaaDev/uiArchs.html
MVC http://www.claudiodesio.com/ooa&d/mvc.htm
Core J2EE MVC design pattern
http://java.sun.com/blueprints/patterns/MVC-detailed.html
Core J2EE Front controller pattern
http://java.sun.com/blueprints/corej2eepatterns/Patterns/Fr
ontController.html
Learning Javascript Design Patterns
http://addyosmani.com/resources/essentialjsdesignpatterns/
book/
Ingegneria del software mod. B
25
Riccardo Cardin