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" %> Aggiungi carrello
Recupero input…
public void doGet(request, response){
Lista di prodotto
//... String prod = request.getParameter("checkboxProd"); HttpSession session = request.getSession(true);
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