mvc e di - spring e angularjs - math.unipd.itrcardin/pdf/mvc e di - spring e angularjs_4x4.pdf ·...

DEPENDENCY INJECTION E MVC: SPRING E ANGULARJS INGEGNERIA DEL SOFTWARE Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica, A.A. 2013 – 2014

[email protected] Ingegneria del software mod. B

INTRODUZIONE Un po’ di storia …

2

Riccardo Cardin

1996 1998 2006

Java beans • Riusabilità e composizionalità • Troppo semplici Transazionalità? Sicurezza?

EJB 1.0 • Aggiunge ai beans componenti server-side • Servizi accedibili da remoto • Tecnologia molto complessa

EJB 3.0 • Implementazione semplificata • Deployment semplificato (annotazioni)

Ingegneria del software mod. B

INTRODUZIONE Spring

Framework opensource creato per ridurre la

complessità dello sviluppo di applicazioni enterprise

Non è limitato alla componente server

Utilizza componenti semplici (bean)

Permette di ridurre l’accoppiamento 3

Riccardo Cardin

“Spring is a lightweight inversion of control and aspect oriented container framework”


INTRODUZIONE Spring

Lightweight

Non è intrusivo, gli oggetti sviluppati non dipendono da classi del framework

Framework/Container Gestisce il ciclo di vita e la configurazione degli oggetti

dell’applicazione. La configurazione utilizza XML o annotazioni. Lo sviluppatore può concentrarsi sulla logica di business

IoC e DI

Il container si fa carico di “iniettare” le dipendenze degli oggetti a runtime

4

Riccardo Cardin


SPRING: CONCETTI Plan Old Java Object (POJO)

Inversion of Control (principio di Hollywood) Il ciclo di vita degli oggetti è gestito da una entità

esterna (container)

Dependency Injection Le dipendenze di un oggetto vengono “iniettate”

nell’istanza automaticamente e a runtime Utilizzo costruttori e metodi setter 5

Riccardo Cardin

"We wondered why people were so against using regular objects in their systems and concluded that it was because simple objects lacked a fancy name. So we gave them one, and it's caught on very nicely."


SPRING: CONCETTI Dependency Injection pattern

Separa il comportamento di una componente dalla

risoluzione delle sue dipendenze

Minimizza il livello di accoppiamento

La componente dichiara unicamente le sue dipendenze

Un framework DI risolve a runtime le dipendenze

dichiarate Utilizzo costruttori e metodi setter dei POJO Perdita dell’incapsulamento

6

Riccardo Cardin


DEPENDENCY INJECTION Poor initialization

7

Riccardo Cardin

… migliorando un po’ …


DEPENDENCY INJECTION Classic inizialization

Utilizzo del design pattern factory

8

Riccardo Cardin


DEPENDENCY INJECTION Spring injection

Costruzione e risoluzione delle dipendenze

9

Riccardo Cardin

...e si vuole cambiare l’implementazione di B...


SPRING: ARCHITETTURA Architettura del framework

10

Riccardo Cardin


SPRING: ARCHITETTURA Core container

Implementa l’IoC attraverso la BeanFactory Wiring bean

Application context Fornisce servizi come i18n, JNDI, EJB integration

Modulo JDBC e DAO Gestione degli accessi al datasource Evita la gestione delle connessioni

Modulo MVC Separa la logica di controllo da quella di business

11

Riccardo Cardin Ingegneria del software mod. B

SPRING: COMPONENTI Configurazione XML

org.springframework.beans.factory.BeanFactory Implementazione del pattern factory, costruisce e risolve le

dipendenze

org.springframework.context.ApplicationContext Costruita sulla bean factory, fornisce ulteriori funzionalità

AOP, transazionalità, ...

12

Riccardo Cardin

ApplicationContext ctx = new ClassPathXmlApplicationContext( "com/springinaction/springidol/filename.xml"); […] MyBean bean = (MyBean) ctx.getBean(“beanid”);



Dependency injection attraverso proprietà Utilizzo metodi setter e getter

13

Riccardo Cardin

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN" "http://www.springframework.org/dtd/spring-beans-2.0.dtd"> </beans> <bean id="A" class="nomeClasseA" > <property name="nome1" ref="B"/> <property name="nome2" value="una stringa"/> <property name="nome3" value="37"/> </bean > <bean id="B" class="nomeClasseB" /> </beans>



Dependency injection attraverso costruttori

DI attraverso factory methods, init e destroy methods...

14

Riccardo Cardin

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN" "http://www.springframework.org/dtd/spring-beans-2.0.dtd"> </beans> <bean id="A" class="nomeClasseA" > <constructor-arg value="15"/> <constructor-arg ref="B"/> </bean > <bean id="B" class="nomeClasseB" /> </beans>


SPRING: COMPONENTI Wiring utilizzando annotazioni

Permette una gestione migliore della configurazione in progetti grandi

Introduce una dipendenza da framework esterni @Autowired @Inject, annotazione JSR-330 @Resource, annotazione JSR-250

15

Riccardo Cardin

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN" "http://www.springframework.org/dtd/spring-beans-2.0.dtd"> </beans> <context:annotation-config/> <context:component-scan base-package="org.example"/> [...]


SPRING: COMPONENTI Wiring utilizzando annotazioni

@Inject/@Autowired Ricerca per tipo il bean della proprietà Si utilizza su costruttori, proprietà, ... Il bean non deve essere ambiguo

Disambiguazione tramite @Named per l’ID

Autodiscovery @Component, @Controller, @Service, ... 16

Riccardo Cardin

@Inject private Instrument instrument; @Inject @Named("guitar") private Instrument instrument2;


SPRING Esempio

Interfacce e dependency injection

17


SPRING: MVC Componente per lo sviluppo di applicazione web

Model Layer della logica di business del sistema

View Layer di visualizzazione/presentazione dati

Utilizza la tecnologia JSP e Tag library Control

Layer che gestisce/controlla flussi e comunicazioni Dispatcher delle richieste (Front controller) Controller che implementano la logica applicativa

Integrazione con Spring IoC container Utilizzo del DI pattern 18

Riccardo Cardin


FRONT CONTROLLER PATTERN Architettura

19


FRONT CONTROLLER PATTERN Il controller è l’unico punto di accesso

Gestisce le richieste in tutti gli aspetti

20

Riccardo Cardin


SPRING: MVC Architettura e componenti

21


SPRING: MVC org.springframework.web.servlet.DispatcherServlet

Front controller del framework Spring Da configurare nel file web.xml

Configurata via XML (Web Application Context) <servlet-name>-servlet.xml 22

Riccardo 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.


SPRING: MVC Handler mappings

Associa la servlet (gli URL) con i controller BeanNameUrlHandlerMapping

SimpleUrlHandlerMapping

23

Riccardo Cardin

<beans> <bean id="beanNameUrlMapping" class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping" /> <bean name="/listEmployee.htm" class="controllers.ListEmployeeController"> …. </bean>

<bean id ="handlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping"> <property name="mappings"> <value> /ex/view*.htm=helpController /**/help.htm=helpController </value> </property> </bean>

http://localhost:8080/ExampleSpring/listEmployee.htm


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)

24

Riccardo 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>


SPRING: MVC Controller e annotazioni

25

Riccardo Cardin

@Controller public ClassHomeController { private SpitterService spitterService; @Inject public HomeController(SpitterServicespitterService) { 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 dell’applicazion logic

Dichiarazione URL gestiti

Modello ritornato alla view

Scelta della prossima view


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

26

Riccardo 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"; }


SPRING: MVC Componente view

Scelte da un risolutore (resolver) secondo il ModelAndView

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. 27


SPRING: MVC Componente view

28

Riccardo 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: PERSISTENZA Fornisce supporto uniforme verso lo strato di

persistenza

JDBC, ORM, … Versione particolare del template method pattern

Nessun metodo astratto Le firme dei metodi hanno come parametri interfacce che

vengono risolte a runtime

PreparedStatementCreator CallableStatementCreator RowCallbackHandler RowMapper ... 29


TEMPLATE METHOD Struttura

30

Riccardo Cardin

Definisce le operazione astratte primitive. Definisce lo scheletro

dell’algoritmo

Implementa le operazioni primitive fornendo i passi concreti

all’algoritmo


SPRING: PERSISTENZA Supporto JDBC

org.springframework.jdbc.core.JdbcTemplate Gestione trasparente delle connessioni Incapsulamento API JDBC (query, ResultSet, … ) Cattura le eccezioni JDBC e le trasforma in eccezioni più

comunicative

Permette di costruire DAO utilizzando IoC

31

Riccardo Cardin

public class JdbcCorporateEventDao implements CorporateEventDao { private JdbcTemplate jdbcTemplate; public void setDataSource(DataSource dataSource) { this.jdbcTemplate = new JdbcTemplate(dataSource); } }


SPRING: PERSISTENZA Supporto JDBC

Accesso al JDBC layer in I/O

32

Riccardo Cardin

int countOfActorsNamedJoe = this.jdbcTemplate.queryForInt("select count(0) from t_actors where first_name = ?", new Object[]{"Joe"});

public class ActorRowMapper implements RowMapper { public Object mapRow(ResultSet rs, int rowNum) throws SQLException { Actor actor = new Actor(); actor.setFirstName(rs.getString("first_name")); actor.setSurname(rs.getString("surname")); return actor; } ... Actor actor = (Actor) this.jdbcTemplate.queryForObject( "select first_name, surname from t_actor where id = ?", new Object[]{new Long(1212)}, new ActorRowMapper() );

Recupero primitivo

Recupero oggetti


STRUMENTI ORM Definizione

Framework in grado di mappare proprietà di un

oggetto con colonne di un DB Persistenza garantita attraverso gli oggetti

Offrono specifici linguaggi di interrogazione Garantiscono sofisticate funzionalità

Lazy loading Eager fetching Caching Cascading …

JPA, Java Persistence API 33


SPRING: PERSISTENZA Hibernate

Mappa una tabella su un oggetto

34

Riccardo Cardin

Studenti

ID: NUMBER FIRST_NAME: VARCHAR LAST_NAME: VARCHAR …

public class Studente { private Integer id; private String firstName; private String lastName; private Set courses; ... public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } ...

H8



H8 Session Factory è il gestore delle connessioni fra oggetti Java e il database Necessità di datasource … inietiamolo con Spring!

35

Riccardo Cardin

<beans> <bean id="myDataSource" class="org.apache.commons.dbcp.BasicDataSource" > <property name="driverClassName" value="org.gjt.mm.mysql.Driver"/> </bean> <bean id="mySessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <property name="dataSource" ref="myDataSource"/> <property name="mappingResources"> <list> <value>hibernate.hbm.xml</value> </list> </property> ... </beans>



org.springframework.orm.hibernate3.HibernateTemplate Fornisce l'accesso alla sessione di H8 Assicura che la session stessa sia appropriatamente aperta e

chiusa Fornisce le funzionalità standard di accesso ai dati

L’implementazione dell’interfaccia HibernateCallback permette l’interfacciamento Spring – H8

36

Riccardo Cardin

public Collection loadAziende(final String category) throws DataAccessException { HibernateTemplate ht = new HibernateTemplate(this.sessionFactory); return (Collection) ht.execute(new HibernateCallback() { public Object doInHibernate(Session session) throws HibernateException { Query query = session.createQuery("from spring-samples.Aziende aziende"); return query.list(); } }); }



È possibile configurare HibernateTemplate direttamente con una session factory Non occorre più implementare HiberateCallback

37

Riccardo Cardin

<bean id="hibernateTemplate“ class="org.springframework.orm.hibernate3.HibernateTemplate"> <property name="sessionFactory"> <ref bean="sessionFactory"/> </property> </bean>

public void updateStudent(Student student) { hibernateTemplate.update(student); } public List findStudentsByLastName(String lastName) { return hibernateTemplate.find("from Student student " + "where student.lastName = ?", lastName); }


SPRING Ci sarebbero ancora molti aspetti da trattare …

Gestione delle transazioni Aspect Oriented Programming (AOP) Remoting Spring Roo Spring Social Spring Web Service Spring.io ...

… ma non c’è più tempo!!! 38

Riccardo Cardin


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 39


ANGULARJS Model – View – Whatever

40

Riccardo Cardin

Views Model

Controllers

$scope

(Mod

elVi

ew) Services Templates

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»


ANGULARJS Viste e templating

Approccio dichiarativo: HTML Direttive

Widget, aumentano le caratteristiche del DOM Markup {{ }}

Effettua il binding agli elementi del view-model Solitamente contenuta in una sola pagina

Riduce il dialogo con il server e non richiede refresh

41

Riccardo 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


ANGULARJS One-way data binding

…not the right way…

42

Riccardo 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


ANGULARJS Two-way data binding

…the Angular way!

43

Riccardo Cardin

Il template è compilato in una live view

La vista è una proiezione del modello (Model-View ViewModel)


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

44

Riccardo Cardin


ANGULARJS Browser event loop

45


ANGULARJS Controller

ng-controller Inizializza e aggiunge funzioni all’oggetto $scope

46

Riccardo 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


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

47


ANGULARJS Servizi

Racchiudono la business logic Richiamati dai Controller

48

Riccardo 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 }; });

private

public


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), ...

49

Riccardo 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


ANGULARJS Dependency Injection

$provide: risolve le dipendenze fra le componenti Viene invocato direttamente da Angular al bootstrap

50

Riccardo Cardin

// Provide the wiring information in a module angular.module('myModule', []). // Teach the injector how to build a 'greeter' // Notice that greeter itself is dependent on '$window' factory('greeter', function($window) { // This is a factory function, and is responsible for // creating the 'greet' service. return { greet: function(text) { $window.alert(text); } }; }); // Request any dependency from the $injector angular.injector(['myModule', 'ng']).get('greeter');

"Ricetta" di come costruire greeter

Ritorna il servizio $provide



51



Factory methods: costruiscono le componenti Utilizzano recipe (ricette)

52

Riccardo Cardin

angular.module('myModule', []). config(['depProvider', function(depProvider){ //... }]). factory('serviceId', ['depService', function(depService) { //... }]). directive('directiveName', ['depService', function(depService) { //... }]). filter('filterName', ['depService', function(depService) { //... }]). run(['depService', function(depService) { //... }]);


RIFERIMENTI Spring Source, pagina ufficiale del progetto

http://www.springsource.org/ Spring in Action (3° edition), Manning Publications Spring tutorial

http://www.roseindia.net/spring/index.shtml Mastering Web Application Development with

AngularJS, Packt Publishing AngularJS databing

http://docs.angularjs.org/guide/databinding AngularJS controller

http://docs.angularjs.org/guide/controller Inversion of Control Containers and the Dependency

Injection pattern http://martinfowler.com/articles/injection.html

53

Riccardo Cardin

mvc e di - spring e angularjs - math.unipd.itrcardin/pdf/mvc e di - spring e angularjs_4x4.pdf ·...

Documents