Introduzione a GWT

GWT Google Web Toolkit

Giovanni Lagorio ([email protected])DISI – Università di Genova

mailto:[email protected]

Argomenti

AJAX e GWTObiettivi e panoramica “live”Installazione e (l’inevitabile) “Ciao mondo”GUI (versione-Bignami™)GWT RPC Accenni ad altre caratteristiche– JSNI, Deferred binding, Overlay Types, ...

Conclusioni

JUG Meeting - 15 Luglio 2008


C’era una volta il web...(pre-AJAX)

I browser sono (trattati come) terminali stupidiQualsiasi interazione richiede un roundtrip HTTP (i tasti “back” e “reload” diventano i vostri peggiori nemici ☺)Gestire lo stato non è banale (ogni pagina/richiesta è a sé stante)Il server deve ricreare ogni volta un’intera pagina

AJAXAsyncronous JAvascript (and XML)

Il client non perde lo stato a ogni interazioneRichieste al server in background, è possibile feedback immediatoIl carico del server diminuisce– il load-balancing diventa più facile

Gestire più browser può diventare un incubo



Google Web Toolkit - GWT

Framework per scrivere applicazioni AJAX in Java

Dal codice Java, sviluppato nell’IDE preferito, produce codice Javascript:cross-browser (IE, Firefox, Mozilla, Safari e Opera)ottimizzato (vari stili)


Obiettivi

Preferire elementi GUI nativi, widget semplici Rispettare le preferenze dell’utente, per esempio, le dimensioni dei fontNon cerca di portare il desktop sul webVelocità, specialmente in partenzaNon un web diverso, ma un web migliore(anche per gli sviluppatori)


Componenti principali

GWT Hosted Web Browser, che permette l’esecuzione/debugging del codice Java (senza traduzione in JS)Compilatore Java-JS, per l’esecuzione webLa libreria di emulazione (di parte) del JRE, per l’esecuzione webGWT Web UI class library, per creare la GUI

Showcase (Kitchen Sink)

ControlliHistory/“Bookmarkability”Font size



Installazione

Installare il Java SDKScompattare l’archivio del GWT da qualche parte(Opzionale) aggiungere il percorso al PATH di sistema

Al momento, versione stabile 1.4.62;oggi usiamo la 1.5 RC1(così se qualcosa non funziona darò la colpa alla versione beta ☺)

Uso da riga di comando

Vari script a disposizione, in particolare:applicationCreatorcrea applicazione “ciao mondo” (cartelle e script per compilare/lanciare); per es.:applicationCreator com.boh.client.MyApp

projectCreatorcrea progetto Eclipse (o Ant buildfile), per es.:projectCreator -eclipse MyProjectapplicationCreator -eclipse MyProject com.boh.client.MyApp


Struttura dei progetti

cartelle contenenti i sorgenti corrispondono ai package (ovvio, sorgenti Java)la root contiene solo la definizione del modulo (file XML)tre sotto-cartelle:– client: sorgenti lato client– server: sorgenti lato server (RPC)– public: risorse statiche



Per Eclipse – Cypal Studio

http://code.google.com/p/cypal-studio/downloads/listVersione: al momento RC8, io ho usato la RC4; supporta

GWT 1.5 dalla RC6.

Installazione: si scompatta nella directory dei plugin e poi va settato il path al GWT (dalla sua scheda di opzioni in Eclipse)

Chiaramente, esistono plugin per altri IDE

Demo: Ciao Mondo

Attenzione: anche col plugin installato, non esiste in Eclipse un tipo di progetto “GWT”; bisogna scegliere “Dynamic Web Project”.

A quel punto, possiamo scegliere “Cypal Studio for GWT” nelle configurazioni.

Poi, si possono aggiungere “GWT Module” o “GWT Remote Service”


GUI (in una slide)

non è AWT o Swing, ci assomiglia tanto... ma non troppo (stile via CSS)La root è UIObject che “wrappa” un oggetto DOM e non gestisce eventi Di fatto, nel 99% dei casi si usano sottoclassi di Widget, che aggiunge il supporto per gli eventi I Widget possono essere aggiunti ai Panel, quello che corrisponde al <body> è RootPanel.get()Composite permette di aggregare Widget[1.5] Temi visuali


GWT RPC Service

AJAX ≡ richieste asincroneServer risponde solo i dati necessari(non la nuova pagina HTML)GWT si basa sulle Servlet, ma la cosa è trasparente (RemoteServiceServlet )Si possono passare oggetti, che vengono serializzatiNon sono Web Service, non è la serializzazione di Java


Definizione di un servizio

Si definisce un’interfaccia che estende RemoteServiceSi implementa il servizio estendendo RemoteServiceServlet e, naturalmente, implementando l’interfaccia

siamo sul server questo è Java! (non verrà tradotto, possiamo usare quello che vogliamo)


Esempio – Definizione e Implementazione

interface CalcService extends RemoteService {int sum(int a, int b);

}

class CalcServiceImplextends RemoteServiceServlet implements CalcService {

public int sum(int a, int b) { return a+b; }}


Tutto pronto?

Quindi sul client possiamo scrivere:

void printAnswer(CalcService calc) {int answer = calc.sum(40, 2);...

… o no?


Asyncronous …

Per il client, va definita un’interfaccia che si chiama come la prima, con in più Async(nell’esempio, CalcServiceAsync)Stessi metodi, ma tutti void, conUn parametro in più, di tipo AsyncCallback<T>, che dichiara:– void onFailure(Throwable caught);– void onSuccess(T result);


Ci siamo: definita l’interfaccia blablablaAsync... sul client

CalcAsync calc = (CalcServiceAsync) GWT.create(CalcService.class);

AsyncCallback<Integer> callback = new AsyncCallback<Integer>() {

public void onFailure(Throwable caught) { … }public void onSuccess(Integer result) { ... }

};calc.sum(40, 2, callback);


RPC, riepilogando...

Si definisce l’interfaccia con i metodi che si vogliono eseguire sul serverSi implementa l’interfaccia con una classe servletSi definisce l’interfaccia per il client (...Async) dove i tipi di ritorno T vengono sostituiti da un parametro AsyncCallback<T>Sul client si usa GWT.create per istanziare il servizio


RCP con Cypal Studio

La situazione è davvero così “drammatica”?

No!Ci sarà un motivo per cui sto

usando Eclipse al posto di Vi ☺


JSNI – JavaScript Native Interface

Nome ricorda JNI, non è un caso... Può essere usato per:– dare un’interfaccia type-safe a JS esistente

(“wrappando” il codice JS)– chiamare JS da Java e viceversa

Svantaggi:– Passare/usare oggetti fra i due mondi può

diventare macchinoso (+subdole differenze)– Si perde il controllo statico


Esempio, da Java a JS

public static native void alert(String msg) /*-{$wnd.alert(msg);

}-*/ ;


$wnd oggetto window$doc oggetto document

Delimitano il codice JS(per il compilatore Java

sono commenti!)

Gli oggetti creati da JS hanno (in Java) il tipo “opaco” JavaScriptObject e [1.4] identità non sempre preservata dai wrapper in hosted-mode

Da JS a Java...

[instance-expr.]@class-name::method-name(param-signature)(arguments)

es:[email protected]::

instanceFoo(Ljava/lang/String;)(s);

Analogamente, si possono leggere/scrivere campi o invocare costruttori


Altre caratteristiche

I18NImage bundleIntegrazione con Junit– test asincroni

Richieste HTTP; JSON, XMLDeferred binding/generators[1.5] Strongly-typed DOM[1.5] Overlay types


Deferred bindings - Generators

Idea (imprecisa!): risoluzione statica del binding dinamicoIl compilatore genera tante permutazioni diverse, a runtime ne viene scelta una(viene caricato solo il codice che serve)Usati “dietro le quinte” per supporto cross-browser, I18N, RPC...Grazie all’analisi globale e l’inlining, codice estremamente ottimizzato


[1.5] Overlay types

Documentazione attuale: “to be done”Strato di type-checking sugli oggetti JSClassi che estendono JavaScriptObject – dove non è mai richiesta l’invocazione virtuale

Ricordano i cast “alla C”: l’utente deve sapere quello che sta facendoNessun overhead/modifica/wrapping



Conclusioni

Java JS: idea semplice ma (IMHO) genialeVere pagine HTML, formattate via CSSAJAX “senza compromessi” (cross-browser, history, “bookmarkability”, I18N, ...)Strong typing, IDE maturi e familiaritàOpen source, nessun vincolo per uso commerciale

Critiche/Osservazioni:[1.4] voglio i generici!!! (anche sul client)Sul lato client, non è disponibile tutto il JREGUI designer? free?

That’s all, folks!

Grazie ☺

... domande?JUG Meeting - 15 Luglio 2008

Technology

Introduzione a GWT