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
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';
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
22.
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
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
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
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
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.