SlideShare a Scribd company logo
1 of 42
Download to read offline
MODEL VIEW CONTROLLER
INGEGNERIA DEL SOFTWARE
Università degli Studi di Padova
Dipartimento di Matematica
Corso di Laurea in Informatica, A.A. 2014 – 2015
rcardin@math.unipd.it
Ingegneria del software mod. B
MODEL VIEW CONTROLLER
2Riccardo Cardin
Architetturali
Model view controller
Ingegneria del software mod. B
INTRODUZIONE E CONTESTO
 Pattern architetturale
 Inizialmente utilizzato per GUI Smalltalk-80
 … ora pattern base dell’architettura J2EE, .NET, RoR ...
 ... e dei maggiori framework JS: AngularJS, BackboneJS, ...
 Contesto d’utilizzo
 Applicazioni che devono presentare attraverso una UI
un insieme di informazioni
 Le informazioni devono essere costantemente aggiornate
 Separation of concerns
 Le persone responsabili dello sviluppo hanno compentenze
differenti
3Riccardo Cardin
Ingegneria del software mod. B
PROBLEMA
 Supporto a diverse tipologie di utenti con
diverse interfacce
 Rischio di duplicazione del codice (“cut and paste”)
4Riccardo Cardin
Ingegneria del software mod. B
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, …
 Il supporto a diverse viste non deve influire sulle
componenti che forniscono le funzionalità base.
5Riccardo Cardin
Ingegneria del software mod. B
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)
6Riccardo Cardin
Ingegneria del software mod. B
SOLUZIONE E STRUTTURA
 Model
 Definisce il modello dati
 Realizza la business logic
 Dati e le operazioni su questi
 Progettato mediante tecniche object oriented
 Design pattern
 Notifica alla view aggiornamenti del modello dati
 Observer pattern
 View deve visualizzare sempre dati aggiornati!
7Riccardo Cardin
Ingegneria del software mod. B
SOLUZIONE E STRUTTURA
 View
 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)
 “pull model”
 La view richiede aggiornamenti solo quando è opportuno
 MVC su diversi ambienti di esecuzione
 Strategia JEE (JSP, Servlet) classico, Spring, Play!, ...
8Riccardo Cardin
Ingegneria del software mod. B
SOLUZIONE E STRUTTURA
 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.
9Riccardo Cardin
Model
Input 1
Input 2
…
T(Input 1)
T(Input 2)
…
Controller
Strategy
Ingegneria del software mod. B
STRATEGIE
 Nativo (push model)
 Web based (single page application)
 View: Javascript e template
 Controller: Javascript (routing)
 Model: Javascript
 Sincronizzazione con backend tramite API REST/SOAP
 Web based (server, pull model)
 View: JSP, ASP, ...
 Controller: Servlet
 Una sola servlet come controller (Front Controller pattern)
 Model: EJB / Hibernate / MyBatis
10Riccardo Cardin
Ingegneria del software mod. B
COLLABORAZIONI
 Push model
11Riccardo Cardin
View “osserva” Model
Controller “osserva” View
Ingegneria del software mod. B
COLLABORAZIONI
 Push model
12Riccardo Cardin
Observer
Observer
Ingegneria del software mod. B
COLLABORAZIONI
 Pull model
13Riccardo Cardin
Le richieste della vista e gli
aggiornamenti per essa
transitano dal Controller
La vista è passiva
e può essere
realizzata con
linguaggi di markup
(HTML)
Possibile salto
tecnologico
Ingegneria del software mod. B
CONSEGUENZE
 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
14Riccardo Cardin
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Componente per lo sviluppo di applicazione web
 Model
 Service classes: layer della logica di business del sistema
 View
 Layer di visualizzazione/presentazione dati
 Utilizza la tecnologia JSP e Tag library
 Controller
 Layer che gestisce/controlla flussi e comunicazioni
 Dispatcher delle richieste (Front controller)
 Controller che implementano la logica applicativa
 Pull model MVC
15Riccardo Cardin
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Architettura
16Riccardo Cardin
Recupera il controller
adatto per la request
(mapping)
Gestisce la richiesta,
delegando alle classi
service la business logic
Individua la vista di
destinazione (view
resolving)
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 org.springframework.web.servlet.DispatcherServlet
 Front controller
 Recupera controller (handler mapping) e viste (view resolving)
 Da configurare nel file web.xml
 Configurazione XML (Web Application Context)
 <servlet-name>-servlet.xml
17Riccardo Cardin
<servlet>
<servlet-name>disp</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>disp</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Default servlet, non preclude
alcun formato nella risposta,
ma gestisce anche i
contenuti statici.
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Controller e annotazioni
 Racchiudono la logica dell’applicazione web
 DefaultAnnotationHandlerMapping
 Mapping delle richieste utilizzando @RequestMapping
 Sfrutta l’autowiring e l’autodiscovering dei bean
 POJO, più semplice da verificare (i.e. Mockito)
18Riccardo Cardin
<beans>
<bean id="defaultHandlerMapping"
class="org.springframework.web.portlet.mvc.annotation.
DefaultAnnotationHandlerMapping" />
<mvc:annotation-driven/>
<context:component-scanbase-
package="com.habuma.spitter.mvc"/>
[...]
</bean>
<name>-servlet.xml
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Controller e annotazioni
19Riccardo Cardin
@Controller
public ClassHomeController {
// Business logic
private SpitterService spitterService;
@Inject
public HomeController(SpitterService spitterService) {
this.spitterService = spitterService;
}
@RequestMapping({"/","/home"})
public String showHomePage(Map<String,Object> model) {
model.put("spittles",spitterService.getRecentSpittles(
DEFAULT_SPITTLES_PER_PAGE));
return "home";
}
}
Dichiarazione del Controller
Injection della business logic
Dichiarazione URL gestiti
Modello ritornato alla view
Scelta della prossima view
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 @RequestParam
 Permette il recupero dei parametri da una richiesta
 org.springframework.ui.Model
 Mappa di stringhe – oggetti
 Convention over configuration (CoC)
 Da utilizzare con Controller annotati
20Riccardo Cardin
@RequestMapping(value="/spittles",method=GET)
public String listSpittlesForSpitter(
@RequestParam("spitter") String username, Model model) {
Spitterspitter=spitterService.getSpitter(username);
model.addAttribute(spitter);
model.addAttribute(
spitterService.getSpittlesForSpitter(username));
return"spittles/list";
}
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Componente View
 Scelte da un risolutore (resolver) secondo il tipo di
ritorno del metodo del Controller
 XmlViewResolver Usa un file di configurazione xml per la
risoluzione delle view
 ResourceBundleViewResolver Usa un resource bundle (una
serie di file con estensione .properties) per risolvere le view
 UrlBasedViewResolver Esegue una risoluzione diretta del
nome simbolico della view in una URL
 InternalResourceViewResolver Il nome logico viene
utilizzato direttamente come nome della view.
21Riccardo Cardin
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Componente View
22Riccardo Cardin
[...]
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
[...]
<bean class="org.springframework.web.servlet.view.XmlViewResolver">
<property name="location">
<value>/WEB-INF/spring-views.xml</value>
</property>
</bean>
<beans xmlns=“…”>
<bean id="WelcomePage“
class="org.springframework.web.servlet.view.JstlView">
<property name="url" value="/WEB-INF/pages/WelcomePage.jsp" />
</bean>
</beans>
InternalResourceViewResolver
XmlViewResolver
spring-views.xml
Ingegneria del software mod. B
ESEMPIO PULL MODEL: SPRING MVC
 Componente View
 Pagina JSP (HTML + scripting Java)
 Utilizzo di librerie (JSTL) per la manipolazione dei bean
 Il server compila la pagina (servlet) in HTML semplice
23Riccardo Cardin
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<html>
<head></head>
<body>
<div>Salve, menestrello. Inserisci di seguito il nome
del cavaliere di cui vuoi narrare le gesta:
<sf:form method="POST" modelAttribute="knightOfTheRoundTable">
<sf:input path="name" size="15" />
<sf:button>Inizia</sf:button>
</sf:form>
</div>
</body>
</html>
Librerie di direttive per
manipolare i bean
Nome del bean che il
Controller deve gestire. Il
valore viene inserito
nell’attributo «name»
Ingegneria del software mod. B
ESEMPIO PUSH MODEL: BACKBONE
 Componente Model
 Dati di business (anche aggregati  collection)
 Backbone.Collection
 Notifica i propri osservatori delle modifiche
24Riccardo Cardin
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
Costruttore
Ingegneria del software mod. B
ESEMPIO PUSH MODEL: BACKBONE
 Componente View
25Riccardo Cardin
var buildPhotoView = function ( photoModel, photoController ) {
// ...
var render = function () {
photoEl.innerHTML = _.template( "#photoTemplate" , {
src: photoModel.getSrc()
});
};
photoModel.addSubscriber( render );
photoEl.addEventListener( "click", function () {
photoController.handleEvent( "click", photoModel );
});
// ...
return {
showView: show,
hideView: hide
};
};
Operazioni esposte dalla
vista (module pattern)
Templating
Osservazione
modello e
comunicazione
attiva con
controller
Constructor injection
Ingegneria del software mod. B
ESEMPIO PUSH MODEL: BACKBONE
 Componente Controller
 Router: collante tra View e Model
 Inoltre instradano l’applicazione fra le diverse viste
 È possibile usare Controller da altre librerie
26Riccardo Cardin
var PhotoRouter = Backbone.Router.extend({
// Handles a specific URL with a specific function
routes: { "photos/:id": "route" },
// Function specification
route: function(id) {
// Retrieving information from model
var item = photoCollection.get(id);
// Giving such information to view
var view = new PhotoView({ model: item });
something.html( view.render().el );
}
}):
Associazione fra URL e
funzioni
1. Recupera le
informazioni dal
modello
2. Imposta le
informazioni nella
vista
Ingegneria del software mod. B
MODEL VIEW PRESENTER
 Presenter (passive view)
 Man in the middle
 Osserva il modello
 View business logic
 Aggiorna e osserva la vista (dumb)
 Interfaccia di comunicazione
 Metodi setter e getter per il recupero dei dati
 View
 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
27Riccardo Cardin
Ingegneria del software mod. B
MODEL VIEW PRESENTER
 Passive View
28Riccardo Cardin
Il Presenter interagisce
con la View attraverso
un’interfaccia
Il Model interagisce
unicamente con il
Presenter
Ingegneria del software mod. B
MODEL VIEW VIEWMODEL
 Separazione sviluppo UI dalla business logic
 ViewModel
 Proiezione del modello per una vista
 Solamente la validazione rimane nel modello
 Binding con la vista e il modello
 Dati e operazioni che possono essere eseguiti su una UI
 View
 Dichiarativa (utilizzando linguaggi di markup)
 Two-way data-binding con proprietà del ViewModel
 Non possiede più lo stato dell’applicazione.
29Riccardo Cardin
Ingegneria del software mod. B
MODEL VIEW VIEWMODEL
30Riccardo Cardin
Comunicazione tramite
data-binding e eventi
Partecipazione attiva del
ViewModel sui dati del
Model
Ingegneria del software mod. B
ESEMPIO MVVM: ANGULARJS
 Javascript framework
 Client-side
 Model-View-Whatever
 MVC per alcuni aspetti (controller)…
 …MVVM per altri (two-way data binding)
 Utilizza HTML come linguaggio di templating
 Non richiede operazioni di DOM refresh
 Controlla attivamente le azioni utente, eventi del browser
 Dependence injection
 Fornisce ottimi strumenti di test
 Jasmine (http://jasmine.github.io/)
31Riccardo Cardin
Ingegneria del software mod. B
ANGULARJS
 Model – View – Whatever
32Riccardo Cardin
Views Model
Controllers
$scope
(ModelView)
ServicesTemplates
view controller - modelview model
Espone i metodi dell’application
logic e realizza il two-way data
binding
Realizza le viste
utilizzando le
proiezioni del
modello
Modello dati
e servizi di
business
logic
«whatever works for you»
Ingegneria del software mod. B
ANGULARJS
 Viste e templating
 Approccio dichiarativo: HTML
 Direttive: widget, DOM «aumentato»
 Markup {{ }}
 Effettua il binding agli elementi del view-model
 Solitamente apcontenuta in una sola pagina
 Riduce il dialogo con il server e non richiede refresh
33Riccardo Cardin
<html ng-app>
<body ng-controller="MyController">
<input ng-model="foo" value="bar">
<button ng-click="changeFoo()">{{buttonText}}</button>
<script src="angular.js">
</body>
</html>
Le direttive vengono
compilate
index.html
Ingegneria del software mod. B
ANGULARJS
 One-way data binding
 …not the right way…
34Riccardo Cardin
Il merge tra modello e
template avviene all’atto
di creazione della vista
Modifiche al modello
richiedono un
aggiornamento
esplicito e custom
della vista
Ingegneria del software mod. B
ANGULARJS
 Two-way data binding
 …the Angular way!
35Riccardo Cardin
Il template è compilato in
una live view
La vista è una
proiezione del
modello (Model-View
ViewModel)
Ingegneria del software mod. B
ANGULARJS
 Oggetto $scope
 Collante tra controller e le viste
 Contesto di esecuzione per espressioni
 Alcune direttive creano uno scope
 $rootScope
 Gerarchia simile a quella definita dal DOM
 Browser event loop
 $watch: permette alle direttive di comprendere quando il
view-model cambia
 $apply: permette alle direttive di modificare il view-model
eseguendo funzioni
36Riccardo Cardin
Ingegneria del software mod. B
ANGULARJS
 Browser event loop
37Riccardo Cardin
Ingegneria del software mod. B
ANGULARJS
 Controller
 ng-controller
 Inizializza e aggiunge funzioni all’oggetto $scope
38Riccardo Cardin
var myApp = angular.module('spicyApp2', []);
myApp.controller('SpicyCtrl', ['$scope', function($scope){
$scope.customSpice = "wasabi";
$scope.spice = 'very';
// Functions
$scope.spicy = function(spice){
$scope.spice = spice;
};
}]);
<div ng-app="spicyApp2" ng-controller="SpicyCtrl">
<input ng-model="customSpice">
<button ng-click="spicy('chili')">Chili</button>
<button ng-click="spicy(customSpice)">Custom spice</button>
<p>The food is {{spice}} spicy!</p>
</div>
view
Aggiunta variabili e
funzioni al view-
model
Ingegneria del software mod. B
ANGULARJS
 Controller
 Contiene l’application logic di una singola vista
 Non ha riferimenti diretti alla vista
 Facilita la fasee di testing
 Non contiene business logic
 Per questo si usano i servizi: $http, $resource, ...
 Dependence injection
 Non deve effettuare manipolizazione del DOM
 Non è un presenter!
 Non deve occuparsi dell’input formatting
 Usare i form controls
 Non deve occuparsi dell’output filtering
 Usare i filters
39Riccardo Cardin
Ingegneria del software mod. B
ANGULARJS
 Servizi
 Racchiudono la business logic
 Richiamati dai Controller
40Riccardo Cardin
angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'CNY'],
usdToForeignRates = {
USD: 1,
EUR: 0.74,
CNY: 6.09
};
function convert(amount, inCurr, outCurr) {
return
amount * usdToForeignRates[outCurr] * 1 /
usdToForeignRates[inCurr];
}
return {
currencies: currencies,
convert: convert
};
});
privatepublic
Ingegneria del software mod. B
ANGULARJS
 Angular services
 Forniscono utilità comuni alle applicazioni
 $http
 Permette di comunicare con servizi HTTP
 XMLHttpRequest o JSONP
 Utilizza Promises ($q)  reactive programming
 Gestione history ($location), logging ($log), ...
41Riccardo Cardin
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
promise
Ingegneria del software mod. B
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/FrontCo
ntroller.html
 Learning Javascript Design Patterns
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
 Developing Backbone.js Applications
http://addyosmani.github.io/backbone-fundamentals/
42Riccardo Cardin

More Related Content

What's hot

Mvc e di spring e angular js
Mvc e di   spring e angular jsMvc e di   spring e angular js
Mvc e di spring e angular jsRiccardo Cardin
 
Il linguaggio UML - Teoria ed esempi pratici sugli use case diagram
Il linguaggio UML - Teoria ed esempi pratici sugli use case diagramIl linguaggio UML - Teoria ed esempi pratici sugli use case diagram
Il linguaggio UML - Teoria ed esempi pratici sugli use case diagramGiuseppe Cramarossa
 
IntroduzioneAllaGestioneDiUnProgettoSoftwareConUML
IntroduzioneAllaGestioneDiUnProgettoSoftwareConUMLIntroduzioneAllaGestioneDiUnProgettoSoftwareConUML
IntroduzioneAllaGestioneDiUnProgettoSoftwareConUMLmatteo_gentile
 
Aspect Oriented Programming
Aspect Oriented ProgrammingAspect Oriented Programming
Aspect Oriented ProgrammingAndrea Bozzoni
 
Generazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptxGenerazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptxGiacomoZorzin
 
I processi di sviluppo software: l'evoluzione agile ed il DevOps
I processi di sviluppo software: l'evoluzione agile ed il DevOpsI processi di sviluppo software: l'evoluzione agile ed il DevOps
I processi di sviluppo software: l'evoluzione agile ed il DevOpsGiulio Destri
 

What's hot (8)

Diagrammi di Attività
Diagrammi di AttivitàDiagrammi di Attività
Diagrammi di Attività
 
Introduzione a UML
Introduzione a UMLIntroduzione a UML
Introduzione a UML
 
Mvc e di spring e angular js
Mvc e di   spring e angular jsMvc e di   spring e angular js
Mvc e di spring e angular js
 
Il linguaggio UML - Teoria ed esempi pratici sugli use case diagram
Il linguaggio UML - Teoria ed esempi pratici sugli use case diagramIl linguaggio UML - Teoria ed esempi pratici sugli use case diagram
Il linguaggio UML - Teoria ed esempi pratici sugli use case diagram
 
IntroduzioneAllaGestioneDiUnProgettoSoftwareConUML
IntroduzioneAllaGestioneDiUnProgettoSoftwareConUMLIntroduzioneAllaGestioneDiUnProgettoSoftwareConUML
IntroduzioneAllaGestioneDiUnProgettoSoftwareConUML
 
Aspect Oriented Programming
Aspect Oriented ProgrammingAspect Oriented Programming
Aspect Oriented Programming
 
Generazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptxGenerazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptx
 
I processi di sviluppo software: l'evoluzione agile ed il DevOps
I processi di sviluppo software: l'evoluzione agile ed il DevOpsI processi di sviluppo software: l'evoluzione agile ed il DevOps
I processi di sviluppo software: l'evoluzione agile ed il DevOps
 

Viewers also liked

Java - Generic programming
Java - Generic programmingJava - Generic programming
Java - Generic programmingRiccardo Cardin
 
Scala For Java Programmers
Scala For Java ProgrammersScala For Java Programmers
Scala For Java ProgrammersEnno Runne
 
Java - Remote method invocation
Java - Remote method invocationJava - Remote method invocation
Java - Remote method invocationRiccardo Cardin
 
SOLID - Principles of Object Oriented Design
SOLID - Principles of Object Oriented DesignSOLID - Principles of Object Oriented Design
SOLID - Principles of Object Oriented DesignRiccardo Cardin
 
Software architecture patterns
Software architecture patternsSoftware architecture patterns
Software architecture patternsRiccardo Cardin
 
Presto updates to 0.178
Presto updates to 0.178Presto updates to 0.178
Presto updates to 0.178Kai Sasaki
 
Java - Concurrent programming - Thread's basics
Java - Concurrent programming - Thread's basicsJava - Concurrent programming - Thread's basics
Java - Concurrent programming - Thread's basicsRiccardo Cardin
 
Scala - the good, the bad and the very ugly
Scala - the good, the bad and the very uglyScala - the good, the bad and the very ugly
Scala - the good, the bad and the very uglyBozhidar Bozhanov
 
Java - Collections framework
Java - Collections frameworkJava - Collections framework
Java - Collections frameworkRiccardo Cardin
 
A (too) Short Introduction to Scala
A (too) Short Introduction to ScalaA (too) Short Introduction to Scala
A (too) Short Introduction to ScalaRiccardo Cardin
 
Java - Processing input and output
Java - Processing input and outputJava - Processing input and output
Java - Processing input and outputRiccardo Cardin
 
Java - Concurrent programming - Thread's advanced concepts
Java - Concurrent programming - Thread's advanced conceptsJava - Concurrent programming - Thread's advanced concepts
Java - Concurrent programming - Thread's advanced conceptsRiccardo Cardin
 
Java Exception Handling, Assertions and Logging
Java Exception Handling, Assertions and LoggingJava Exception Handling, Assertions and Logging
Java Exception Handling, Assertions and LoggingRiccardo Cardin
 
Java- Concurrent programming - Synchronization (part 1)
Java- Concurrent programming - Synchronization (part 1)Java- Concurrent programming - Synchronization (part 1)
Java- Concurrent programming - Synchronization (part 1)Riccardo Cardin
 
Java- Concurrent programming - Synchronization (part 2)
Java- Concurrent programming - Synchronization (part 2)Java- Concurrent programming - Synchronization (part 2)
Java- Concurrent programming - Synchronization (part 2)Riccardo Cardin
 
Java Graphics Programming
Java Graphics ProgrammingJava Graphics Programming
Java Graphics ProgrammingRiccardo Cardin
 

Viewers also liked (17)

Java - Generic programming
Java - Generic programmingJava - Generic programming
Java - Generic programming
 
Scala For Java Programmers
Scala For Java ProgrammersScala For Java Programmers
Scala For Java Programmers
 
Java - Remote method invocation
Java - Remote method invocationJava - Remote method invocation
Java - Remote method invocation
 
SOLID - Principles of Object Oriented Design
SOLID - Principles of Object Oriented DesignSOLID - Principles of Object Oriented Design
SOLID - Principles of Object Oriented Design
 
Software architecture patterns
Software architecture patternsSoftware architecture patterns
Software architecture patterns
 
Presto updates to 0.178
Presto updates to 0.178Presto updates to 0.178
Presto updates to 0.178
 
Java - Concurrent programming - Thread's basics
Java - Concurrent programming - Thread's basicsJava - Concurrent programming - Thread's basics
Java - Concurrent programming - Thread's basics
 
Scala - the good, the bad and the very ugly
Scala - the good, the bad and the very uglyScala - the good, the bad and the very ugly
Scala - the good, the bad and the very ugly
 
Java - Collections framework
Java - Collections frameworkJava - Collections framework
Java - Collections framework
 
Java - Sockets
Java - SocketsJava - Sockets
Java - Sockets
 
A (too) Short Introduction to Scala
A (too) Short Introduction to ScalaA (too) Short Introduction to Scala
A (too) Short Introduction to Scala
 
Java - Processing input and output
Java - Processing input and outputJava - Processing input and output
Java - Processing input and output
 
Java - Concurrent programming - Thread's advanced concepts
Java - Concurrent programming - Thread's advanced conceptsJava - Concurrent programming - Thread's advanced concepts
Java - Concurrent programming - Thread's advanced concepts
 
Java Exception Handling, Assertions and Logging
Java Exception Handling, Assertions and LoggingJava Exception Handling, Assertions and Logging
Java Exception Handling, Assertions and Logging
 
Java- Concurrent programming - Synchronization (part 1)
Java- Concurrent programming - Synchronization (part 1)Java- Concurrent programming - Synchronization (part 1)
Java- Concurrent programming - Synchronization (part 1)
 
Java- Concurrent programming - Synchronization (part 2)
Java- Concurrent programming - Synchronization (part 2)Java- Concurrent programming - Synchronization (part 2)
Java- Concurrent programming - Synchronization (part 2)
 
Java Graphics Programming
Java Graphics ProgrammingJava Graphics Programming
Java Graphics Programming
 

Similar to Design pattern architetturali Model View Controller, MVP e MVVM

Design Pattern Comportamentali
Design Pattern ComportamentaliDesign Pattern Comportamentali
Design Pattern ComportamentaliRiccardo Cardin
 
Asp.Net MVC 3 - Il Model View Controller secondo Microsoft
Asp.Net MVC 3 - Il Model View Controller secondo MicrosoftAsp.Net MVC 3 - Il Model View Controller secondo Microsoft
Asp.Net MVC 3 - Il Model View Controller secondo MicrosoftStefano Benedetti
 
Alessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVCAlessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVCAlessandro Forte
 
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the WebHands on MVC - Mastering the Web
Hands on MVC - Mastering the WebClaudio Gandelli
 
Asp.NET MVC Framework
Asp.NET MVC FrameworkAsp.NET MVC Framework
Asp.NET MVC FrameworkDotNetMarche
 
Migliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.jsMigliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.jsAndrea Dottor
 
ASP.NET MVC 3: se non ora, quando?
ASP.NET MVC 3: se non ora, quando?ASP.NET MVC 3: se non ora, quando?
ASP.NET MVC 3: se non ora, quando?Giorgio Di Nardo
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angulardotnetcode
 
Idiomatic Domain Driven Design
Idiomatic Domain Driven DesignIdiomatic Domain Driven Design
Idiomatic Domain Driven DesignAndrea Saltarello
 
Asp.Net MVC 2 :: VS 2010 Community Tour
Asp.Net MVC 2 :: VS 2010 Community TourAsp.Net MVC 2 :: VS 2010 Community Tour
Asp.Net MVC 2 :: VS 2010 Community TourAndrea Balducci
 
Niccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWTNiccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWTfirenze-gtug
 
Zend Framework Workshop Parte1
Zend Framework Workshop Parte1Zend Framework Workshop Parte1
Zend Framework Workshop Parte1massimiliano.wosz
 
Presentazione review it_20min
Presentazione review it_20minPresentazione review it_20min
Presentazione review it_20minFabrizio Straccia
 
Database Project in Visual Studio 2010
Database Project in Visual Studio 2010Database Project in Visual Studio 2010
Database Project in Visual Studio 2010Gian Maria Ricci
 
Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6Michele Aponte
 

Similar to Design pattern architetturali Model View Controller, MVP e MVVM (20)

MVC2: non solo tecnologia
MVC2: non solo tecnologiaMVC2: non solo tecnologia
MVC2: non solo tecnologia
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Design Pattern Comportamentali
Design Pattern ComportamentaliDesign Pattern Comportamentali
Design Pattern Comportamentali
 
Asp.Net MVC 3 - Il Model View Controller secondo Microsoft
Asp.Net MVC 3 - Il Model View Controller secondo MicrosoftAsp.Net MVC 3 - Il Model View Controller secondo Microsoft
Asp.Net MVC 3 - Il Model View Controller secondo Microsoft
 
Alessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVCAlessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVC
 
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the WebHands on MVC - Mastering the Web
Hands on MVC - Mastering the Web
 
Asp.NET MVC Framework
Asp.NET MVC FrameworkAsp.NET MVC Framework
Asp.NET MVC Framework
 
Migliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.jsMigliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.js
 
MVC and Struts 1
MVC and Struts 1MVC and Struts 1
MVC and Struts 1
 
ASP.NET MVC 3: se non ora, quando?
ASP.NET MVC 3: se non ora, quando?ASP.NET MVC 3: se non ora, quando?
ASP.NET MVC 3: se non ora, quando?
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
 
Idiomatic Domain Driven Design
Idiomatic Domain Driven DesignIdiomatic Domain Driven Design
Idiomatic Domain Driven Design
 
ASP.NET MVC: Full Throttle
ASP.NET MVC: Full ThrottleASP.NET MVC: Full Throttle
ASP.NET MVC: Full Throttle
 
Asp.Net MVC 2 :: VS 2010 Community Tour
Asp.Net MVC 2 :: VS 2010 Community TourAsp.Net MVC 2 :: VS 2010 Community Tour
Asp.Net MVC 2 :: VS 2010 Community Tour
 
Niccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWTNiccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWT
 
Zend Framework Workshop Parte1
Zend Framework Workshop Parte1Zend Framework Workshop Parte1
Zend Framework Workshop Parte1
 
Presentazione review it_20min
Presentazione review it_20minPresentazione review it_20min
Presentazione review it_20min
 
Database Project in Visual Studio 2010
Database Project in Visual Studio 2010Database Project in Visual Studio 2010
Database Project in Visual Studio 2010
 
Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6
 
Novità di Asp.Net 4.0
Novità di Asp.Net 4.0Novità di Asp.Net 4.0
Novità di Asp.Net 4.0
 

Design pattern architetturali Model View Controller, MVP e MVVM

  • 1. MODEL VIEW CONTROLLER INGEGNERIA DEL SOFTWARE Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica, A.A. 2014 – 2015 rcardin@math.unipd.it
  • 2. Ingegneria del software mod. B MODEL VIEW CONTROLLER 2Riccardo Cardin Architetturali Model view controller
  • 3. Ingegneria del software mod. B INTRODUZIONE E CONTESTO  Pattern architetturale  Inizialmente utilizzato per GUI Smalltalk-80  … ora pattern base dell’architettura J2EE, .NET, RoR ...  ... e dei maggiori framework JS: AngularJS, BackboneJS, ...  Contesto d’utilizzo  Applicazioni che devono presentare attraverso una UI un insieme di informazioni  Le informazioni devono essere costantemente aggiornate  Separation of concerns  Le persone responsabili dello sviluppo hanno compentenze differenti 3Riccardo Cardin
  • 4. Ingegneria del software mod. B PROBLEMA  Supporto a diverse tipologie di utenti con diverse interfacce  Rischio di duplicazione del codice (“cut and paste”) 4Riccardo Cardin
  • 5. Ingegneria del software mod. B 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, …  Il supporto a diverse viste non deve influire sulle componenti che forniscono le funzionalità base. 5Riccardo Cardin
  • 6. Ingegneria del software mod. B 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) 6Riccardo Cardin
  • 7. Ingegneria del software mod. B SOLUZIONE E STRUTTURA  Model  Definisce il modello dati  Realizza la business logic  Dati e le operazioni su questi  Progettato mediante tecniche object oriented  Design pattern  Notifica alla view aggiornamenti del modello dati  Observer pattern  View deve visualizzare sempre dati aggiornati! 7Riccardo Cardin
  • 8. Ingegneria del software mod. B SOLUZIONE E STRUTTURA  View  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)  “pull model”  La view richiede aggiornamenti solo quando è opportuno  MVC su diversi ambienti di esecuzione  Strategia JEE (JSP, Servlet) classico, Spring, Play!, ... 8Riccardo Cardin
  • 9. Ingegneria del software mod. B SOLUZIONE E STRUTTURA  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. 9Riccardo Cardin Model Input 1 Input 2 … T(Input 1) T(Input 2) … Controller Strategy
  • 10. Ingegneria del software mod. B STRATEGIE  Nativo (push model)  Web based (single page application)  View: Javascript e template  Controller: Javascript (routing)  Model: Javascript  Sincronizzazione con backend tramite API REST/SOAP  Web based (server, pull model)  View: JSP, ASP, ...  Controller: Servlet  Una sola servlet come controller (Front Controller pattern)  Model: EJB / Hibernate / MyBatis 10Riccardo Cardin
  • 11. Ingegneria del software mod. B COLLABORAZIONI  Push model 11Riccardo Cardin View “osserva” Model Controller “osserva” View
  • 12. Ingegneria del software mod. B COLLABORAZIONI  Push model 12Riccardo Cardin Observer Observer
  • 13. Ingegneria del software mod. B COLLABORAZIONI  Pull model 13Riccardo Cardin Le richieste della vista e gli aggiornamenti per essa transitano dal Controller La vista è passiva e può essere realizzata con linguaggi di markup (HTML) Possibile salto tecnologico
  • 14. Ingegneria del software mod. B CONSEGUENZE  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 14Riccardo Cardin
  • 15. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Componente per lo sviluppo di applicazione web  Model  Service classes: layer della logica di business del sistema  View  Layer di visualizzazione/presentazione dati  Utilizza la tecnologia JSP e Tag library  Controller  Layer che gestisce/controlla flussi e comunicazioni  Dispatcher delle richieste (Front controller)  Controller che implementano la logica applicativa  Pull model MVC 15Riccardo Cardin
  • 16. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Architettura 16Riccardo Cardin Recupera il controller adatto per la request (mapping) Gestisce la richiesta, delegando alle classi service la business logic Individua la vista di destinazione (view resolving)
  • 17. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  org.springframework.web.servlet.DispatcherServlet  Front controller  Recupera controller (handler mapping) e viste (view resolving)  Da configurare nel file web.xml  Configurazione XML (Web Application Context)  <servlet-name>-servlet.xml 17Riccardo Cardin <servlet> <servlet-name>disp</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>disp</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> Default servlet, non preclude alcun formato nella risposta, ma gestisce anche i contenuti statici.
  • 18. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Controller e annotazioni  Racchiudono la logica dell’applicazione web  DefaultAnnotationHandlerMapping  Mapping delle richieste utilizzando @RequestMapping  Sfrutta l’autowiring e l’autodiscovering dei bean  POJO, più semplice da verificare (i.e. Mockito) 18Riccardo Cardin <beans> <bean id="defaultHandlerMapping" class="org.springframework.web.portlet.mvc.annotation. DefaultAnnotationHandlerMapping" /> <mvc:annotation-driven/> <context:component-scanbase- package="com.habuma.spitter.mvc"/> [...] </bean> <name>-servlet.xml
  • 19. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Controller e annotazioni 19Riccardo Cardin @Controller public ClassHomeController { // Business logic private SpitterService spitterService; @Inject public HomeController(SpitterService spitterService) { this.spitterService = spitterService; } @RequestMapping({"/","/home"}) public String showHomePage(Map<String,Object> model) { model.put("spittles",spitterService.getRecentSpittles( DEFAULT_SPITTLES_PER_PAGE)); return "home"; } } Dichiarazione del Controller Injection della business logic Dichiarazione URL gestiti Modello ritornato alla view Scelta della prossima view
  • 20. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  @RequestParam  Permette il recupero dei parametri da una richiesta  org.springframework.ui.Model  Mappa di stringhe – oggetti  Convention over configuration (CoC)  Da utilizzare con Controller annotati 20Riccardo Cardin @RequestMapping(value="/spittles",method=GET) public String listSpittlesForSpitter( @RequestParam("spitter") String username, Model model) { Spitterspitter=spitterService.getSpitter(username); model.addAttribute(spitter); model.addAttribute( spitterService.getSpittlesForSpitter(username)); return"spittles/list"; }
  • 21. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Componente View  Scelte da un risolutore (resolver) secondo il tipo di ritorno del metodo del Controller  XmlViewResolver Usa un file di configurazione xml per la risoluzione delle view  ResourceBundleViewResolver Usa un resource bundle (una serie di file con estensione .properties) per risolvere le view  UrlBasedViewResolver Esegue una risoluzione diretta del nome simbolico della view in una URL  InternalResourceViewResolver Il nome logico viene utilizzato direttamente come nome della view. 21Riccardo Cardin
  • 22. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Componente View 22Riccardo Cardin [...] <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> [...] <bean class="org.springframework.web.servlet.view.XmlViewResolver"> <property name="location"> <value>/WEB-INF/spring-views.xml</value> </property> </bean> <beans xmlns=“…”> <bean id="WelcomePage“ class="org.springframework.web.servlet.view.JstlView"> <property name="url" value="/WEB-INF/pages/WelcomePage.jsp" /> </bean> </beans> InternalResourceViewResolver XmlViewResolver spring-views.xml
  • 23. Ingegneria del software mod. B ESEMPIO PULL MODEL: SPRING MVC  Componente View  Pagina JSP (HTML + scripting Java)  Utilizzo di librerie (JSTL) per la manipolazione dei bean  Il server compila la pagina (servlet) in HTML semplice 23Riccardo Cardin <%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %> <html> <head></head> <body> <div>Salve, menestrello. Inserisci di seguito il nome del cavaliere di cui vuoi narrare le gesta: <sf:form method="POST" modelAttribute="knightOfTheRoundTable"> <sf:input path="name" size="15" /> <sf:button>Inizia</sf:button> </sf:form> </div> </body> </html> Librerie di direttive per manipolare i bean Nome del bean che il Controller deve gestire. Il valore viene inserito nell’attributo «name»
  • 24. Ingegneria del software mod. B ESEMPIO PUSH MODEL: BACKBONE  Componente Model  Dati di business (anche aggregati  collection)  Backbone.Collection  Notifica i propri osservatori delle modifiche 24Riccardo Cardin 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 Costruttore
  • 25. Ingegneria del software mod. B ESEMPIO PUSH MODEL: BACKBONE  Componente View 25Riccardo Cardin var buildPhotoView = function ( photoModel, photoController ) { // ... var render = function () { photoEl.innerHTML = _.template( "#photoTemplate" , { src: photoModel.getSrc() }); }; photoModel.addSubscriber( render ); photoEl.addEventListener( "click", function () { photoController.handleEvent( "click", photoModel ); }); // ... return { showView: show, hideView: hide }; }; Operazioni esposte dalla vista (module pattern) Templating Osservazione modello e comunicazione attiva con controller Constructor injection
  • 26. Ingegneria del software mod. B ESEMPIO PUSH MODEL: BACKBONE  Componente Controller  Router: collante tra View e Model  Inoltre instradano l’applicazione fra le diverse viste  È possibile usare Controller da altre librerie 26Riccardo Cardin var PhotoRouter = Backbone.Router.extend({ // Handles a specific URL with a specific function routes: { "photos/:id": "route" }, // Function specification route: function(id) { // Retrieving information from model var item = photoCollection.get(id); // Giving such information to view var view = new PhotoView({ model: item }); something.html( view.render().el ); } }): Associazione fra URL e funzioni 1. Recupera le informazioni dal modello 2. Imposta le informazioni nella vista
  • 27. Ingegneria del software mod. B MODEL VIEW PRESENTER  Presenter (passive view)  Man in the middle  Osserva il modello  View business logic  Aggiorna e osserva la vista (dumb)  Interfaccia di comunicazione  Metodi setter e getter per il recupero dei dati  View  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 27Riccardo Cardin
  • 28. Ingegneria del software mod. B MODEL VIEW PRESENTER  Passive View 28Riccardo Cardin Il Presenter interagisce con la View attraverso un’interfaccia Il Model interagisce unicamente con il Presenter
  • 29. Ingegneria del software mod. B MODEL VIEW VIEWMODEL  Separazione sviluppo UI dalla business logic  ViewModel  Proiezione del modello per una vista  Solamente la validazione rimane nel modello  Binding con la vista e il modello  Dati e operazioni che possono essere eseguiti su una UI  View  Dichiarativa (utilizzando linguaggi di markup)  Two-way data-binding con proprietà del ViewModel  Non possiede più lo stato dell’applicazione. 29Riccardo Cardin
  • 30. Ingegneria del software mod. B MODEL VIEW VIEWMODEL 30Riccardo Cardin Comunicazione tramite data-binding e eventi Partecipazione attiva del ViewModel sui dati del Model
  • 31. Ingegneria del software mod. B ESEMPIO MVVM: ANGULARJS  Javascript framework  Client-side  Model-View-Whatever  MVC per alcuni aspetti (controller)…  …MVVM per altri (two-way data binding)  Utilizza HTML come linguaggio di templating  Non richiede operazioni di DOM refresh  Controlla attivamente le azioni utente, eventi del browser  Dependence injection  Fornisce ottimi strumenti di test  Jasmine (http://jasmine.github.io/) 31Riccardo Cardin
  • 32. Ingegneria del software mod. B ANGULARJS  Model – View – Whatever 32Riccardo Cardin Views Model Controllers $scope (ModelView) ServicesTemplates view controller - modelview model Espone i metodi dell’application logic e realizza il two-way data binding Realizza le viste utilizzando le proiezioni del modello Modello dati e servizi di business logic «whatever works for you»
  • 33. Ingegneria del software mod. B ANGULARJS  Viste e templating  Approccio dichiarativo: HTML  Direttive: widget, DOM «aumentato»  Markup {{ }}  Effettua il binding agli elementi del view-model  Solitamente apcontenuta in una sola pagina  Riduce il dialogo con il server e non richiede refresh 33Riccardo Cardin <html ng-app> <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"> </body> </html> Le direttive vengono compilate index.html
  • 34. Ingegneria del software mod. B ANGULARJS  One-way data binding  …not the right way… 34Riccardo Cardin Il merge tra modello e template avviene all’atto di creazione della vista Modifiche al modello richiedono un aggiornamento esplicito e custom della vista
  • 35. Ingegneria del software mod. B ANGULARJS  Two-way data binding  …the Angular way! 35Riccardo Cardin Il template è compilato in una live view La vista è una proiezione del modello (Model-View ViewModel)
  • 36. Ingegneria del software mod. B ANGULARJS  Oggetto $scope  Collante tra controller e le viste  Contesto di esecuzione per espressioni  Alcune direttive creano uno scope  $rootScope  Gerarchia simile a quella definita dal DOM  Browser event loop  $watch: permette alle direttive di comprendere quando il view-model cambia  $apply: permette alle direttive di modificare il view-model eseguendo funzioni 36Riccardo Cardin
  • 37. Ingegneria del software mod. B ANGULARJS  Browser event loop 37Riccardo Cardin
  • 38. Ingegneria del software mod. B ANGULARJS  Controller  ng-controller  Inizializza e aggiunge funzioni all’oggetto $scope 38Riccardo Cardin var myApp = angular.module('spicyApp2', []); myApp.controller('SpicyCtrl', ['$scope', function($scope){ $scope.customSpice = "wasabi"; $scope.spice = 'very'; // Functions $scope.spicy = function(spice){ $scope.spice = spice; }; }]); <div ng-app="spicyApp2" ng-controller="SpicyCtrl"> <input ng-model="customSpice"> <button ng-click="spicy('chili')">Chili</button> <button ng-click="spicy(customSpice)">Custom spice</button> <p>The food is {{spice}} spicy!</p> </div> view Aggiunta variabili e funzioni al view- model
  • 39. Ingegneria del software mod. B ANGULARJS  Controller  Contiene l’application logic di una singola vista  Non ha riferimenti diretti alla vista  Facilita la fasee di testing  Non contiene business logic  Per questo si usano i servizi: $http, $resource, ...  Dependence injection  Non deve effettuare manipolizazione del DOM  Non è un presenter!  Non deve occuparsi dell’input formatting  Usare i form controls  Non deve occuparsi dell’output filtering  Usare i filters 39Riccardo Cardin
  • 40. Ingegneria del software mod. B ANGULARJS  Servizi  Racchiudono la business logic  Richiamati dai Controller 40Riccardo Cardin angular.module('finance2', []) .factory('currencyConverter', function() { var currencies = ['USD', 'EUR', 'CNY'], usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 }; function convert(amount, inCurr, outCurr) { return amount * usdToForeignRates[outCurr] * 1 / usdToForeignRates[inCurr]; } return { currencies: currencies, convert: convert }; }); privatepublic
  • 41. Ingegneria del software mod. B ANGULARJS  Angular services  Forniscono utilità comuni alle applicazioni  $http  Permette di comunicare con servizi HTTP  XMLHttpRequest o JSONP  Utilizza Promises ($q)  reactive programming  Gestione history ($location), logging ($log), ... 41Riccardo Cardin $http({method: 'GET', url: '/someUrl'}). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. }); promise
  • 42. Ingegneria del software mod. B 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/FrontCo ntroller.html  Learning Javascript Design Patterns http://addyosmani.com/resources/essentialjsdesignpatterns/book/  Developing Backbone.js Applications http://addyosmani.github.io/backbone-fundamentals/ 42Riccardo Cardin