Google Web Toolkit

JUG – Ancona Italy
Google Web Toolkit
Giovanni Baleani
Programmatore Java
Filippetti S.r.l.
AJAX e GWT
- AJAX: Tecnologia emergente, tra le prime
applicazione ajax ci sono proprio gmail e
google calendar.
- GWT: qualcosa di più che un framework ajax,
introduce un concetto nuovo...
Compilatore
Java to Javascript
- Lo sviluppatore AJAX utilizza il linguaggio
Java per implementare la Web GUI
- Il compilatore pensa alla generazione del
codice javascript necessario, ottimizzandolo e
rendendolo compatibile ai vari browser
Componenti
del framework GWT
- Un compilatore
- Un browser chiamato “hosted mode browser”
- Una serie di librerie java (.jar)
- Emulazione JDK
- Widgets HTML / AJAX
- Sistema RPC (Servizi di backend AJAX)
- Unit Testing
Crescita del progetto: versioni
- Versione 1.0 (1.0.21 - Maggio 25, 2006)
- Versione 1.1 (1.1.10 - Agosto 23, 2006)
- Inclusione delle risorse automatica
- Internazionalizzazione
- Versione 1.2 (1.2.22 - Novembre 15, 2006)
- Pieno supporto per OSX
- Velocizzata la modalità hosted
- Possibilità di usare i widgets nei nodi di un albero
Finalmente Open Source !!
- Versione 1.3 (1.3.1 (RC) - Dicembre 12, 2006)
Questa è la prima versione completamente
OpenSource
- Versione 1.3 (1.3.3 - Gennaio 18, 2007)
- Versione 1.4 (1.4.62 - Marzo 17, 2008)
- Per usare un modulo in una pagina html basta
includere un solo javascript
- ImageBundle: combina molte immagini in una
singola, per eseguire un solo download
- RPC più modulare
- Versione 1.5 (1.5.3 - Ottobre 17, 2008)
- Supporto alla sintassi Java 5
- Supporto al contextmenu (tasto destro)
- Migliorate le DOM api
- API per le Animazioni
- Temi di default
Installazione
- Download da http://code.google.com/intl/it-IT/
webtoolkit/
- Scompattare il file in una cartella
- Fatto !!!
Primo Esempio con Eclipse
Ammesso di aver installato gwt in /opt/gwtmac-1.5.3
Lanciamo i seguenti comandi:
/opt/gwt-mac-1.5.3/projectCreator -eclipse JUG_GWT_1 -out JUG_GWT_1
/opt/gwt-mac-1.5.3/applicationCreator -eclipse JUG_GWT_1 -out JUG_GWT_1
it.jugancona.gwt.client.App1
- Importiamo il progetto da Eclipse
- Lanciamo l’hosted browser attraverso il
file .launch
Eclipse e Web-Tools
Se volessimo usare i web tools di eclipse ?
1. Creare una variabile in eclipse
“GWT_HOME”
Eclipse e Web-Tools
2. Creare un progetto “Dynamic Web” ed
utilizzare “www” al posto di
“WebContent”
Eclipse e Web-Tools
3. Lanciare “applicationCreator -eclipse
[nomeprogetto]” da dentro la cartella del
progetto di eclipse precedentemente creato
4. Aggiornare il progetto da eclipse
5. Aggiungere GWT_HOME/gwt-user.jar al
classpath del progetto
Cosa si può fare con GWT ?
La versione 1.5 mette a disposizione un ottima
vetrina dei widget di gwt
GWT_HOME/samples/Showcase/www/
com.google.gwt.sample.showcase.Showcase/
Showcase.html
GMail
Google Calendar
Google Docs
Punti di debolezza
- Distinzione tra codice java “client side” e
codice java “server side” (non tutta la jdk è
emulata)
- Difficile (ma non impossibile) da integrare in
progetti fatti con altri framework ajax
- Meno “smart” di un semplice javascript che
non richiede compilazione: poco adatto per
abbellire siti html con comportamenti ed effetti
javascript.
Punti di forza
- Refactoring come in java
- Unit Testing
- Performances (ottimizzabili ad ogni rilascio di
nuove versioni del compilatore)
- Debug come in java
- Open Source
- Riesce ad integrare facilmente librerie
esistenti (JSNI)
Punti di forza
- Modulare
- Possibilità di implementare nuovi widget ajax
e di redistribuirli facilmente attraverso un .jar
- Si possono includere moduli GWT che
risiedono su domini diversi rispetto alla
pagina html di inclusione
- Pieno utilizzo dei CSS
Fino a che punto ottimizza ?
Esempio di ImageBundle
package it.jugancona.gwt.client.images;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.TreeImages;
public interface MyTreeImages extends TreeImages {
}
@Resource("cartella_chiusa.gif")
public AbstractImagePrototype treeClosed();
@Resource("cartella_aperta.gif")
public AbstractImagePrototype treeOpen();
@Resource("doc_consolidato.gif")
public AbstractImagePrototype treeLeaf();
ImageBundle
Per disegnare questo:
Il compilatore genera
questo:
ImageBundle
Non più
3 get per ognuna delle icone dell’albero
Ma ...
1 get per tutte le icone dell’albero
E questo a volte risulta più veloce, specie con
tante immagini di piccole dimensioni.
Secondo Esempio:
Utilizzo di una
Remote Procedure Call
Illustriamo come implementare una semplice
chiamata ajax ad un servizio lato server.
Remote Procedure Call
L’iterfaccia principale
package it.jugancona.gwt.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
@RemoteServiceRelativePath("TestService")
public interface TestService extends RemoteService {
}
String faiQualcosa(String param);
Remote Procedure Call
L’iterfaccia Async
package it.jugancona.gwt.client;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface TestServiceAsync {
}
void faiQualcosa(String param, AsyncCallback<String> callback);
Remote Procedure Call
L’implementazione
package it.jugancona.gwt.server;
import it.jugancona.gwt.client.TestService;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
public class TestServiceImpl
extends RemoteServiceServlet implements TestService {
private static final long serialVersionUID = 1L;
}
public String faiQualcosa(String param) {
return "Mi hai passato '"+ param + "' come parametro.";
}
Remote Procedure Call
Il client
final TestServiceAsync service = GWT.create(TestService.class);
Button b = new Button("Prova RCP");
b.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
service.faiQualcosa("Parametro", new AsyncCallback<String>() {
public void onSuccess(String result) {
Window.alert(result);
}
public void onFailure(Throwable caught) {
Window.alert(caught.getMessage());
}
});
}
});
Remote Procedure Call
Configurazione per il testing
<?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name="com.google.gwt.user.User"/>
<entry-point class="it.jugancona.gwt.client.Example1"/>
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
<servlet
class="it.jugancona.gwt.server.TestServiceImpl"
path="/TestService"/>
</module>
Funziona!
Struttura finale
del progetto
Cosa bolle in pentola ?
1.6 Roadmap
Q1 2009
- Deploy come war semplificato
- Una architettura più configurabile che
permetta di usare altri servlet containers oltre
che il Tomcat con l’Hosted Mode browser
- Event handlers Uniformati
- Altri widgets (DatePicker, LazyPanel) presi
dall’incubator
- Miglirare le performance delle Stringhe
- Compilazione più veloce
?