SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
Niccolò Becchi, 18.03.2010
Agenda

    Panoramica tecnologie per web application

    Che cos'è GWT

    Comunicazione con il server

    Esempi d'uso:
    
        Applicazione web con pattern MVC nella costruzione
        dell'interfaccia (approccio comune a tutti gli sviluppatori di
        applicazioni desktop java Swing)
    
        Integrazione di Gwt con CQuery in un'applicazione html
        multipagina tradizionale (approccio comune a tutti gli
        sviluppatori web).

    Ma quando conviene usare Gwt?
Modelli di Web Application

    Tecnologie html
    
        Web 1.0, 1 Iterazione = 1 Refresh di pagina
    
        Mixed Model, Page Reloads + AJAX
    
        Puro JS, Tutto accade nella stessa pagina


    Altre tecnologie RIA:
    
        Adobe Flex
    
        Microsoft Silvelight
Web 2.0

    HTML prodotto lato server (php, java, python,...)
    rafforzato con Javascript client-side

    Reloads gradualmente sostituiti con chiamate
    asincrone AJAX

    Framework per semplificare creazione website
    basati du db (Django, Rails):
    
        Riusabilità del codice, numerosi plug-in.
    
        Object-relational mapper tra data models (Python classes) e
        database relazionale;
    
        Generazione dinamica interfaccia CRUD (Create, Read,...)
    
        Traduzione tra form HTML a valori da storicizzare su database.
Tendenze di oggi

    Trasferisce sempre più logica alla client UI

    Tool di sviluppo separati tra client e server.

    Strumenti completi End to end non maturi

    Lato client esistono librerie js (jQuery, Dojo)
    
        Programmazione JS con un livello di astrazione superiore
    
        Comportamenti omogenei e testati sui differenti browser
    
        Con poco sforzo riesco a far tanto!!
Quando la mia applicazione rischia di
diventare pure Javascript?

    Riprodurre il comportamento di un applicazione desktop:
    
        Interfaccia ricca con numerose componenti
    
        Su ciascuna componente posso interagire alterandone l'aspetto
        (ad es. allargando un pannello, drag and drop, …)



    Non posso permettermi un ricaricamento della pagina:
    
        Perderei caratteristiche della visualizzazione modificate dall'utente
    
        Dovrei trasferire tutto lo stato del client sul server in un bean di
        sessione o altro.
    
        L'utente avrebbe l'impressione di un ritardo.
E quando il codice Javascript scritto
da me cresce a dismisura?

    Linguaggio non compilato: Errori banali solamente in real time.

    Come faccio per trovare errori:
       –   1. Semino alert nel codice
       –   2. Uso firebug (debug non è al livello di ecplise)
       –   3. GreaseMonkey per l'iniziezione di codice Js da eseguire
           sulla pagina
       –   4. Uso Firefox ma il cliente usa IE
Cosa è GWT

    Architettura per RIA sviluppato da Google

    Usa Eclipse e java sia per la parte client che server
    dell'applicazione

    Per il client Java viene compilato in Javascript ottimizzato

    Permette di scrivere codice condiviso senza avere ridondanze
    di codice tra client e server

    Include meccanismo RPC di comunicazione con il Server

    Supporto per Javascript nativo
Compilazione java client Gwt

    Compilate più versioni Js, una per ciascun browser.




Firefox     FF_EN            FF_FR           FF_ZH

 Opera      OP_EN            OP_FR           OP_ZH

 Safari     SF_EN            SF_FR           SF_ZH

    IE6     IE_EN            IE_FR           IE_ZH

            English           French         Chinese
Installazione in eclipse

    Scaricare Ecplise

    Installare plug-in da software updates:
http://dl.google.com/eclipse/plugin/3.5
Pronti a partire!

Esempio Hello World

    Due file scritti dall'utente:

1. Hello.html
    
        Include una chiamata a gwt.js – Il toolkit JavaScript ed
        un elemento con un id definito
    
        Questo viene selezionato per aggiungervi un contenuto

    2. Hello.java
    
        Codice java compilato da Gwt in javascript
Hello.html
<html>
<head>
<meta name='gwt:module'
   content='com.google.gwt.sample.hello.Hello'>
<title>Hello</title>
</head>
<body>
      <script language="javascript" src="gwt.js"></script>
      <div id="hi">
           Testo sovrascritto dal Gwt
      </div>
   </body>
</html>
Hello.java
Interfaccia in GWT

    Basate su un livello di astrazione di Widget

    Approccio comune alle applicazioni desktop:
    Java swing, QT designer (python), ...

    Ogni widget è un oggetto java che poi verrà tradotto dal
    compilatore nel codice html/javascript corrispondente

    Lato client posso in qualsiasi momento chiamare un metodo
    java di uno widget (Come se apparentemente il metodo java
    fosse eseguito dal browser)
Esempio Widget TextBox


Codice html tradizionale:
  <input type="text" name="test" value="pippo"/>


Codice Java GWT:
   TextBox normalText = new TextBox();
   normalText.setText(“pippo”);              Traduzione javascript compilatore



                    var aTextBox = document.createElement('input');
                     aTextBox.type = 'text';
                     aTextBox.value = 'pippo';
Javadoc




http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/TextBox.html
gwt.google.com/samples/Showcase/Showcase.html
Creazione di un
applicazione GWT
  stile java Swing
Esempio: Concessionaria auto

    Si hanno numerose auto e 5 rivenditori: Luca, Alberto,
    Francesca, Imad e Niccolò

    Ciascun rivenditore è specializzato nel vendere una
    categoria di auto (Luca con le auto di lusso, ..)

    Il sistema deve proporre in tempo reale una lista limitata di
    auto suggerite ad ogni rivenditore che rispettino al meglio
    le sue caratteristiche
Niccolò Becchi: Introduzione a GWT
Model-View-Controller in Gwt

    Pattern consolidato utilizzato in tanti contesti.

    Separare la logica dai dati e dalla visualizzazione.

    Differenze rispetto ad MVC di framework lato server
       –     In genere applicato all'intera pagina nel suo complesso.

    In GWT, come in swing, il pattern è applicato a livello di
    singola componente dell'interfaccia:
       –     Continua a vivere sul browser
       –     Ho tanti piccoli MVC, posso avere:
        −   Più view sullo stesso model;
        −   Più componenti con la stesso logica;
MVC ed Observer pattern





    Idea di base:
     −   View vede il model per caricare i dati
     −   Controller vede entrambi

    Come interagiscono?
     −   Iterazione sulla view => si avverte il controller
     −   Modifica Model => Si avverte la view
AutoModel.java
PropertyChangeModel.java
           (classe estesa dal mio model)




...
AutoWidget.java
    (passo 1 view)
AutoWidget2.java
              estende AutoWidget.java
                       (passo 2 view)




continua...
… continua da View
AutoController.java




...
MVC: Sincronizzazione automatica tra
più view dello stesso model
                      
                          Modifica del model a
                          opera di uno
                          qualunque dei
                          controller mi scatena
                          un evento di
                          aggiornamento su
                          tutte le view collegate
DEMO concessionaria

    Fare vedere un minimo di iterazioni sull'interfaccia, ecc...
VenditoreModel.java




...
VenditoreController.java




....
VenditoreView.java
Cenni ad MVP
               
                   Approccio MCV complicato e, nel
                   caso di banale dialogo di interfaccia,
                   è sovradimensionato.
               
                   MVP, nuovo pattern suggerito dagli
                   sviluppatori del Gwt per
                   l'implementazione dell'interfaccia
               
                   Portare più logica possibile fuori dalla
                   View in un altro livello più facilmente
                   testabile.
               
                   Tutte le operazioni sul View,
                   compreso il caricamento iniziale dei
                   dati del model, sono scritte fuori da
                   questo (ossia nel presenter)
Presenter:
  
      Stato intermedio tra view e model:
  
      Definisce al suo interno un livello di astrazione della view su cui
      definisce tutte le iterazioni che poi andrà ad effettuare con la view
      vera e propria
  
      Carica i dati del model sulla view
  
      Legge le modifiche sulla view (da trasferire al model)
  
      Contiene la logica, ossia istruisce la view per cambiare stato in
      risposta ad un input di un utente o ad una modifica sul model

Vantaggi MVP:
  
      Più semplice e chiaro da usare
  
      Possibilità di sostituire la view reale con una view simulata
      per testare la logica dello widget
Gwt con CQuery in
un'applicazione html
        multipagina
Necessità altro approccio

    Molti designers iniziano il progetto con look

    Reify into server-side rendering using LAMP frameworks

    Layer Javascript on top to enhance UI

    Page can always degrade to working Web

    1.0 app when Javascript is lacking

    Progetto multipagina per Facilitates SEO and accessibility
Integrazione html con JS
Niccolò Becchi: Introduzione a GWT
JQuery

    Libreria Javascript tra le più usate

    Interrogazione DOM

    Concatenazione di metodi

    Manipolazione elementi

    Allacciamento di dati ed eventi

    Plugins
GQuery è

    Clone di jQuery scritto in GWT

    Adatto ad essere usato nella modalita di progettazione delle
    applicazioni a partire dal design

    Facilmente adattabile ad applicazioni già esistenti

    Facile da imparare per chi usa jQuery

    Mantiene molte delle caratteristiche di efficienza e di benefici di
    GWT
Questo è codice Java
Niccolò Becchi: Introduzione a GWT
Altri vantaggi: Performance
Salvati dagli errori




Fare Demo con Gquery se basta il tempo!!
Comunicazione
  con il server
Comunicazione con server via HTTP
•   GWT RPC framework transparently make calls to Java
    servlets and let GWT take care of low-level details like object
    serialization.
•   to transparently make calls to Java servlets and let GWT take
    care of low-level details like object serialization.
•   The server-side code that gets invoked from the client is often
    referred to as a service,
•   so the act of making a remote procedure call is sometimes
    referred to as invoking a service.
•   Alternatively, you can use GWT's HTTP client classes to build
    and send custom HTTP requests.
Architettura RPC
Passi creazione servizio RPC
Per definire un interfaccia RPC è necessario in ordine:
•      1. Definire sul client un interfaccia per il tuo servizio che
     estenda il RemoteService ed elenchi tutti i metodi del tuo
     RPC.
•      2. Definire sul server una classe che implementi il codice
     lato server estendendo il RemoteServiceServlet ed
     implementando i metodi dell'interfaccia creata
     precedentemente.
•      3. Definire sul client un interfaccia asincrona del tuo servizio
     per essere chiamata dal codice lato client.
Interfaccia sincrona
Niccolò Becchi: Introduzione a GWT
Interfaccia asincrona sul client




Configurazione servlet su web.xml
Esempio
Client-side call
Quando conviene
usare Gwt?

Contenu connexe

Tendances

Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoGiuneco S.r.l
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
 
Spring Framework
Spring FrameworkSpring Framework
Spring FrameworkNaLUG
 
Slide Prelaurea. Alessandro Andreosè
Slide Prelaurea. Alessandro AndreosèSlide Prelaurea. Alessandro Andreosè
Slide Prelaurea. Alessandro Andreosèguesta10af3
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS DevicesAndrea Picchi
 
Acadevmy - Angular Overview
Acadevmy - Angular OverviewAcadevmy - Angular Overview
Acadevmy - Angular OverviewFrancesco Sciuti
 
Il Web orientato al futuro: Express, Angular e nodeJS
Il Web orientato al futuro: Express, Angular e nodeJS Il Web orientato al futuro: Express, Angular e nodeJS
Il Web orientato al futuro: Express, Angular e nodeJS Eugenio Minardi
 
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
 
Java Spring Basics - Donato Andrisani - Gabriele Manfredi
Java Spring Basics - Donato Andrisani - Gabriele ManfrediJava Spring Basics - Donato Andrisani - Gabriele Manfredi
Java Spring Basics - Donato Andrisani - Gabriele ManfrediGabriele Manfredi
 
App Mobile Powerapps
App Mobile PowerappsApp Mobile Powerapps
App Mobile PowerappsGiuneco S.r.l
 
Acadevmy - Visual Studio Code Overview
Acadevmy - Visual Studio Code OverviewAcadevmy - Visual Studio Code Overview
Acadevmy - Visual Studio Code OverviewFrancesco Sciuti
 
Win02 bing e windows store apps
Win02   bing e windows store appsWin02   bing e windows store apps
Win02 bing e windows store appsDotNetCampus
 
DotNetCampus 2014 - BING e Windows Store App
DotNetCampus 2014 - BING e Windows Store AppDotNetCampus 2014 - BING e Windows Store App
DotNetCampus 2014 - BING e Windows Store AppMassimo Bonanni
 
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
 

Tendances (20)

Novità di Asp.Net 4.0
Novità di Asp.Net 4.0Novità di Asp.Net 4.0
Novità di Asp.Net 4.0
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un framework
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
Spring Framework
Spring FrameworkSpring Framework
Spring Framework
 
Slide Prelaurea. Alessandro Andreosè
Slide Prelaurea. Alessandro AndreosèSlide Prelaurea. Alessandro Andreosè
Slide Prelaurea. Alessandro Andreosè
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Acadevmy - Angular Overview
Acadevmy - Angular OverviewAcadevmy - Angular Overview
Acadevmy - Angular Overview
 
Introduzione WPF
Introduzione WPFIntroduzione WPF
Introduzione WPF
 
Il Web orientato al futuro: Express, Angular e nodeJS
Il Web orientato al futuro: Express, Angular e nodeJS Il Web orientato al futuro: Express, Angular e nodeJS
Il Web orientato al futuro: Express, Angular e nodeJS
 
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
 
Java Spring Basics - Donato Andrisani - Gabriele Manfredi
Java Spring Basics - Donato Andrisani - Gabriele ManfrediJava Spring Basics - Donato Andrisani - Gabriele Manfredi
Java Spring Basics - Donato Andrisani - Gabriele Manfredi
 
App Mobile Powerapps
App Mobile PowerappsApp Mobile Powerapps
App Mobile Powerapps
 
Spring - Ecosistema
Spring - EcosistemaSpring - Ecosistema
Spring - Ecosistema
 
Acadevmy - Visual Studio Code Overview
Acadevmy - Visual Studio Code OverviewAcadevmy - Visual Studio Code Overview
Acadevmy - Visual Studio Code Overview
 
Angularjs
AngularjsAngularjs
Angularjs
 
Spring @Aspect e @Controller
Spring @Aspect e @Controller Spring @Aspect e @Controller
Spring @Aspect e @Controller
 
Win02 bing e windows store apps
Win02   bing e windows store appsWin02   bing e windows store apps
Win02 bing e windows store apps
 
DotNetCampus 2014 - BING e Windows Store App
DotNetCampus 2014 - BING e Windows Store AppDotNetCampus 2014 - BING e Windows Store App
DotNetCampus 2014 - BING e Windows Store App
 
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?
 

Similaire à Niccolò Becchi: Introduzione a GWT

Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLSinergia Totale
 
Multi-Device Hybrid Apps con Visual Studio e Apache Cordova
Multi-Device Hybrid Apps con Visual Studio e Apache CordovaMulti-Device Hybrid Apps con Visual Studio e Apache Cordova
Multi-Device Hybrid Apps con Visual Studio e Apache CordovaAndrea Dottor
 
Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Giorgio Carpoca
 
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
 
Designing with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDesigning with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDaniele Mondello
 
Struttin' on, novità in casa Struts
Struttin' on, novità in casa StrutsStruttin' on, novità in casa Struts
Struttin' on, novità in casa StrutsMarcello Teodori
 
MVVM senza fronzoli con Caliburn.Micro
MVVM senza fronzoli con Caliburn.MicroMVVM senza fronzoli con Caliburn.Micro
MVVM senza fronzoli con Caliburn.MicroMarco Amendola
 
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the WebHands on MVC - Mastering the Web
Hands on MVC - Mastering the WebClaudio Gandelli
 
Progetto e implementazione di una pipeline di sviluppo software con tecnologi...
Progetto e implementazione di una pipeline di sviluppo software con tecnologi...Progetto e implementazione di una pipeline di sviluppo software con tecnologi...
Progetto e implementazione di una pipeline di sviluppo software con tecnologi...Mattia Milleri
 
Applicazioni Web ultra-performanti con Vue.js e Delphi
Applicazioni Web ultra-performanti con Vue.js e DelphiApplicazioni Web ultra-performanti con Vue.js e Delphi
Applicazioni Web ultra-performanti con Vue.js e DelphiMarco Breveglieri
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Andrea Agnoletto
 
Creazione componenti con Vue js
Creazione componenti con Vue jsCreazione componenti con Vue js
Creazione componenti con Vue jsGianfranco Castro
 
Fe02 ria con breeze e knockout
Fe02   ria con breeze e knockoutFe02   ria con breeze e knockout
Fe02 ria con breeze e knockoutDotNetCampus
 
Webkit meets native development
Webkit meets native developmentWebkit meets native development
Webkit meets native developmentNicholas Valbusa
 
Web Api – The HTTP Way
Web Api – The HTTP WayWeb Api – The HTTP Way
Web Api – The HTTP WayLuca Milan
 
Asp.net 4 Community Tour VS2010
Asp.net 4 Community Tour VS2010Asp.net 4 Community Tour VS2010
Asp.net 4 Community Tour VS2010Fabrizio Bernabei
 

Similaire à Niccolò Becchi: Introduzione a GWT (20)

ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
 
Presentazione tirocinio
Presentazione tirocinio Presentazione tirocinio
Presentazione tirocinio
 
Multi-Device Hybrid Apps con Visual Studio e Apache Cordova
Multi-Device Hybrid Apps con Visual Studio e Apache CordovaMulti-Device Hybrid Apps con Visual Studio e Apache Cordova
Multi-Device Hybrid Apps con Visual Studio e Apache Cordova
 
Rich Internet Application
Rich Internet ApplicationRich Internet Application
Rich Internet Application
 
Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Presentazione Corso - Parte 3
Presentazione Corso - Parte 3
 
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
 
Designing with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDesigning with microservices - Daniele Mondello
Designing with microservices - Daniele Mondello
 
Struttin' on, novità in casa Struts
Struttin' on, novità in casa StrutsStruttin' on, novità in casa Struts
Struttin' on, novità in casa Struts
 
Corso Javascript
Corso JavascriptCorso Javascript
Corso Javascript
 
MVVM senza fronzoli con Caliburn.Micro
MVVM senza fronzoli con Caliburn.MicroMVVM senza fronzoli con Caliburn.Micro
MVVM senza fronzoli con Caliburn.Micro
 
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the WebHands on MVC - Mastering the Web
Hands on MVC - Mastering the Web
 
Progetto e implementazione di una pipeline di sviluppo software con tecnologi...
Progetto e implementazione di una pipeline di sviluppo software con tecnologi...Progetto e implementazione di una pipeline di sviluppo software con tecnologi...
Progetto e implementazione di una pipeline di sviluppo software con tecnologi...
 
Applicazioni Web ultra-performanti con Vue.js e Delphi
Applicazioni Web ultra-performanti con Vue.js e DelphiApplicazioni Web ultra-performanti con Vue.js e Delphi
Applicazioni Web ultra-performanti con Vue.js e Delphi
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
 
Creazione componenti con Vue js
Creazione componenti con Vue jsCreazione componenti con Vue js
Creazione componenti con Vue js
 
Fe02 ria con breeze e knockout
Fe02   ria con breeze e knockoutFe02   ria con breeze e knockout
Fe02 ria con breeze e knockout
 
Webkit meets native development
Webkit meets native developmentWebkit meets native development
Webkit meets native development
 
Web Api – The HTTP Way
Web Api – The HTTP WayWeb Api – The HTTP Way
Web Api – The HTTP Way
 
Asp.net 4 Community Tour VS2010
Asp.net 4 Community Tour VS2010Asp.net 4 Community Tour VS2010
Asp.net 4 Community Tour VS2010
 

Plus de firenze-gtug

Html5 apps - GWT oriented
Html5 apps - GWT orientedHtml5 apps - GWT oriented
Html5 apps - GWT orientedfirenze-gtug
 
Android ndk - ottimizzazione su dispositivi Intel
Android ndk - ottimizzazione su dispositivi IntelAndroid ndk - ottimizzazione su dispositivi Intel
Android ndk - ottimizzazione su dispositivi Intelfirenze-gtug
 
Gwt kickoff - Alberto Mancini & Francesca Tosi
Gwt kickoff - Alberto Mancini & Francesca TosiGwt kickoff - Alberto Mancini & Francesca Tosi
Gwt kickoff - Alberto Mancini & Francesca Tosifirenze-gtug
 
Youtube broadcast live - Massimiliano D'Ambrosio
Youtube broadcast live - Massimiliano D'AmbrosioYoutube broadcast live - Massimiliano D'Ambrosio
Youtube broadcast live - Massimiliano D'Ambrosiofirenze-gtug
 
Intro BeagleBone Black - Massimiliano D'Ambrosio
Intro BeagleBone Black - Massimiliano D'AmbrosioIntro BeagleBone Black - Massimiliano D'Ambrosio
Intro BeagleBone Black - Massimiliano D'Ambrosiofirenze-gtug
 
Arduino - Massimiliano D'Ambrosio
Arduino - Massimiliano D'AmbrosioArduino - Massimiliano D'Ambrosio
Arduino - Massimiliano D'Ambrosiofirenze-gtug
 
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo BugianiIntroduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugianifirenze-gtug
 
RFID: What & Why - Stefano Coluccini
RFID: What & Why - Stefano ColucciniRFID: What & Why - Stefano Coluccini
RFID: What & Why - Stefano Coluccinifirenze-gtug
 
GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)firenze-gtug
 
Presentazione Google App Engine
Presentazione Google App EnginePresentazione Google App Engine
Presentazione Google App Enginefirenze-gtug
 
Android chat in the cloud
Android chat in the cloudAndroid chat in the cloud
Android chat in the cloudfirenze-gtug
 
Clean android code
Clean android codeClean android code
Clean android codefirenze-gtug
 
Intel ndk - a few Benchmarks
Intel ndk - a few BenchmarksIntel ndk - a few Benchmarks
Intel ndk - a few Benchmarksfirenze-gtug
 
EE Incremental Store
EE Incremental StoreEE Incremental Store
EE Incremental Storefirenze-gtug
 
Programming objects with android
Programming objects with androidProgramming objects with android
Programming objects with androidfirenze-gtug
 
Apertura "Mobile & Embedded" - 13 febbraio 2014
Apertura "Mobile & Embedded" - 13 febbraio 2014Apertura "Mobile & Embedded" - 13 febbraio 2014
Apertura "Mobile & Embedded" - 13 febbraio 2014firenze-gtug
 
Maven from dummies
Maven from dummiesMaven from dummies
Maven from dummiesfirenze-gtug
 
Dev fest android application case study
Dev fest android application   case studyDev fest android application   case study
Dev fest android application case studyfirenze-gtug
 

Plus de firenze-gtug (20)

Html5 apps - GWT oriented
Html5 apps - GWT orientedHtml5 apps - GWT oriented
Html5 apps - GWT oriented
 
Android ndk - ottimizzazione su dispositivi Intel
Android ndk - ottimizzazione su dispositivi IntelAndroid ndk - ottimizzazione su dispositivi Intel
Android ndk - ottimizzazione su dispositivi Intel
 
Gwt kickoff - Alberto Mancini & Francesca Tosi
Gwt kickoff - Alberto Mancini & Francesca TosiGwt kickoff - Alberto Mancini & Francesca Tosi
Gwt kickoff - Alberto Mancini & Francesca Tosi
 
Youtube broadcast live - Massimiliano D'Ambrosio
Youtube broadcast live - Massimiliano D'AmbrosioYoutube broadcast live - Massimiliano D'Ambrosio
Youtube broadcast live - Massimiliano D'Ambrosio
 
Intro BeagleBone Black - Massimiliano D'Ambrosio
Intro BeagleBone Black - Massimiliano D'AmbrosioIntro BeagleBone Black - Massimiliano D'Ambrosio
Intro BeagleBone Black - Massimiliano D'Ambrosio
 
Arduino - Massimiliano D'Ambrosio
Arduino - Massimiliano D'AmbrosioArduino - Massimiliano D'Ambrosio
Arduino - Massimiliano D'Ambrosio
 
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo BugianiIntroduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
 
RFID: What & Why - Stefano Coluccini
RFID: What & Why - Stefano ColucciniRFID: What & Why - Stefano Coluccini
RFID: What & Why - Stefano Coluccini
 
GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)
 
Presentazione Google App Engine
Presentazione Google App EnginePresentazione Google App Engine
Presentazione Google App Engine
 
Android chat in the cloud
Android chat in the cloudAndroid chat in the cloud
Android chat in the cloud
 
Clean android code
Clean android codeClean android code
Clean android code
 
#Html2Native
#Html2Native#Html2Native
#Html2Native
 
Intel ndk - a few Benchmarks
Intel ndk - a few BenchmarksIntel ndk - a few Benchmarks
Intel ndk - a few Benchmarks
 
EE Incremental Store
EE Incremental StoreEE Incremental Store
EE Incremental Store
 
Programming objects with android
Programming objects with androidProgramming objects with android
Programming objects with android
 
Apertura "Mobile & Embedded" - 13 febbraio 2014
Apertura "Mobile & Embedded" - 13 febbraio 2014Apertura "Mobile & Embedded" - 13 febbraio 2014
Apertura "Mobile & Embedded" - 13 febbraio 2014
 
Maven from dummies
Maven from dummiesMaven from dummies
Maven from dummies
 
Apps fuel oct2012
Apps fuel oct2012Apps fuel oct2012
Apps fuel oct2012
 
Dev fest android application case study
Dev fest android application   case studyDev fest android application   case study
Dev fest android application case study
 

Niccolò Becchi: Introduzione a GWT

  • 2. Agenda  Panoramica tecnologie per web application  Che cos'è GWT  Comunicazione con il server  Esempi d'uso:  Applicazione web con pattern MVC nella costruzione dell'interfaccia (approccio comune a tutti gli sviluppatori di applicazioni desktop java Swing)  Integrazione di Gwt con CQuery in un'applicazione html multipagina tradizionale (approccio comune a tutti gli sviluppatori web).  Ma quando conviene usare Gwt?
  • 3. Modelli di Web Application  Tecnologie html  Web 1.0, 1 Iterazione = 1 Refresh di pagina  Mixed Model, Page Reloads + AJAX  Puro JS, Tutto accade nella stessa pagina  Altre tecnologie RIA:  Adobe Flex  Microsoft Silvelight
  • 4. Web 2.0  HTML prodotto lato server (php, java, python,...) rafforzato con Javascript client-side  Reloads gradualmente sostituiti con chiamate asincrone AJAX  Framework per semplificare creazione website basati du db (Django, Rails):  Riusabilità del codice, numerosi plug-in.  Object-relational mapper tra data models (Python classes) e database relazionale;  Generazione dinamica interfaccia CRUD (Create, Read,...)  Traduzione tra form HTML a valori da storicizzare su database.
  • 5. Tendenze di oggi  Trasferisce sempre più logica alla client UI  Tool di sviluppo separati tra client e server.  Strumenti completi End to end non maturi  Lato client esistono librerie js (jQuery, Dojo)  Programmazione JS con un livello di astrazione superiore  Comportamenti omogenei e testati sui differenti browser  Con poco sforzo riesco a far tanto!!
  • 6. Quando la mia applicazione rischia di diventare pure Javascript?  Riprodurre il comportamento di un applicazione desktop:  Interfaccia ricca con numerose componenti  Su ciascuna componente posso interagire alterandone l'aspetto (ad es. allargando un pannello, drag and drop, …)  Non posso permettermi un ricaricamento della pagina:  Perderei caratteristiche della visualizzazione modificate dall'utente  Dovrei trasferire tutto lo stato del client sul server in un bean di sessione o altro.  L'utente avrebbe l'impressione di un ritardo.
  • 7. E quando il codice Javascript scritto da me cresce a dismisura?  Linguaggio non compilato: Errori banali solamente in real time.  Come faccio per trovare errori: – 1. Semino alert nel codice – 2. Uso firebug (debug non è al livello di ecplise) – 3. GreaseMonkey per l'iniziezione di codice Js da eseguire sulla pagina – 4. Uso Firefox ma il cliente usa IE
  • 9. Architettura per RIA sviluppato da Google  Usa Eclipse e java sia per la parte client che server dell'applicazione  Per il client Java viene compilato in Javascript ottimizzato  Permette di scrivere codice condiviso senza avere ridondanze di codice tra client e server  Include meccanismo RPC di comunicazione con il Server  Supporto per Javascript nativo
  • 10. Compilazione java client Gwt  Compilate più versioni Js, una per ciascun browser. Firefox FF_EN FF_FR FF_ZH Opera OP_EN OP_FR OP_ZH Safari SF_EN SF_FR SF_ZH IE6 IE_EN IE_FR IE_ZH English French Chinese
  • 11. Installazione in eclipse  Scaricare Ecplise  Installare plug-in da software updates: http://dl.google.com/eclipse/plugin/3.5
  • 13. Esempio Hello World  Due file scritti dall'utente: 1. Hello.html  Include una chiamata a gwt.js – Il toolkit JavaScript ed un elemento con un id definito  Questo viene selezionato per aggiungervi un contenuto 2. Hello.java  Codice java compilato da Gwt in javascript
  • 14. Hello.html <html> <head> <meta name='gwt:module' content='com.google.gwt.sample.hello.Hello'> <title>Hello</title> </head> <body> <script language="javascript" src="gwt.js"></script> <div id="hi"> Testo sovrascritto dal Gwt </div> </body> </html>
  • 16. Interfaccia in GWT  Basate su un livello di astrazione di Widget  Approccio comune alle applicazioni desktop: Java swing, QT designer (python), ...  Ogni widget è un oggetto java che poi verrà tradotto dal compilatore nel codice html/javascript corrispondente  Lato client posso in qualsiasi momento chiamare un metodo java di uno widget (Come se apparentemente il metodo java fosse eseguito dal browser)
  • 17. Esempio Widget TextBox Codice html tradizionale: <input type="text" name="test" value="pippo"/> Codice Java GWT: TextBox normalText = new TextBox(); normalText.setText(“pippo”); Traduzione javascript compilatore var aTextBox = document.createElement('input'); aTextBox.type = 'text'; aTextBox.value = 'pippo';
  • 20. Creazione di un applicazione GWT stile java Swing
  • 21. Esempio: Concessionaria auto  Si hanno numerose auto e 5 rivenditori: Luca, Alberto, Francesca, Imad e Niccolò  Ciascun rivenditore è specializzato nel vendere una categoria di auto (Luca con le auto di lusso, ..)  Il sistema deve proporre in tempo reale una lista limitata di auto suggerite ad ogni rivenditore che rispettino al meglio le sue caratteristiche
  • 23. Model-View-Controller in Gwt  Pattern consolidato utilizzato in tanti contesti.  Separare la logica dai dati e dalla visualizzazione.  Differenze rispetto ad MVC di framework lato server – In genere applicato all'intera pagina nel suo complesso.  In GWT, come in swing, il pattern è applicato a livello di singola componente dell'interfaccia: – Continua a vivere sul browser – Ho tanti piccoli MVC, posso avere: − Più view sullo stesso model; − Più componenti con la stesso logica;
  • 24. MVC ed Observer pattern  Idea di base: − View vede il model per caricare i dati − Controller vede entrambi  Come interagiscono? − Iterazione sulla view => si avverte il controller − Modifica Model => Si avverte la view
  • 26. PropertyChangeModel.java (classe estesa dal mio model) ...
  • 27. AutoWidget.java (passo 1 view)
  • 28. AutoWidget2.java estende AutoWidget.java (passo 2 view) continua...
  • 31. MVC: Sincronizzazione automatica tra più view dello stesso model  Modifica del model a opera di uno qualunque dei controller mi scatena un evento di aggiornamento su tutte le view collegate
  • 32. DEMO concessionaria  Fare vedere un minimo di iterazioni sull'interfaccia, ecc...
  • 36. Cenni ad MVP  Approccio MCV complicato e, nel caso di banale dialogo di interfaccia, è sovradimensionato.  MVP, nuovo pattern suggerito dagli sviluppatori del Gwt per l'implementazione dell'interfaccia  Portare più logica possibile fuori dalla View in un altro livello più facilmente testabile.  Tutte le operazioni sul View, compreso il caricamento iniziale dei dati del model, sono scritte fuori da questo (ossia nel presenter)
  • 37. Presenter:  Stato intermedio tra view e model:  Definisce al suo interno un livello di astrazione della view su cui definisce tutte le iterazioni che poi andrà ad effettuare con la view vera e propria  Carica i dati del model sulla view  Legge le modifiche sulla view (da trasferire al model)  Contiene la logica, ossia istruisce la view per cambiare stato in risposta ad un input di un utente o ad una modifica sul model Vantaggi MVP:  Più semplice e chiaro da usare  Possibilità di sostituire la view reale con una view simulata per testare la logica dello widget
  • 38. Gwt con CQuery in un'applicazione html multipagina
  • 39. Necessità altro approccio  Molti designers iniziano il progetto con look  Reify into server-side rendering using LAMP frameworks  Layer Javascript on top to enhance UI  Page can always degrade to working Web  1.0 app when Javascript is lacking  Progetto multipagina per Facilitates SEO and accessibility
  • 42. JQuery  Libreria Javascript tra le più usate  Interrogazione DOM  Concatenazione di metodi  Manipolazione elementi  Allacciamento di dati ed eventi  Plugins
  • 43. GQuery è  Clone di jQuery scritto in GWT  Adatto ad essere usato nella modalita di progettazione delle applicazioni a partire dal design  Facilmente adattabile ad applicazioni già esistenti  Facile da imparare per chi usa jQuery  Mantiene molte delle caratteristiche di efficienza e di benefici di GWT
  • 47. Salvati dagli errori Fare Demo con Gquery se basta il tempo!!
  • 48. Comunicazione con il server
  • 49. Comunicazione con server via HTTP • GWT RPC framework transparently make calls to Java servlets and let GWT take care of low-level details like object serialization. • to transparently make calls to Java servlets and let GWT take care of low-level details like object serialization. • The server-side code that gets invoked from the client is often referred to as a service, • so the act of making a remote procedure call is sometimes referred to as invoking a service. • Alternatively, you can use GWT's HTTP client classes to build and send custom HTTP requests.
  • 51. Passi creazione servizio RPC Per definire un interfaccia RPC è necessario in ordine: • 1. Definire sul client un interfaccia per il tuo servizio che estenda il RemoteService ed elenchi tutti i metodi del tuo RPC. • 2. Definire sul server una classe che implementi il codice lato server estendendo il RemoteServiceServlet ed implementando i metodi dell'interfaccia creata precedentemente. • 3. Definire sul client un interfaccia asincrona del tuo servizio per essere chiamata dal codice lato client.
  • 54. Interfaccia asincrona sul client Configurazione servlet su web.xml