MODEL-VIEW-CONTROLLER PROBLEMA

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "MODEL-VIEW-CONTROLLER PROBLEMA"

Mauro Pagano
10 anni fa
Visualizzazioni

1 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 Architetturali Model view controller 2 INTRODUZIONE E CONTESTO PROBLEMA Pattern architetturale Inizialmente utilizzato per GUI Smalltalk-80 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 3 4

..... e dei maggiori framework JS: AngularJS, BackboneJS,.

2 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 Ad esempio: messaggi SOAP, richieste HTTP, 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) Il supporto a diverse viste non deve influire sulle componenti che forniscono le funzionalità base. 5 6 SOLUZIONE E STRUTTURA SOLUZIONE E STRUTTURA Model Definisce il modello dati Regole di business Dati e le operazioni su questi Progettato mediante tecniche object oriented Design pattern Notifica alla view aggiornamenti del modello dati Observer pattern deve visualizzare sempre dati aggiornati! 7 Gestisce la logica di presentazione verso i vari utenti Metodi di interazione con l applicazione Cattura gli input utente e delega al controller l elaborazione Aggiornamento push model La view deve essere costantemente aggiornata Utilizzo design pattern Observer MVC in un solo ambiente di esecuzione (i.e. Javascript) Aggiornamento pull model La view richiede aggiornamenti solo quando è opportuno MVC su diversi ambienti di esecuzione Strategia JEE classico (JSP, Servlet) 8

input utente (application logic) Il supporto a diverse viste non deve influire sulle componenti che forniscono le funzionalità base.

3 SOLUZIONE E STRUTTURA STRATEGIE 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. Input 1 Input 2 Controller T(Input 1) T(Input 2) Model 9 Nativo Web based (server) 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 Sincronizzazione con backend tramite API REST/SOAP 10 COLLABORAZIONI COLLABORAZIONI Design pattern Observer ( push model ) Design pattern Observer ( push model ) Controller osserva View View osserva Model 11 12

Input 1 Input 2 Controller T(Input 1) T(Input 2) Model 9 Nativo Web based (server) View: JSP Controller: Servlet Controller centralizzato Una sola servlet come controller (Front Controller pattern)

4 ESEMPIO PRATICO - PULL MODEL Ricordate il nostro esempio? 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. ESEMPIO PRATICO - PULL MODEL Il pattern MVC in Java Controller Model Proviamo a dare un esempio di GUI progettata utilizzando MVC (pull model) 13 View 14 ESEMPIO PRATICO - PULL MODEL ESEMPIO PRATICO - PULL MODEL Selezione di un prodotto e aggiunta al carrello View: pagina JSP di selezione del prodotto <%@ taglib uri="tlds/taglib.tld" prefix="tg" %> <html> <head>aggiungi carrello</head> <body> <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> Lista di prodotto 15 Selezione di un prodotto e aggiunta al carrello Controller: HttpServlet, trasformazione e redirezione public class ServletControllo extends HttpServlet { public void doget(request, response){ String prod = request.getparameter("checkboxprod"); HttpSession session = request.getsession(true); Recupero input Prodotto prodselez = (session.getattribute("listaprodotti")).get(prod); Carrello carrello = (Carrello) session.getattribute("carrello"); carello.addprodotto(prodselez); response.sendredirect("sezioneprodotti"); 16 Selezione destinazione del processo

Il sistema verifica l autorizzazione al pagamento con carta di credito e conferma l acquisto immediatamente e mediante una successiva mail.

5 ESEMPIO PRATICO - PULL MODEL Selezione di un prodotto e aggiunta al carrello 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); Prodotto prodselez = (session.getattribute("listaprodotti")).get(prod); Carrello carrello = (Carrello) session.getattribute("carrello"); carello.addprodotto(prodselez); response.sendredirect("sezioneprodotti"); Operazioni di business 17 ESEMPIO PRATICO PUSH MODEL Esempio Vogliamo costruire un applicazione che permetta la gestione di foto e album fotografici da parte di un utente. Model var Photo = Backbone.Model.extend({ // Default attributes for the photo defaults: { src: "placeholder.jpg", caption: "A default image", viewed: false, // Ensure that each photo created has an `src`. initialize: function() { this.set( { "src": this.defaults.src ); ); Modello dati semplice 18 ESEMPIO PRATICO PUSH MODEL CONSEGUENZE var buildphotoview = function ( photomodel, photocontroller ) { //... var render = function () { photoel.innerhtml = _.template( "#phototemplate", { src: photomodel.getsrc() Templating ); ; photomodel.addsubscriber( render ); photoel.addeventlistener( "click", function () { photocontroller.handleevent( "click", photomodel ); ); //... return { showview: show, hideview: hide ; ; Operazioni esposte dalla vista Osservazione modello e comunicazione attiva con controller 19 Riuso dei componenti dei model Riutilizzo dello stesso model da parte di differenti view Miglior manutenzione e processo di test Supporto più semplice per nuovi tipi di client Creazione nuova view e controller Maggiore complessità di progettazione Introduzione molte classi per garantire la separazione 20

get(prod); Carrello carrello = (Carrello) session.getattribute("carrello"); carello.addprodotto(prodselez); response.

6 MODEL VIEW PRESENTER Presenter (passive view) Man in the middle Osserva il modello Aggiorna e osserva la vista (dumb) Interfaccia di comunicazione Metodi setter e getter per il recupero dei dati 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 21 MODEL VIEW VIEWMODEL Separazione sviluppo UI dalla business logic Model Modella i dati, senza le operazioni su essi (dumb) Model Proiezione del modello per una vista Binding con la vista e il modello Dati e operazioni che possono essere eseguiti su una UI Dichiarativa (utilizzando linguaggi di markup) Two-way data-binding con proprietà del ViewModel Non possiede più lo stato dell applicazione. 22 MODEL VIEW VIEWMODEL GLOSSARIO 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 Enterprise Java Bean (EJB), Servlet, Java Server Pages (JSP), Web services, Portlet, JMS,....NET Framework corrispondente in casa Microsoft RoR, Ruby on Rails Framework di agile programming basato su Ruby Grails 23 Framework di agile programming basato su Groovy 24

sviluppo UI dalla business logic Model Modella i dati, senza le operazioni su essi (dumb) Model Proiezione del modello per una vista Binding con la vista e il modello Dati e operazioni che possono

7 RIFERIMENTI Design Patterns, Elements of Reusable Object Oriented Software, GoF, 1995, Addison-Wesley GUI Arichitectures MVC Core J2EE MVC design pattern Core J2EE Front controller pattern ontcontroller.html Learning Javascript Design Patterns book/ 25

htm Core J2EE MVC design pattern http://java.sun.com/blueprints/patterns/mvc-detailed.

Documenti analoghi

Esercitazioni di PROGETTAZIONE DEL SOFTWARE A.A. 2011-2012

Esercitazioni di PROGETTAZIONE DEL SOFTWARE A.A. 2011-2012 Sapienza Università di Roma Facoltà di Ingegneria dell Informazione, Informatica e Statistica Corso di Laurea in Ingegneria Informatica ed Automatica Corso di Laurea in Ingegneria dei Sistemi Informatici