Google Web Toolkit Giovanni Baleani Programmatore Java - Filippetti S.r.l.

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/gwt-
  mac-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 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() {

                public void onSuccess(String result) {
                    Window.alert(result);
                }

                public void onFailure(Throwable caught) {
                    Window.alert(caught.getMessage());
                }
          });
      }
});

Remote Procedure Call
       Configurazione per il testing

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

?