Post on 07-Nov-2014
description
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
Firefox
Opera
Safari
IE6
English French Chinese
FF_EN
OP_EN
SF_EN
IE_EN
FF_FR
OP_FR
SF_FR
IE_FR
FF_ZH
OP_ZH
SF_ZH
IE_ZH
Compilate più versioni Js, una per ciascun browser.
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”);
var aTextBox = document.createElement('input'); aTextBox.type = 'text'; aTextBox.value = 'pippo';
Traduzione javascript compilatore
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
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.javaestende 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
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
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 RPCPer 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
Interfaccia asincrona sul client
Configurazione servlet su web.xml
Esempio
Client-side call
Quando conviene usare Gwt?